es6-03—解构赋值

1、数组的解构赋值：

<script>
        // 1、这样会依次把10赋值给x,20赋值给y,z不够则是未定义的，超过的话不影响
        let [x, y, z] = [10, 20];
        console.log(x);
        console.log(y);
        console.log(z);

        //2、数组解构默认值,这样的话如果有值，则x2=10根本不会被执行，
        // 只有当后面解构出来对应的值无对应值得时候才会走默认值
        let [x1, x2 = 10] = [1,]
        console.log(x1, x2);

        //3、这样的话10,20将解构出来的值无对应信息，只有m=30
        let [, , m] = [10, 20, 30];
        console.log(m);

        //4、不定参数赋值
        //这样会把1赋值给y1，2赋值给y2，后面的全部解析成一个数组赋值给y3
        let [y1, y2, ...y3] = [1,2,3,4,5,6,7,8,9]
        console.log(y1, y2, y3);
</script>

2、对象的解构赋值：

<script>
        //1、如果变量名和属性名一样，可以直接省略写法,不一样的时候不可省略
        // let {name=name,age=age} = {name:'test',age:18}
        // let {name,age} = {name:'test',age:18}//上面这样可以省略成这样情况
        // let {name,age} = {name123:'test',age:18}//这样会导致name没有定义

        //2、不同名时候
        //赋值属性在冒号左，变量名在右，并且解构赋值时，只是更新了默认值，不能覆盖对象原有的属性值。
        //这样相当于name赋值给name1这样变量，age赋值给age1这个变量
        // let {name:name1,age:age1} = {name:'test',age:18}//这样会导致name没有定义
        // console.log(name1);//text
        // console.log(age1);//18


        //3、赋默认值的时候
        // let {name:name, age=20} = {name:'测试',age:10}
        // console.log(name, age);//测试 10

        // let {name:name, age=20} = {name:'测试'}
        // console.log(name, age);//测试 20

        // let {name:name, age=20, sex} = {name:'测试',age:undefined}
        // console.log(name, age, sex);//测试 20 undefined

        // let {name:name2='这是测试', age:age2=20, sex:sex2='男'} = {age:18}
        // console.log(name2, age2, sex2);//这是测试 10 男

        //4、嵌套赋值
        // let {name,age,list:[x,y,...z]} = {name:'wzx',age:20,list:[10,20,30,40,50]}
        // console.log(name, age, x,y,z);

        // let {age:age2,list:[...z]} = {name:'wzx',age:20,list:[10,20,30,40,50]}
        // console.log(age2, z);

        let user = {
            name: 'jenny',
            id: 18,
            desc: {
                pos: {
                    lng: 111,
                    lat: 333
                }
            }
        }

        let {desc: {pos}} = user
        console.log(pos) // { lng: 111, lat: 333 }

        let {desc: {pos: {lng}}} = user
        console.log(lng) // 111

        let {desc: {pos: {lng: longitude}}} = user
        console.log(longitude) // 111

        let {sex:sex1,...test} = {name:'wzx',age:20,sex:'男'}
        console.log(test,sex1);//{name:'wzx',age:20} 男
 </script>

3、函数的解构赋值：

<script>
        //函数的解构赋值
        function f([a,b,...c]) {
            console.log(a, b, c);
            console.log(c[2]);
            //输出1 2  [3, 4, 5, 6]
        }

        f([1,2,3,4,5,6])
        
        function f1({name,age:age1=18,...other}) {
            console.log(name, age1, other);
            //输出wzx 18 {sex: "男", school: "贵州师范大学"}
        }
        f1({name:'wzx',sex:'男',school:'贵州师范大学'});
 </script>