ES6——解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

解构主要被分为对数组的解构和对对象的解构。

1、数组解构

 1）模式匹配，即等式左右两边模式一致，等式左边变量按照对应位置被赋予等式右边对应的值。

let [a,b,c]=[1,2,3];
console.log(a);//1
console.log(b);//2
console.log(c);//3

允许嵌套数组进行解构。

let [a, b, c, d] = [1, [2, 3], 4, 5];
console.log(a);//1
console.log(b);//[2,3]
console.log(c);//4
console.log(d);//5

2）不完全解构，即等式左边值匹配了等式右边一部分数据。【等式左边变量个数小于等式右边数据个数】

let [x, y] = [1, 2, 3];
console.log(x);//1
console.log(y);//2

3）无法对不可遍历的数据结构【某种数据结构不具有 Iterator 接口】进行解构。

let [foo] = 1;//error,报错
let [foo] = false;//error,报错
let [foo] = NaN;//error,报错
let [foo] = undefined;//error,报错
let [foo] = null;//error,报错
let [foo] = {};//error,报错

注意：

1. 解构不成功，则变量会被赋值undefined。 
2. 解构赋值允许指定默认值。ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

---

2、对象解构

1)完全解构，与数组相同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined

2）对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

3）对象的解构赋值可以取到继承的属性。

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);

const { foo } = obj1;
foo // "bar"

4）对象解构允许设置默认值。

---

3、拓展 

1. 对象解构允许设置默认值。
2. 字符串也可进行解构，字符串会被转换成了一个类似数组的对象。因为类似数组的会有一个length属性，因此还可以对这个属性解构赋值。
3. 对布尔和数值类型的数据进行解构，会先转换为对象再进行解构。
4. 无法对undefined和null类型的数据解构，会报错。
5. 函数参数也可进行解构