简单理解变量的结构赋值

变量的结构赋值

数组的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，被称为结构(destructuring)

        // es5为变量赋值的写法是:
        let a = 1;
        let b = 2;
        let c = 3;    
        // 在es6中可以直接这样写  
        let [a,b,c] = [1,2,3]
        console.log(a,b,c); // 1 2 3   
        // 结构数组  [变量，变量]
        // 变量赋值是，数组做阴对应的数据
        let  [x,y, ...z] =["a"];
        x//"a"
        y//undefined结构不成功的话变量的值就等于undefined
        z//[] ... 展开运算符
        // 默认值：解构赋值允许指定默认值。

        let [foo=true] = []; // foo为true
        let [x,y="b"] = ["a"];// x = "a",y = "b"
        let [x=10] = [undefined];// x = 10
        let [x=10] = [null];// x = null

        // ES6内部使用严格相等运算符(===)判断一个位置是否有值，所以如果一个数组元素不等于undefined，那么默认值是不会生效的
        ' '==false; // true  
        []==false // true    
        0==false // true 
        ' ' ===false // false 
        []===false // false 
        0===false // false     

对象的解构赋值

解构同样适用于对象

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

        // 注意：需要哪个；就取值哪个就可以了，不用全部都获取。
        // let a = obj.a;
        // let b = obj.b;
        // let t = obj.a;
        let { a,b } = obj;

        // 声明变量t 赋值 obj.a
        let {a:t} = obj.;

字符串的结构赋值

字符串被转换成为一个类似数组的对象 类似数组的对象都有一个length属性

let[a,b,c,d] = 'echo'; // e 是 d
let{length:len} = 'echo'; // len 是 4

函数的解构赋值

// 我们可以理解成函数在声明的时候,如果有一个形参option,则在调用的时候声明了一个局部变量option,所以即使没有传参,也只是没有值,即undefined.
// 而传实参,则相当于又多了个option ={url,method,success} 这个赋值的过程,所以函数后续的代码虽然使用变量option,但实际在操作url,method,success的值.
 function foo(option){
            let {url,method,success} = option;
            console.log(url,method,success);
        }
        foo({
            url:"aa",
            method:"dd",
            success:function(){}
        })

        // bar 2个形参 
        // 参二 对象；并进行结构赋值。
        function bar(test,{a,b,c}){
            console.log(a,b,c);
        }
        bar(test,{
            a:'1',
            b:"2",
            c:'3'
        })

对象扩展

 let obj = {
            a:1
        }
        let obj1 = {
            b:1
        }

        // Objext.assign() 
        // 作用:合并对象
        // 将参数二 .... 合并到参数一对象中  返回合并后的对象
        // 参数一对象 与返回值对象 是 同一个对象
       var obj3 = Object.assign({},obj,obj1);
       console.log(obj3); // Object { a: 1, b: 1 }

    // 验证：返回值与参数一是同一个对象
       var  obj4 = Object.assign(obj,obj1);
       console.log(obj4); // Object { a: 1, b: 1 ,tst: "dfafsd" }
       console.log(obj); // Object { a: 1, b: 1 ,tst: "dfafsd" }
       obj.tst = 'dfafsd' // 浏览器一个机制 对象属性可以被提前写进去