es6数组和对象的解构赋值

数组的解构赋值

以前给变量赋值是这么做：

let a = 1;
let b = 2;
let c = 3;

有了解构赋值以后，我们可以这么做：

let [a,b,c] = [1,2,3];

一行代码就可以搞定，而且也比较直观。

上面代码表示从数组中提取值，按照变量在数组中的对应位置赋值。

解构赋值属于模式匹配，当等号两边的模式匹配时，左边变量被赋予对应的值。

若解构失败，也就是匹配不到对应的值，则左边变量的值等于undefined。如：

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

还有一种情况，左边的模式只匹配右边的一部分值时，也就是右边的值length大于左边的了，这时候解构依然可以成功。

解构可以指定默认值，如：

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

上例中若a未设置默认值，则a等于undefined。

 

对象的解构赋值

解构同样可以用用于对象，和数组的解构不同，对象的解构时，变量必须与属性同名。

let {a,b,c} = {a:'qwe', b:'asd'};
console.log(a);//'qwe'
console.log(b);//'asd'
console.log(c);//undefined

其实上面的例子是一个简单写法，等价于

let {a:a,b:b,c:c} = {a:'qwe',b:'asd'}

对象的解构赋值的内部机制，是先找到同名属性，再赋给对应的变量，真正被赋值的是后者，而不是前者。

let {a:asd} = {a:'666'};
console.log(asd) // '666'
console.log(a) // a is not defined

上面例子中，a是匹配模式，baz才是变量，一定要注意被赋值的是变量，而不是模式。