提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

ES6新特性梳理汇总

对象 变量 数组
2023-02-25 18:27:42 时间

1. let和const声明变量

1.1 var

var作为es5声明变量的唯一方法，有很多缺点:

  • 可被多次声明，后面声明的变量会覆盖前面的变量
  • 可被重新赋值
  • 会被变量提升，即可以在声明前调用，值为undefined

1.2 let和const

弥补了var的缺点

共同点：

  • 不会被变量提升
  • 拥有块级作用域，暂时性死区
  • 只允许声明一次

不同点：

  • let可只声明不赋值，const必须赋值
  • let允许重新赋值，const不允许，为只读的常量

1.3 补充

const赋值引用类型的值，保存的是指针。

指针不能修改，而值是可以被修改。

在日常开发中，我的建议是全面拥抱let/const，一般的变量声明使用let关键字，而当声明一些配置项（类似接口地址，npm依赖包，分页器默认页数等一些一旦声明后就不会改变的变量）的时候可以使用const，来显式的告诉项目其他开发者，这个变量是不能改变的，同时也建议了解var关键字的缺陷（变量提升，污染全局变量等），这样才能更好的使用新语法

2. 箭头函数

箭头函数和普通函数的区别：

  • 箭头函数写法更优雅
  • 箭头函数的this永远指向声明它的作用域(上下文)
  • 箭头函数没有原型，不能new
  • 箭头函数没有arguments,可以通过...rest拿到参数数组
  • 当只有一个参数的时候可以省略小括号
  • 当箭头函数体内只有一行逻辑时可以省略大括号和return，并且会把这行作为return的值

3. 解构赋值

3.1 数组解构赋值

数组必须按照顺序解构

1  
2  // 常规用法
3  const [a, b] = [10, 20, 30, 40, 50]; // a 10; b 20
4  
5  // 可设置默认值
6  const [a = 12,b] = [,3]; // a 12; b 3
7  
8  // 可将剩余数组赋值给一个变量（必须是最后一个解构项）
9  const [a, b, ...rest] = [10, 20, 30, 40, 50]; // a 10; b 20; rest [30, 40, 50]
10  
11  // 可跳着解构
12  const [a,,b] = [12,23,34,45]; // a 12;b 34

3.2 对象解构赋值

对象解构没有顺序可言，但必须与属性同名，才能取到正确的值。

1// 常规用法
2const {a, b} = {a:10, b: 20}; // a 10; b 20
3
4// 解构出来后可以取个新名
5const {a:q, b} = {a:10, b: 20}; // q 10; b 20; a is not defined
6
7// 可设置默认值
8const {a = 12, b} = {a:undefined, b: 20}; // a 12; b 3
9
10// 将剩余数组赋值给一个变量（必须是最后一个解构项）
11const {a = 10, b, ...rest} = {a:undefined, b: 20, c: 30, d: 40}; // a 10; b 20; rest {c: 30, d: 40}
12
13

3.3 字符串解构赋值

没想到吧？字符串也能解构?

并且同时具有数组和对象两位大哥的解构方式

1// 当作数组结构
2const [q,w] = "12"; // q 1; w 2
3      
4//当作对象形式
5//取出“world”中的“r”
6const { 2: two , length } = "world"; //这里的“2”是索引值 , length是字符串长度
7console.log(two , length ); // "r" 5

3.4 补充

1、解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）

2、undefined不能被解构

3、如果对象层数少，使用解构赋值语意化更强，对于作为对象的函数参数来说，可以减少形参的声明，直接使用对象的属性（如果嵌套层数过多我个人认为不适合用对象解构，不太优雅）

4. 参数默认值

1// ES6之前，当未传入参数时，text = "default"；
2function printText(text) {
3    text = text || "default";
4    console.log(text);
5}
6// ES6；
7function printText(text = "default") {
8    console.log(text);
9}
10printText("hello"); // hello
11printText();// default

5. 模板字符串

需要拼接字符串的时候尽量改成使用模板字符串

1// bad
2const foo = "this is a" + example;
3
4// good
5const foo = `this is a ${example}`;

6. 数组方法

6.1 for of

可以遍历数组或字符串

1const arr = [2, 4, 3, 4, 5];
2const str = "aabbccss";
3for (const i of arr) {
4  console.log(i);
5}//2 4 3 4 5
6
7for (const i of str) {
8  console.log(i);
9} //"a" "a" "b" "b" "c" "c" "s" "s"

7. Module模块化

7.1 Module特点：

ES6 Module是静态的，也就是说它是在编译阶段运行，和var以及function一样具有提升效果。

7.2 Module导入/导出

1//import导入
2import menus from "@/router";
3import { Loading, Redirect } from "@/components";
4import { changeBlogTitle, getDecode } from "@/utils";
1//export 导出
2const x = 10
3
4const y = 20
5
6export {x}
7
8export default y

这两者的区别是:

  • export {<变量>}导出的是一个变量的引用，export default导出的是一个值
  • 就是说export {<变量>} ，类似浅拷贝，如果原变量因为某些原因被改变了，那么会立刻反映到import
  • 而export default就是类似深拷贝，原变量改变后，不会反映到import

8. 展开/剩余运算符

8.1 展开运算符...

当三个点放到一个数组/对象前面，就变成了展开运算符。可替代数组concat/对象的assign方法，将一个数组/对象展开拆封，合并到一个数组/对象，属于浅拷贝的一种

8.2 剩余运算符

  • 当三个点放到函数的参数上，就变成了剩余运算符，所以它必须放在最后一个参数。
  • 剩余运算符最重要的一个特点就是替代了以前的arguments
  • rest只是形参, 可以随意取名

9 class类

class类梳理文章

10 Promise

Promise类梳理文章

11 Map和Set对象

Set和Map主要的应用场景在于数组去重和数据存储

相关文章