ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。下面我们看实际的例子:
一、数组解构:
1 let [a,b,c] = [1,2,3]; 2 console.log(a); //a 3 console.log(b); //b 4 console.log(c); //c
//从上面的例子看出,左边的数组一一对应右边进行拆解并赋值,左边3个,右边就是3个,如果不对等就会报错,大家可以尝试下
• 解构的默认值:
1 let [a,b,c="CCC"] = [1,2]; 2 console.log(a); //a 3 console.log(b); //b 4 console.log(c); //CCC
//右边我们并没有给c赋值,但左边已经声明了一个默认值,它也会按照默认值输出,但默认赋值有一个特殊的情况,就是undefined和null
let [a,b="B"] = [1,undefind];
console.log(a); //a
console.log(b); //B undefined并没有赋给b,undefined相当于什么都没有
我们来看null的情况
let [a,b="B"] = [1,null];
console.log(a); //a
console.log(b); //null 这时的null赋给了b,null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null。
二、对象的解构赋值:
1 let {a,b,c} = {a:"A",c:"C",b:"BB"}; 2 console.log(a); //A 3 console.log(b); //BB 4 console.log(c); //C
//注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
•圆括号 ( ) 的使用:
1 let a; 2 {a} = {a:"ES6"}; 3 console.log(a); //如果在解构之前就定义了变量,这时候去解构会出现问题,编译报错,我们在解构的外层加一个圆括号就正常了
let a;
({a} = {a:"ES6"});
console.log(a); //ES6 在外层加了 ( ) 后就可以正常编译输出了
三、字符串解构:
1 let [a,b,c,d,e] = "hello"; 2 console.log(a); //h 3 console.log(b); //e 4 console.log(c); //l 5 console.log(d); //l 6 console.log(e); //o
//此时字符串被转换成了一个类似数组的对象。
总结:
1数组解构 • 有一个默认值情况
2对象的解构 • 有一个圆括号情况
3字符串解构