解构是 ES6 提供的一种新的提取数据的模式，这种模式能够从对象或数组里有针对性地拿到想要的数值。 即 ES6 允许按照一定模式，从数组或对象中提取值，对变量进行赋值，这就是解构。
以前，为变量赋值，只能直接指定值。
let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。
let [a, b, c] = [1, 2, 3];
上面代码表示，可以从右边数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
1、对数组的解构
（1）基本用法
在解构数组时，以元素的位置为匹配条件来提取想要的数据的：
const [a, b, c] = [1, 2, 3] // a=1; b=2; c=3
右侧数组里的 0、1、2 索引位的元素值，被精准地映射到了左侧的第 0、1、2 个变量里去，这就是数组解构的工作模式。
（2）其他情况
// 1、嵌套数组
let [a, [[b], c]] = [1, [[2], 3]]; // a=1; b=2; c=3
// 2、给左侧变量数组设置 空占位
let [ , , a] = ["1", "2", "3"]; // a="3"
let [a, , c] = [1, 2, 3]; // x=1; y=3
// 3、给左侧变量数组设置 拓展操作符...
let [a, ...c] = [1, 2, 3, 4]; // a=1; c=[2, 3, 4]
// 4、解构不成功，变量的值就等于`undefined`
let [a, b, ...c] = ['1']; // x="1"; y=undefined; z=[]
// 5、解构赋值允许指定默认值，默认值也可以引用解构赋值的其他变量，但该变量必须已经声明
let [x = 1, y = x] = []; // x=1; y=1
let [x = y, y = 1] = []; // 会报错，是因为`x`用`y`做默认值时，`y`还没有声明。
2、对对象的解构
（1）基本用法
在解构对象时，是以属性的名称为匹配条件，来提取想要的数据的。
let { a, b } = { a: '111', b: '222' }; // a="111"; b="222"
let { b, a } = { a: '111', b: '222' }; // a="111"; b="222"
（2）其他情况
// 1、变量必须与属性同名，才能取到正确的值，如果解构失败，变量的值等于`undefined`
let { a, c } = { a: '111', b: '222' }; // a="111"; c=undefined
// 2、对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量
const { log } = console; //将`console`对象的log方法赋值到`log`变量。
log('hello') // hello
// 3、对象的解构也可以指定默认值
var {x, y = 5} = {x: 1}; // x=1; y=5
var {x: y = 3} = {}; // y=3 (此时的x只是作为一个属性名称，并不是一个变量)
// 4、嵌套结构的对象
let obj = {
a: {
c: [
'Hello',
{ y: 'World' }
]
},
b: '111'
};
let { a, b, a:{c}, a:{c:[x, {y}]} } = obj;
a // {c: Array(2)}
b // "111"
c // ["Hello", {…}]
x // "Hello"
y // "World"
除了可以解构数组和对象，还可以解构字符串、数值和布尔值、函数参数。
3、用途
变量的解构赋值用途很多。
（1）交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
（2）从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
（3）函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
（4）提取 JSON 数据
解构赋值对提取 JSON 对象中的数据，尤其有用。
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
上面代码可以快速提取 JSON 数据的值。
（5）函数参数的默认值
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
};
指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
（6）遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// first is hello
// second is world
如果只想获取键名，或者只想获取键值，可以写成下面这样。
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
（7）输入模块的指定方法
加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
const { SourceMapConsumer, SourceNode } = require("source-map");
