ES6(阮一峰)学习笔记（二）解构赋值

一、解构赋值

• 定义：按照一定规则从数组和对象中提取值，对变量进行赋值
• 支持嵌套

（1）数组

1、基本用法

一般用法：

let [a, b, b] = [0, 1, 2];

部分解构：

let [a, b] = [1];

console.log(a);//1
console.log(b);//undefined

对于数组的解构赋值，有：

等号右边需要是可遍历结构，或者说本身具备Iterator接口在转成对象以后具备Iterator接口。

 

2、默认值

可以给左边的变量赋予默认值

默认值生效条件为：解构赋值后，该变量成为了undefined(右边赋值为undefined 或者根本未赋值)，此时该变量的值变成默认值。

必须是通过严格相等符号===判断为undefined，默认值才会生效。

 

当默认值为表达式，则会在用到它之后，才会进行求值。

function foo() {
    return 2;
}
let [a = foo()] = [1]

//a = 1

 

(2)对象

• 支持嵌套
• 对象的解构赋值与数组的重要不同为：严格按“键值对”赋值，而不是顺序。
• 对于右边不存在的属性，左边的变量值会成为undefined。
• 支持取得继承来的属性

1、基本用法

如果变量名需要与右边属性名不一致，则应写成：

let {foo: util} = {foo: "test"};
//util = test

由此可见，对象解构赋值的实际写法为：

let {foo: foo} = {foo: "test"}

此时对于{foo: foo}，左边是匹配模式，右边才是变量。

 

对于嵌套解构，若右边不存在父属性，只有子属性，那么会报错。原因很简单，你无法取得一个undefined的子属性

 

2、默认值

基本用法与数组相似

 

3、注意事项

• {a} = {a: "test"};会报错，行首的{}会被js解析成代码块。应用()包裹整个表达式
• 允许左边不放任何变量，合法且不会报错
• 数组也是特殊的对象，也可以用{下标: 值}的方式进行对象解构赋值

 

（3）字符串

类似于数组的解构赋值，具备一个length属性，可以对其解构赋值

let {length: l} = "test"
// l = 4 

 

（4）数值和布尔值

先转为对象Number/Boolean，在进行解构赋值。

由于undefined和null无法转为对象或者数组，对其解构赋值会报错。

 

（5）函数参数

函数参数对传入的参数进行解构赋值，规则跟其他情况差不多。

对于多传入的参数，函数内部并不能感受到。

 

（6）圆括号

ES6不允许在容易导致解构出现歧义的情况使用括号。

如：

• 声明变量语句左边
• 函数参数
• 表达式赋值语句左边
• 左边整个或者部分的匹配模式

允许使用圆括号的情况：

赋值语句中的非模式部分，即“键值对”的值部分可以使用。

引用阮大的例子：

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

 

（7）用途 

解构赋值的用法有两个方向：

• 等待传入数据，对数据进行解构赋值。
• 对一个对象或数组进行解构，获取我们需要的值。

1、方便地交换两个变量值：[x, y] = [y, x]。

2、函数返回一个对象或数组，其他地方接收的时候。

3、给函数参数传参。

4、获取JSON数据。

5、函数参数给予默认值。

6、对map对象解构赋值，通过for...of方便地拿到key/value。

7、常用的import/require的{util1, util2}按需导入。