es6：解构赋值

数组解构赋值

注意点

• 必须有初始化的值
• 可以在解构中忽略一些项
• 互换变量
• 解构赋值表达式的值是表达式右边的值

//数组的解构辅助
        var arr = [1, 3, 4];
        let [a, b, c] = arr;
        console.log('a='+a,'b='+b,'c='+c);
        
        // 必须有初始化值
        // let [d,e,f];//错误

        // 可以忽略一些项
        const [,g,] = arr;
        console.log('g='+g); 

        // 互换变量
        let x = 1;
        let y = 2;
        let temp = x;
        x = y;
        y = temp;
        console.log(x,y);

        //结构赋值互换变量
        [y,x] = [x,y];//不在需要用 let const 申明了
        console.log(x,y);
    </script>

解构赋值中的默认值

在结构赋值中 赋值变量左边严格等于undefined的时候（即 ===）可以采用默认值

// 默认值
        let [x,y] = [];//空数组为undefined
        console.log(x,y);//都是undefined
        // 当在解构赋值中 赋值的变量（左边的变量）严格等于undefined时候（即 ===）采用默认值
        let [a = 10, b = 20] = [];
        console.log(a,b);//10与20
        let [c = 1, d = 2] = [null];
        console.log('c='+c, 'd='+d);//c等于null

es6小技巧

 //es6小技巧
        let name = 'cc';
        let obj = {
            name : name
        }
        console.log(obj);
        // 但属性名与属性值相等的情况下可以简写
        let obj1 = {
            name,
            age : 10
        }
        console.log(obj1);

对象的结构赋值

注意点

• 必须初始化
• 在赋值的时候使用解构赋值
• 解构赋值表达式的值是表达式右侧的值

//对象结构赋值
        let {name : name, age : age} = {name : 'cc', age : 10};//声明变量name age 并进行解构赋值，一同进行
        console.log(name,age);// cc 10
        let {name : name1, age : age1} = {name : 'cc', age : 10};//声明变量name1 age1 并进行解构赋值，一同进行
        console.log(name1, age1);// cc 10
        let {name2 : name3, age2 : age3} = {name : 'cc', age : 10};
        console.log(name3,age3);//undefided undefided
        // 对象解构赋值中 等会左边对象的键值对中 冒号左边的属性名 是用来匹配等号右边对象的属性值得 要进行赋值必须右边对象的属性名保持一样，不然的化匹配不到

// 注意点
        // 在赋值的时候使用解构赋值
        let name, age;
        //{name : name, age : age} = {name : 'cc', age : 10};//编辑器报错 因为 js引擎 将 {} 识别成一个代码块了 2个代码块用等号报错
        // 解决方法
        ({name : name, age : age} = {name : 'cc', age : 10});//告诉 js引擎 这是一个表达式
        console.log(name, age);

        // 解构赋值表达式的值是表达式右边的值
        console.log({name : name, age : age} = {name : 'cc', age : 10});//解构赋值表达式的值是表达式右边的值
        let a,b,c;
        let arr = [];
        console.log([a = 2,b = 3,c = 5] = arr);//[] 空数组 解构赋值表达式的值是表达式右边的值
        console.log(a,b,c);

解构赋值表达式的值是表达式右侧的值的用处

 // 有何意义 使用实例
        function fn(value){
            console.log(value);
        }
        function fn1(value){
           /*  var name = obj.name;
            var age = obj.age; 以前的用法*/
            console.log(name,age);
        }
        let obj = {
            name : 'cc',
            age : 1
        }
        fn(obj);
        fn( {} = obj);
        fn({name,age} = obj);
        fn1({name,age} = obj);//在传入的时候可以调用变量 而不要再去取对象中的值

对象结构赋值的默认值（与数组相同）

// 默认值
        let obj = {};
        console.log(obj.a);//undefined
        let {name,age} = {};
        console.log(name,age);//undefined
        let {name1 = 'cc', age1 = 10} = {}
        console.log(name1,age1);
        let {name2 = 'tt', age2 = 23} = {name2 : 'liuluwei', age2 : 22};
        console.log(name2, age2);

数组与对象的混合使用

注意模式匹配

// 混合使用 模式匹配
        // let [a,b,[c,d]] = [1,2,3];//模式不匹配报错
        let [a,b,[c,d]] = [1,3,[]];//模式匹配
        console.log(a,b,c,d);
        let {age : [x,y,z]} = {age : [2,5,6]};
        console.log(x,y,z);