ES6中的解构之对象解构赋值

解构赋值

解构赋值是javascript表达式，这使得可以将好数据从数组或对象提取到不同的变量中。（可以看出解构主要用在数组和对象上）。 简单点来讲就是解析等号两边的对应的赋值给左边，如果解构不成功，变量的赋值就等于undefined。

对象的解构与数组有一个重要的不同。数组的元素是按顺序排的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

基本使用语法

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

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

//对象的键名和键值一直时可以只写一个变量就行了 let {bar,foo} = { foo:'aaa', bar:'bbb' }; // 等价于 let {bar:'bar',foo:'foo'}={bar:'bbb',foo:'aaa'} // foo aaa // bar bbb

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

let aa,bb; ({aa,bb} = {aa:123,bb:156}) console.log(aa,bb) //123 156

注意：如果变量已经提前被声明了，在解构赋值的时候一定要用小括号()包住，不然会报错

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

let {aa:a,bb:b} = {aa:123,bb:456} console.log(a,b)//123 456 console.log(aa)// 报错 aa is not defined

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

4.有默认值的对象解构赋值

let { x = 3 } = {}; console.log(x)//3 let {x, y =3} = {x:1} console.log(x,y) //1 3 let {x:y = 3} ={}; console.log(y)//3 let {x: y =3} ={x:5} console.log(x,y)// x not defined

默认值生效的条件是，对象的属性值严格等于undefined

对象解构赋值的使用场景–处理后端的json数据，取出自己想要的值

let dataJson ={ title:'aaa', name:'jack', test:[{ title:'abc', 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); // jack