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