前言
从前我们对变量赋值时，都是通过赋值运算符，右边赋值给左边这样操作的。
let a = 1;
let b = 2;
let c = 3;
let obj = {};
obj.name = 'mm';
obj.age = 18;
现在我们通过模式匹配的方式来赋值。
左边是解构目标，右边是解构源。
左右结构要保持一致。
一、数组解构赋值：基本方式
1.1 一一对应
数组的解构是有顺序的，是一一对应的。（等号右边直接写数组的变量名也可以。）
let [a,b,c] = [1,2,3];
console.log(a,b,c);
let arr = [4,5,6];
let [x,y,z] = arr;
1.2 可嵌套
只要右边的模式和左边相同，那么左边对应的变量就会被赋予对应的值。
let [a,[b,[c,d]],e] = [1,[2,[3,4]],5];
console.log(a,b,c,d,e);
1.3 不完全解构
如果右边没有给值，就当做undefined处理。
let [a,b,c] = [1,2]; // let [a,b,c] = [1,2,undefined];
1.4 可忽略
let [a, , b] = [1,2,3];
二、数组解构赋值：剩余运算符
2.1 定义
语法：
...变量名
作用：可以将右边数组中剩余的值解构到左边，而且是以数组的形式保存。
let [a, ...b] = [1,2,3,4,5,6];
console.log('a为：', a);
console.log('b为：', b);
2.2 注意
剩余运算符只能放在最后一个参数的位置上，否则报错。
let [...b, a] = [1,2,3];
console.log(b);
三、数组解构赋值：默认值
3.1 规则
指定默认值，默认值产生的条件是：右边数组中对应的数据（====）严格等于undefined。
例如下面，y=10就表示，y的默认值为10。
let [x,y=10] = [1]; // let [x,y=10] = [1, undefined];
console.log(x,y);
3.2 特殊情况
let [a=10, b=a] = []; // a=10，b=10
let [a=10, b=a] = [1]; // a=1, b=1
let [a=10, b=a] = [1,2]; // a=1, b=2
let [a=b, b=20] = []; // 报错（在用b之前还没初始化值）
分析：
第一行：a和b匹配到undefined，所以采用默认值，a是10，b的值是a，也就是10；
第二行：a匹配到1，b匹配到undefined，所以b的值就是a，也就是1；
第三行：a和b均匹配到数值，因此a为1，b为2；（这里b不会是默认给到a的值，因为它自己有匹配的值）
第四行：a=b，但是b还没有初始化，因此报错。
四、对象解构赋值：基本方式
4.1 映射对应
只有左边对象的变量名和右边对象的属性名相同时，才会取到值。（等号右边写对象的变量名也可以。）
let {a, b} = {a:'foo', b:'bar'}; // a='foo' b='bar'
let obj = {
name: 'mm',
age: 18
}
let {name, age} = obj; // name='mm' age=18
let {say} = {jump:'jump', sing:'sing'}; // say='undefined' （找不到对应的属性名，那就给undefined）
4.2 可嵌套
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj; // x='hello' y='world'
左边：p是一种模式匹配，真正解构的是后面的数组中的x和对象中的y。
因此按照数组解构'hello'赋值给x，按照对象解构'world'赋值给y。
那么要想获取对象中p的属性值呢，直接写p就行。
let {p} = obj; // p=['hello', {y: 'world'}]
4.3 不完全解构
let {a,b,c} = {a:1,b:2}; // a=1 b=2 c=undefined
4.4 可忽略
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj; // x='hello'
五、对象解构赋值：剩余运算符
剩下的属性以对象的形式保留。
let {a, b, ...res} = {a:1, b:2, c:3, d:4, e:5}; // a=1 b=2 res={c:3, d:4, e:5}
六、对象解构赋值：默认值
指定默认值，默认值产生的条件是：对象属性名（====）严格等于undefined。
let {a,b=10,c} = {a:1}; // a=1 b=10 c=undefined
let {x=3} = {x:undefined}; // x=3
let {y=4} = {y:null}; // y=null
七、对象解构赋值：易错点
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。
例如，等号左边foo对应右边的同名属性是foo，它的值是'foo'，这个值最后赋值给foo对应的变量f而非foo。
简而言之，这个f和b相当于是一个别名。
let {foo:f, bar:b} = {foo:'foo', bar:'bar'}; // f='foo' b='bar'
八、解构赋值的应用
8.1 交换变量
let x=1, y=2;
[x, y] = [y, x];
console.log(x,y); // 2 1
8.2 接收返回值
function foo() {
return [1,2,3];
}
let [a,b,c] = foo();
console.log(a,b,c); // 1 2 3
function bar() {
return {
b1: 'bar1',
b2: 'bar2'
}
}
let {b1, b2} = bar();
console.log(b1, b2); // 'bar1' 'bar2'
8.3 获取JSON数据
var json = {
name: 'mm',
age: 18
}
let {name, age, say='暂无数据'} = json;
console.log(name, age); // 'mm' 18 '暂无数据'
8.4 获取模块数据
导出模块时用export，导入模块时用import。
模块导出：（文件名为：module.js）
let [a,b,c] = [1,'second',true];
export {
a,b,c
}
模块导入：
import {a,b,c} from './module.js';
console.log(a,b,c); // 1,'second',true
总结
- 等号左右结构和形式要对应；
- 数组解构赋值时，左边变量的顺序和右边变量值的顺序是一一对应的；对象结构赋值时，左右两侧的顺序不重要，只要找到就行；
- 如果左边没有匹配到右边的值，那么当做undefined处理，把undefined赋值给左边；
- 剩余运算符要放在参数末尾的位置上，如果是数组，那么会以数组的形式赋值给左边的变量，如果是对象，则以对象形式赋值。
- 默认值生效的前提是，右边对应数组位置或者对象属性名的数据严格等于undefined。（===）
- 用途：ajax后台大量的json数据传递到浏览器客户端，用解构赋值可以方便地获取数据。
- 用途：功能模块导入。