ES6变量的解构赋值对象的解构赋值

Posted 2020-11-23 kongbaifeiye

前面我们知道，数组的结构赋值需要按顺序进行赋值，

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

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

 

而对象的解构赋值则是通过对象属性进行赋值，不需要按照顺序进行，而无法匹配的则为undefined

let {a,b,c}={b:1,a:2};
console.log(a);//2
console.log(b);//1
console.log(c);//undefined

实际上，对象的解构赋值的完整写法为：

let {a:a,b:b,c:c}={b:1,a:2};

console.log(a);//2
console.log(b);//1
console.log(c);//undefined

例如上边的例子中，等式左边属性名称与变量名相同，因此可以直接写成let {a,b,c}={b:1,a:2};

 

同理如果属性名与变量名不同，则不能简写

 

let {a:b} = {a:1};
console.log(b);//1
//注意：b为变量名，a为属性名，不能够直接输出a

 

 

对象的解构赋值也可以设置变量默认值，默认值的生效条件为：对象属性的值严格（"==="）等于undefined

var {x = 3} = {}；//x==>3

var {x = 3} = {x: undefined};//x==>3

var {x = 3} = {x: null};//x==>null

var {x = 3} = {x:0};//x==>0

var {x: y = 3} = {};//y==>3

 

数组本身也是特殊的对象，可以进行对象的解构赋值

var arr=[1,2,3];
 let {0:first,[arr.length-1]:last}=arr;
console.log(first);//1
console.log(last);//3

 

对象解构赋值的应用：

1.可以很方便获取到现有对象的属性或方法

//console对象中log属性拥有打印功能，
//console对象赋值给创建的对象中的log，因此可以直接log()实现打印功能
const { log } = console;
log(‘hello‘) // hello   等同于console.log();