ES6的解构赋值

所谓的解构赋值，就是 按照一定的模式，从 数组或者对象等可遍历的对象中提取出值，然后对变量进行赋值。 For example

数组的解构赋值

let [x,y,z] = [1,2,3];
console.log(x); //1
console.log(y); //2
console.log(z); //3

上面的代码就是一个典型的解构赋值的应用，从数组中提取值，并把值赋给对应位置的变量。这种写法就是模式匹配，不单只可以这样简单的匹配，多维数组也可以被识别解构。

let [x,[[y],z]] = [1,[[2],3]];
console.log(x); //1
console.log(y); //2
console.log(z); //3

上面写的都是等号左边的每个位置都有对应的变量，其实也不一定要这样写，例如下面

let [, , x] = [1,2,3];
console.log(x); //3

还可以使用...修饰符来将数组中未被，后面也不会被分配的值赋给变量（以数组的形式），若没有未被分配的值则赋为空数组。

let [x,...y] = [1,2,3,4,5,6];
console.log(x); //1
console.log(y); //[2,3,4,5,6]

let [a,...b] = [1];
console.log(a); //1
console.log(b); //[]

还有一种情况称为不完全解构，就是说等号的左边变量的个数与右边数组的长度不一致。在这种情况下，解构依然是可以正确完成的。

let [x,y] = [1,2,3];
console.log(x); //1
console.log(y); //2

let [a,[b],c] = [1,[2,3],4];
console.log(a); //1
console.log(b); //2
console.log(c); //4

解构赋值还可以指定默认值，不过默认值仅当数组对应位置的值使用严格相等运算符判断为undefined之后才会生效。

let [x='a'] = ['b'];
console.log(x); //'b'

let [y='b'] = [undefined];
console.log(y); //'b'

这个默认值还可以是一个函数。

function foo(){
    console.log('hello world');
    return 'c';
}

let [z=foo()] = [undefined];    //'hello world'
console.log(z); //'c'

对象的解构赋值

与数组类似，对象的解构赋值就是把对象中的属性赋给具有与属性名相同变量名的变量。例如：

let {x, y} = {x: 1, y: 2};
console.log(x); //1
console.log(y); //2

let {z} = {a: 3};
console.log(z); //undefined

上面代码中具有与对象属性名一致变量名的变量x,y被成功赋值，而z与a显然不同，所以z是undefined。

那如果我的变量名就是想与属性名不同怎么办呢？可以像下面这样写

let {a: z} = {a: 3};
console.log(z); //3

实际上这说明了，解构的时候是先找同名的属性，然后再赋给对应的变量，也就是说真正被赋值的是属性对应的变量，而不是属性本身。之前上面的解构过程可以写成下面的样子

let {x: x, y: y} = {x: 1, y: 2};
console.log(x); //1
console.log(y); //2

与数组解构赋值类似，对象的解构赋值也是可以指定默认值的。

let {x = 3} = {}
console.log(x); //3

同样的，对象解构赋值也可使用函数。

function foo(){
    return 'a';
}
let {x = foo()} = {};
console.log(x); //a

字符串的解构赋值

是的，字符串也是可以结构赋值的，因为这个时候，字符串被转换成了类似数组的结构。

let [x,y,z] = 'abc';
console.log(x); //a
console.log(y); //b
console.log(z); //c

字符串本身也可看作是一个对象，可以对它进行解构。

let {length} = 'abc';
console.log(length);    //3

函数参数的解构赋值

函数参数的解构赋值与前面数组或对象的解构赋值相似。例如：

function multiply([x, y]){
    return x * y;
}
console.log(multiply([2, 4]));  //8

上面代码中，我给multiply函数传入的参数是[2, 4]，但是进入函数内就被解构成x=2, y=4。

同样的，对象解构赋值也可以使用。