ES6变量的解构赋值

ES6中应该认清的知识点：变量的解构赋值和扩展操作符，及实际应用或技巧，

ES6中提供了一种非常方便的赋值方法：解构赋值。此外，还有组成解构的...及其作为展开操作符时，在实际中有着很多的巧妙用法。

解构模型由解构的源和目标两部分构成，解构赋值表达式的右边部分为解构的源，即将要被解构的数据。左边部分为解构的目标，即将被赋值的变量。解构写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予右边的对应值。

解构赋值示例：

const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;

const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
const { [key]: a } = obj;

let a, b, a1, b1, c, d, rest, pop, push;
[a, b] = array;
[a, , b] = array;
[a = aDefault, b] = array;
[a, b, ...rest] = array;
[a, , b, ...rest] = array;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;

({ a, b } = obj); // brackets are required
({ a: a1, b: b1 } = obj);
({ a: a1 = aDefault, b = bDefault } = obj);
({ a, b, ...rest } = obj);
({ a: a1, b: b1, ...rest } = obj);

只要对应的模式能够匹配，就可以赋值成功。数组的元素按次序排列，变量的取值由它的位置决定；对象通过属性取值，变量需要与属性同名，才能取到正确的值。

如果解构不成功，变量的值就等于undefined。

数组解构赋值：

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构:

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
// first = 1, last = 3

  剩余模式(类似于JAVA的可变参数)解构:

// age取剩余的值合成数组
let [head, ...age] = [1, 2, 3, 4];
// head = 1, age = [2, 3, 4]

如果等号的右边不是数组，或者严格地说，不是可遍历的结构，那么将会报错:

// 报错
let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

对象的解构赋值：

变量赋值：

const obj = {
    uname: 'rick',
    age: 30,
    sayHi: function () {
        console.log('hello');
    },
    sayBye() {
        console.log('Bye~');
    }
}
let {name, age, sayHi} = obj;
let {sayBye} = obj;

模式赋值：

let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'
// baz   error: baz is not defined
// 下面的变量声明可以给baz赋值
let { baz, baz: foo } = {baz: 'ddd' };
// baz = 'ddd', foo = 'ddd'
 
// 嵌套结构的对象
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
 
let { p: [x, { y }] } = obj;
// x="Hello", y="World", p是模式，不是变量，因此不会被赋值。
// 如果p也要作为变量赋值，可以写成下面这样。
let { p, p: [x, { y }] } = obj;
// x="Hello", y="World", p=["Hello", {y: "World"}]