背景：解构（destructuring）有何用？
let heros = {
no1: "吕布",
no2: "张飞",
weapons: [ "刀","剑","弓箭"]
};
// 从对象中提取数据
let lb = heros.no1, zs = heros.no2, weapons = heros.weapons;
想象一下,若heros中有100万个变量需要提取处理呢？若 是多层嵌套的数据结构呢？可能会为了一点数据而挖掘整个结构，做大量低效重复的工作。
解构赋值
解构赋值--使得把数据结构分解为更小的部分时，提取数据会变得更容易，更高效。
解构赋值语法是一种 Javascript 表达式。解构使用的语法--就是对象与数组的字面量语法。--按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
基本原则如下：
数组的元素是按次序排列的，变量的取值由它的位置决定；
对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
数组的解构赋值
1 变量声明并赋值时的解构 或者先声明变量再赋值
let foo = ["one", "two", "three"];
let [m, n, three] = foo;
console.log(m); // "one"
console.log(n); // "two"
console.log(three); // "three"
//-或者
let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo); // 1
console.log(bar); // 2
console.log(baz); // 3
//先声明再赋值
let a, b;
[a, b] = [1, 2];
注意1：在使用 var 、 let 、 const 进行数组解构时，必须提供初始化 器（即等号 右边的值）
const [a ,b];
let [d,e];
// Uncaught SyntaxError: Missing initializer in destructuring declaration
注意2：如果解构不成功，变量的值就等于undefined。
let [foo] = [];
let [bar, foo] = [1];
//以上两种情况都属于解构不成功，foo的值都会等于undefined。
注意3：不完全解构-等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。
let [x, y] = [1, 2, 3];// x//1 y //2
let [a, [b], d] = [1, [2, 3], 4];// a //1 b // 2 d // 4
注意4：解构报错--如果等号的右边不是数组（或者严格地说，不是可遍历的结构，不具备 Iterator 接口），那么将会报错。
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
2 忽略某些值，只对感兴趣值解构
let [ , , third] = ["foo", "bar", "baz"]; //逗号-, 为数组前面的项提供的占位符
console.log(third); // "baz"
3 默认值
ES6 解构内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
const [a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7 --默认值生效
let [x = 1] = [undefined];
x // 1 --默认值生效
let [x = 1] = [null];
x // null
注意1：如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。
function f() {
console.log('aaa');
}
let [x = f()] = [1]; //因为x能取到值，所以函数f根本不会执行。
//上面的代码其实等价于下面的代码。
let x;
if ([1][0] === undefined) {
x = f();
} else {
x = [1][0];
}
注意2：默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
//--因为x用y做默认值时，y还没有声明
4 剩余项 (...) -- 将剩余数组赋值给一个变量（数组）
当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3] --注意，这是个数组
注意：如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素，之后不能再有逗号，否则就是语法错误。
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma
应用1：:若要取出特定项 并要求保留剩余的值，则剩余项是非常有用的。
应用2：方便地克隆数组在JS中是个明显被遗漏的功能。
在ES5中常用的concat()方法来克隆数组 （方便简单）；在ES6中，使用剩余项的语法克隆数组（小技巧）
// 在 ES5 中克隆数组
let colors = [ "red", "green", "blue" ];
let clonedColors = colors.concat();
colors[2] = "skyblue";
console.log(clonedColors); //"[red,green,blue]"
concat()方法本意是合并两个数组，但不使用任何参数来调用此方法，会获得原 数组的一个克隆品。
// 在ES6中，使用剩余项的语法克隆数组 ，达到上述同样效果
let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
colors[2] = "skyblue";
console.log(clonedColors); //"[red,green,blue]"
5 嵌套的数组 解构
在整个解构模式中插入另一 个数组模式，解构操作会下行到 嵌套的数组中。可以使用任意深 度的数组嵌套解构。
let colors = [ "red",[ "green", "lightgreen" ], "blue" ];
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
应用篇
交换变量 - 在一个解构表达式中可以轻松交换两个变量的值。
//在 ES5 中互换值需要使用第三个变量作为临时变量：
let a = 1, b = 2, tmp;
tmp =a ; a = b; b = tmp;
console.log(a); // 2
console.log(b); // 1
// 在 ES6 中互换值
let a = 1, b = 2;
[ a, b ] = [ b, a ];
console.log(a); // 2
console.log(b); //1
解析一个从函数返回的数组
从一个函数返回一个数组是十分常见的情况。解构使得处理返回值为数组时更加方便。
function f() {
return [1, 2];
}
let a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
总结
本质上，解构赋值这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
数组的元素是按次序排列的，变量的取值由它的位置决定；
