es6的变量解构赋值

解构的含义

按照一定的模式，从数组和对象中取值，对变量进行赋值，称为解构。解构赋值时，只要等号两边不是对象，就先将其转换成对象。
可以说这种方式就是等号两边的解构相同，左边的变量就会被赋予右边的对应值。

代码演示：

数组：

 let [a,b,c] = [10,20,30];
console.log(a,b,c);   ==>   输出结果：10，20，30


对象：
let {a,b,c,d} = {a:'你',b:'真',c:'好',d:'看'};
console.log(a,b,c,d);   ==>   输出结果：'你'  '真'  '好'  '看'

解构的限制

1）undefined与null 无法转换成对象，解构赋值会报错。 ==> Cannot destructure property a of ‘undefined’ or ‘null’.

2）
let [a] = 10;
console.log(a);
这种赋值方式会报错 ==> 10 is not iterable。原因：等号的右边不是数组，转换对象以后不具备 Iterator接口，或本身就不具备Iterator接口

3）左边参数允许默认值
let [a,b,c=30] = [10,20];
console.log(a,b,c); ==> 输出结果：10 20 30

4）对象解构赋值属性没有次序，赋值的时候会给对应的属性名进行赋值。
let {a,b,c,d} = {a:10,c:303,d:20,b:10};
console.log(a,b,c,d) ==> 输出结果：10 10 303 20

5）变量名与属性值不一致，是给属性值进行赋值
let {a:b}={a:'12', c:'32'};
console.log(a); ==> 输出结果： a is not defined
console.log(b); ==> 输出结果：12
这种情况是为a的属性值b进行赋值

6）将一个已有变量进行解构赋值
let a
({a} = {b:1});
console.log({a} = {b:1}); ==> 输出结果：{b: 1}
({a}={b:1})：必须要加括号，避免JS在解析过程中将{ } 解析成代码块。

7）字符串解构赋值，会将字符串拆分开，把每一项赋值给对应变量
let [a,b,c] = 'hello world';
console.log(a,b,c); ==> 输出结果：‘h’ ‘e’ ‘l’