es6之(解构赋值)使用方法

es6新特性 从arr&obj中提取值。按照对应位置。对变量进行赋值 称为解构赋值 (解开结构重新赋值)
比es5代码简洁-清晰

数组解构(数组解构一一匹配 es5)

    var a = 1,
        b = 2,
        c = 3,
        d = 4,     
       //等同于let [a,b,c,d] = [1,2,3,4]   

复杂匹配 等号左边和等号右边的形式要统一 如果不统一解构将失败。

  let [a,b,d] = [1,[2,3],{id:1}];    
        const arr = [3,4,5,6]
        let [a,b,c,d] = arr    
        console.log(a);     //3 4 5 6 以此类推  如果解构不成功 变量的值为undefined    

解构时赋值别名 即解构赋值时准许默认值 默认值 备胎 有值的时候会

    let [x=1,y] = [10,20]             //有就生效  没有默认值就生效 
    // x=？ y=？                
    let [x=1,y] = [];                 //x=1,y=undefined 
    let [x,y='y'] = ['x',0]           //x='x'  y=0
    let [x,y='y'] = ['x',null]        //x='x'  y=null
    let [x,y='y'] = ['x',undefined];  //x y   //成员undefined(相当于什么都没有了) 默认值会生效
                                              //!null相当于有值，但值为null 所以y没有取默认值 而是null
    function f(){  // 拓展
        return 123
    }
    let [x,y=f()] = ['x',undefined]     //x='x',y=123
    let [x,y=f()] = ['x',0]             //x='x',y=0

对象解构

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

// (对象解构 取键值 顺序无关)
    var obj = {
    id:1,
    name:'abc',
    sex:'男'
    };
    var id = obj.id;
    var name = obj.name;
    var sex = obj.sex;     //如果后台数据多(假如obj有100+key和values)
    let (name,id) = obj    //所赋值的变量 必须与obj里的属性同名 才可以解构成

圆括号的使用？

 //如果在解构之前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错  
    let foo;
    {foo} ={foo:'收购腾讯 和 阿里'};
    console.log(foo);      //报错
    //解决报错解构时 加圆括号 就行了 
    let foo;
    ({foo} = {foo:"收购阿里 和 腾讯"})
    console.log(foo)       //输出：收购阿里 和 腾讯   

es3&es5 将对象的属性提取出来

const obj = {name:'老曾',age: 12}
        var personName = obj.name
        var parsonAge = onj.age 
        console.log(personName+personAge)  //老曾 12
        //es6
        const {name:personName,age:personAge} =obj             //老曾 12  
        //将对象中起别名 :name
//复杂的obj { ， ，{}}
        let obj = { name:'老曾',age:12,family:{father:'老李',mather:'老袁'}}
        let {name,age,family:{father,mather}} = obj
        console.log(name)    //老曾
        console.log(age)     //12
        console.log(fatehr)  //老李
        console.log(mather)  //老袁

字符串的解构

 //字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。
        const [a,b,c,d,e,f]="Changdd";
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
        console.log(e);
        console.log(f);

         //实现了一种混合式赋值 称之为解构赋值 
         //即等号右侧的是一个数组 && 对象(一个结构化的值)
         //      左侧一个或多个变量的语法和右侧的数组对象直接量的语法保持一致  
         //demo案例
         let [x,y] = [1,2]    //== let x=1,y=2;
         [x,y] = [y,x]        //交换两个变量的值

解构赋值右侧的数组所包含的元素不必和左侧的变量一一对应 左侧多余的变量的赋值为undfined 而右侧多出的值会被忽略掉 左侧的变量列表 可以包含连续的逗号用以右侧对应的值 (,占位)

 //demo案例 
        let [a,b] = [1]       //x=1, y=undefined
        [a,b] = [1,2,3]       //a=1 b=2 
        [,a,b] = [1,2,3]      //a=2 b=3 

多层解构

 let obj = {
            data: {
                data: {
                    cites: [1, 2, 3]
                }
            }
        }
        //用data接受的话，就是
        let {data:{data}} = obj
        //然后data就是
        {
            cites :[
                1,2,3
            ]
        }

        //或者是赋值别名写发 
        let {data:{data : res }} = obj
        //然后res就是
        {
            cites :[
                1,2,3
            ]
        }