ES6 许可根据肯定的情势，从数组和对象中提取值，对变量举行赋值，这个被称为解构。
解构的用处
交流变量的值
从函数返回多个值
函数参数的定义
提取JSON数据
函数参数的默认值
遍历Map构造
输入模块的指定要领
1、数组解构赋值
(1) 完整解构，这类写法属于 “情势婚配”，只需等号双方的情势雷同，左侧的变量就会被给予对应的值。如：
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // [](2) 不完整解构，等号左侧的情势只婚配到一部分等号右侧的数组。这类情况下依旧能够解构胜利。
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
假如等号的右侧不是数组的话，就会报错。
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};事实上，只需某种数据构造具有 Iterator 接口，都能够采纳数组情势的解构赋值。
function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5上面代码中，fibs是一个 Generator 函数，原生具有 Iterator 接口。解构赋值会顺次从这个接口猎取值。
2、对象的解构赋值
对象解构赋值和数组的解构赋值不一样。数组的元素是按序次分列的，变量的取值由它的位置决议；而对象的属性没有序次，变量必需与属性同名，才取到准确的值。
//详细版
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
//简写版
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
假如变量名与属性名不一致，必需写下面如许。
var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
对象的解构赋值机制是 先找到同名属性，然后再赋值给对应的变量。前者是婚配的情势，后者才是真正的变量。真正被赋值的应该是变量。
let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
var node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
var { loc: { start: { line }} } = node;
line // 1
loc // error: loc is undefined
start // error: start is undefined
//这由于只要line是变量，loc和start都是情势，所以不会被赋值啦。
假如解构失利，变量的值即是undefined。
let {foo} = {bar: 'baz'};
foo // undefined假如解构情势是嵌套的对象，而且子对象地点的父属性不存在，那末将会报错。等号左侧对象的foo属性，对应一个子对象。该子对象的bar属性，解构时会报错。缘由很简单，由于foo这时刻即是undefined，再取子属性就会报错，请看下面的代码。如：
let {foo: {bar}} = {baz: 'baz'};
// 报错3、字符串的解构赋值
字符串也能够解构赋值。这是由于此时，字符串被转换成了一个相似数组的对象。相似数组的对象都有一个length属性，因而还能够对这个属性解构赋值。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
let {length : len} = 'hello';
len // 5
4、函数参数解构赋值
函数参数的解构也能够运用默认值
function add([x, y]){
return x + y;
}
add([1, 2]); // 3
function move({x = 0, y = 0} = {}) {
return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
5、默认值
（1）解构赋值许可指定默认值。由于ES6内部运用严厉的相称运算符（===），假如一个数组成员不严厉即是undefined,默认值不会见效的。如：
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null, 由于null不严厉即是 undefined
（2）假如默认值是一个表达式的话，那末表达式是惰性求值的，即只要在用到的时刻，才会求值。
function f() {
console.log('aaa');
}
let [x = f()] = [1];
//等价于
let x;
if ([1][0] === undefined) {
x = f();
} else {
x = [1][0];
}由于x能取到值，所以函数f基础不会实行。
6、详细用处
（1）交流变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
（2）从函数返回多个值
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
a // 1
b // 2
c // 3
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
foo // 1
bar // 2
（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 数据的值。解构赋值对提取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]（5）函数参数的默认值。 指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;如许的语句。
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
}) {
// ... do stuff
};
（6）遍历Map构造, 任何布置了Iterator接口的对象，都能够用for…of轮回遍历。Map构造原生支撑Iterator接口，合营变量的解构赋值，猎取键名和键值就异常轻易。
var 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");