es6 对象解构赋值

基本使用语法

注意：对象解构赋值的键名对应很重要，不然会找不到。因为对象是无序的，必须通过键名来识别。

未先声明变量再进行对象解构赋值

//对象的键名和键值一致时，可以只写一个变量名即可
let {aa,bb} = {aa:123,bb:456};
//等价于 let {aa:aa,bb:bb} = {aa:123,bb:456};
console.log(aa,bb); // 123  456

 

先声明变量再进行对象解构赋值

let aa,bb;
//对象的键名和键值一致时，可以只写一个变量名即可
({aa,bb} = {aa:123,bb:456});
console.log(aa,bb); // 123  456

注意：如果变量已经事先被声明了，那么在进行对象解构赋值的时候一定要用小括号包住，不然会报错。

 

对象的键名和键值不一致时

//对象的键名和键值一致时，可以只写一个变量名即可
let {aa:a,bb:b} = {aa:123,bb:456};
console.log(a,b); // 123  456
console.log(aa); // 报错aa is not defined

上面的代码中，对象的解构赋值是内部机制，是先找到同名属性，然后再赋给对应的变量。
aa是匹配的模式， a才是变量。真正被赋值的是后者，而不是前者。

 

有默认值的对象解构赋值

let {a = 3,b = 4} = {a:5}
console.log(a,b); // 5  4

对象解构赋值的使用场景

处理后端返回的json数据，取出自己想要的字段值

let dataJson = {
title:"abc",
name:"winne",
test:[{
   title:"ggg",
   desc:"对象解构赋值"
}]
}
//我们只需要取出需要的两个title值（注意结构和键名）
let {title:oneTitle,test:[{title:twoTitle}]} = dataJson;
//如果只需要其中一个数据，直接根据结构键名来写就好了
let { name } = dataJson;  //相当于es5的 let name = dataJson.name;
console.log(oneTitle,twoTitle); // abc  ggg
console.log(name); // winne

注意：json结构和键名要一一对应才能进行正确解构赋值。