ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。
<b>数组的解构赋值</b>
以前我们为变量赋值,只能直接指定值。比如以下的代码:
let a=1;
let b=2;
let c=3;
现在我们可以用数组解构的方式来进行赋值。
let [a,b,c] = [1,2,3];
上面的代码,是安装位置的对象关系对应变量赋值。注意在赋值的时候,等号左边和右边的形式要统一,不统一解构将失败。
let [a,b,[c,d,e],f] = [0,1,[2,3,4],5];
如果等号两边形式不一样,很可能获得Undefined或者直接报错。
解构赋值是允许使用默认值的。
let [ t =true] = [ ];
console.log(t); //true
let [ a,b,c=" zqq"] = ['i','am' ];
console.log(a+b+c); // i am zqq
另外需注意,undefined相当于什么都没有,null相当于有值,但值为null。
<b>对象的解构赋值</b>
解构不仅可以用于数组还可以用于对象。
let {cat,dog} = {cat:'Mike','dog':'John'};
console.log(cat+dog); //MikeJohn
<b>注意:</b>对象的解构与数组有一个重要的不同,数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
另外,如果在解构之前就定义了变量,这时候你再解构会出现问题,编译会出错。
let cat;
{cat} = {cat : 'Mike'};
console.log(cat);
要解决报错,使程序正常,只要在解构的语句外包加一个圆括号就可以了。
let cat;
({cat} = {cat : 'Mike'});
console.log(cat);
<b>字符串解构</b>
字符串解构相当于字符串被转换成了一个类似数组的对象。
const [a,b,c,d] = "Mike";
console.log(a); //M
console.log(b); //i
console.log(c); //k
console.log(d); //e