一、什么是解构赋值
ES6中，通过解构赋值，可以将属性 / 值从对象 / 数组中取出，赋值给其他变量的操作就是解构赋值。
在下图上可以发现左侧和右侧都必须是数组，左侧可以定义 n 个变量，那么与之对应的右侧也需要有相应个数的变量值，我们左侧的变量从右侧取值的操作就是解构赋值。
二、数组解构
在上面的图示里可以看出来，数组解构就是从数组中提取值，只要等号两边的模式相同，左边的变量就会在右侧的数组里查找对应位置的值进行赋值操作。
数组结构的应用主要有：
-
对一维数组解构
-
对多维数组解构
-
对字符串解构
-
对...扩展运算符解构
1. 一维数组解构
传统的变量赋值是这样的：
let arr = [1,2,3];//把数组的值分别赋给下面的变量；
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a); // a的值为1
console.log(b); // b的值为2
console.log(c); // c的值为3变量的解构赋值：
let [a,b,c] = [1,2,3]; //把数组的值分别赋给下面的变量；
console.log(a); // a的值为1
console.log(b); // b的值为2
console.log(c); // c的值为3左侧是数组，右侧也是数组。
左侧的变量会根据索引，依次获取右侧数组里的值。
代码短了很多，可读性也很强，这种叫做数组的解构赋值。
一句话：按索引取值~！
-
不完全解构
当左边的模式（你可以理解为格式）与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分的变量赋值。
-
没得到的值的变量，返回的就是 undefined。相当于只声明了变量，但是没赋值。
-
没有变量存储的值，就会被浪费掉。
-
let [a] = []; // a = undefined
let [name,age,add] = ["Lily", , "Chongqing"];
console.info( name ); // Lily
console.info( age ); // undefined
console.info( add ); // Chongqinglet [x, , z] = [1, 2, 3]; //x=1,z=3
// 传统写法
let arr = [1, 2, 3];
let x = arr[0];
let z = arr[2];- 左侧变量可以设定默认值
如果变量的值取到了 undefined ，那么左侧变量返回的就是默认值。否则，就是右侧设定的值。
let [name="Lily",age=18] = [ "Mouse", 20 ] ; // age = 20
let [name="Lily",age=18] = [ "Mouse", 0 ] ; // age = 0
let [name="Lily",age=18] = [ "Mouse", NaN ] ; // age = NaN
let [name="Lily",age=18] = [ "Mouse", null ] ; // age = null
let [name="Lily",age=18] = [ "Mouse" ] ; // age = 18
let [name="Lily",age=18] = [ "Mouse" , undefined ] ; // age = 18 - 可以用来交换变量数据
let a = 1;
let b = 2;
[a,b] = [b,a];
console.info(a,b); // 2 12. 多维数组结构
let arr1 = [1,[2,3],4];
let [a1, [b1,c1,d1], e1] = arr1;
console.info( a1,b1,c1,d1,e1); // 1,2,3,undefined,4按照索引对应就行。
如果两侧不一致：
let [a,b,c] = [1,[2,3]];
console.log(a,b,c); // 1 [2, 3] undefined从这里可以看出，结构赋值其实就是一种模式匹配，两边模式要一致才行。
3. 字符串解构
字符串也可以这么玩，因为字符串的字符也是有索引的。在解构赋值的过程中，字符串被转换成了一个类似数组的对象。
// 证明字符串有索引
let str = "hello";
console.info( str[0] ); // h
console.info( str[1] ); // e// 字符串解构
let str = "hello";
let [a,b, , ,c] = str ;
console.info( a,b,c); // h e o4. 拓展运算符（...）
也称为扩展运算符 ，就是三个连续的点（...）。
作用：取出参数对象中可遍历的属性，拷贝到当前对象之中。(百度出来的)
我的个人理解是：可以把数组转为数据序列。
-
函数参数
function add(x, y) { // 参数 x，y 是个数据序列，逗号隔开。
return x + y;
}
let numbers = [4, 10]; // 数组
add(...numbers); // 14。 把数组转为数据序列，可以作为函数的参数。- 复制数组
// 复制数组
let arr1 = [1, 2];
let arr2 = arr1; // 数组是引用数据类型。arr1，arr2 都指向同一个数组空间。
// 一个数据改了，另一个数据也改了
arr2[0] = 2;
console.info(arr1) // [2, 2] ，复制失败
// 用 ... 拓展运算符就可以复制数组
let arr1 = [1, 2];
let arr2 = [...arr1];
arr2[0] = 2 ;
console.info( arr1 ); // [1, 2] ，复制成功。arr1 不受 arr2 数据变化影响。- 数组合并
// 传统做法
let arr = [1,2,3];
let newarr = [4, 5].concat(arr); // 用concat连接两个数组，返回一个新的数组副本
// ES6 拓展运算符
let arr = [1,2,3];
let newArr1 = [4, 5,...arr];
let newArr2 = [4, ...arr , 5];
console.info( newArr1 ); // [4, 5, 1, 2, 3]
console.info( newArr2 ); // [4, 1, 2, 3, 5]- 与数组结构一起用
用于生成数组
let [first, ...rest] = [1, 2, 3, 4, 5];
console.info( first ); // 1
console.info( rest ); // [2, 3, 4, 5]如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
let [...rest, last] = [1, 2, 3, 4, 5];
// 报错
let [first, ...rest, last] = [1, 2, 3, 4, 5];
// 报错- 将字符串转为真正的数组
let str = "hello";
let arr = [...str];
console.info( arr ); // ["h", "e", "l", "l", "o"]三、对象解构
按照属性来进行解构赋值，如果解构不成功，变量的值等于 undefined。对象解构可以指定默认值。
1. 和数组解构的对比
-
数组的元素是按次序排列的，变量的取值由它的位置决定；
-
模式匹配，两边都必须是 Object 对象。
-
而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
// 对象的解构赋值，跟顺序没有关系
let {age, name } = { name:"Tom", age:18 };
console.info(age,name); // 18 , Tom
let { age:b, name:a } = { nam e:"Tom", age:18 };
console.info( b, a ); // 18 , Tom左右属性名不一致，会得到 undefined。
let {age, nameZ } = { name:"Tom", age:18 };
console.info(age,nameZ); // 18 , undefined
let { age:b, nameZ:a } = { name:"Tom", age:18 };
console.info( b, a ); // 18 , undefined对象解构语句不是以变量声明关键字（如var，let或const）开头，则需要将语句包裹在括号中。 否则会报错。
({ a, b } = { a:100, b:200 } ); // good
let { a, b } = { a:100, b:200 } ; // good
let a , b ;
{ a, b } = { a:100, b:200 } ; // 报错2. 对象解构默认值
// 变量的非 undefined 的值可以取到
let { name, age = 28 } = { name:"Tom", age:18 };
console.info( name, age ); // Tom , 18
// 变量取到了 undefined ，则返回默认值
let { name, age = 28 } = { name:"Tom" };
console.info( name, age ); // Tom , 28let {name: a = "Tom", age: b = 28} = { name :"Lily"};
console.info( a, b ); // Lily, 28
// 右侧一个值都没有
let {name: a = "Tom", age: b = 28} = {};
console.info( a, b ); // Tom, 283. 对象作为函数参数
Object 对象可以作为函数参数。
let addFun = function( obj ){
let sum = obj.a + obj.b ;
console.info( sum );
};
addFun({
a:100,
b:200
}); // 300 为了设置 a ，b 默认值。利用对象解构，设置形参：
// 实参和形参会进行解构操作。
let addFun = function( { a=100, b=100 } ){
let sum = a + b ;
console.info( sum );
};
addFun({
a:100,
b:200
}); // 300。a ，100 ； b，200
addFun({ a:50 }); // 150。a,50; b 被省略，取默认值 100 。
addFun({ }); // 200。a , b 均取默认值
addFun(); // Cannot read property 'a' of undefined上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数 addFun 的参数是一个对象时，变量 a 和 b 才会通过解构赋值生成。
如果函数 addFun 调用时没提供参数，变量 a 和 b 就不会生成，从而报错。
addFun(); // 报错。Uncaught TypeError: Cannot read property 'a' of undefined相当于在执行代码
{ a=100, b=100 } = undefined ; 试图对 undefined 进行对象结构，会报错。
通过提供函数参数的默认值，就可以避免这种情况。
let addFun = function( { a=100, b=100 } = {} ){
let sum = a + b ;
console.info( sum );
};
addFun( ); // 200。参数默认值是 {} 。{} 会解构给 a，b 赋值。a，b 解构的值都是 undefined，所以取 a，b 均会获取解构的默认值 100。
四、对非对象进行解构
如果解构的值为 null、undefined，会得到一个类型错误提示。
如果你的值为数字、布尔值、字符串，会得到一个 undefined。
如果等号左侧的变量名为 Object.prototype 上的方法名称时，返回的就是方法实例。
let {a} = null ; // 报错
let {a} = undefined ; // 报错
let { age:a } = undefined ; // 报错
let {a} = 13 ; // a = undefined
let { toString } = 123 ; // toString() { [native code] }