ES6--解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6--解构赋值</title>
</head>
<body>
    <script>
        /*
            ES6--解构赋值

            解构赋值是对赋值运算符的扩展。
            他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
            在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
        */
        /*
            1.数组的解构赋值
                1.1 数组解构
                1.2 数组解构默认值
                1.3 运用
            2.对象的解构赋值
                2.1 对象解构
                2.2 对象解构默认值
                2.3 嵌套对象的解构
                2.4 选择性解构对象属性
                2.5 函数参数解构
        */

        // 1.数组的解构赋值
            // 1.1 数组解构
                /*
                    数组解构赋值使用的是模式匹配，
                    只要等号两边数组模式相同，
                    右边数组的值就会相应赋给左边数组的变量
                */
                //1.1.1基础
                let [a, b, c] = [1, 2, 3];
                console.log(a);//1
                console.log(b);//2
                console.log(c);//3

                //1.1.2 可嵌套
                let [a, [[b], c]] = [1, [[2], 3]];
                console.log(a);//1
                console.log(b);//2
                console.log(c);//3

                //1.1.3 可忽略（逗号作为占位符）
                let [a, , b] = [1, 2, 3];
                console.log(a);//1
                console.log(b);//3

                // 1.1.4 不完全解构
                let [a , b] = [1]; 
                console.log(a);//1
                console.log(b);//undefined

            // 1.2 数组解构默认值
                /*
                    为防止解构部分出现undefined现象可以给左侧数组赋初值。
                    ES6在判断是否解构到值是使用的是严格等于（===），
                    所以因为null===undefined所以null也是可以复制的
                */
                let [a = 1, b] = [,null]; 
                console.log(a);//1
                console.log(b);//null
                
            // 1.3 运用
                // 1.3.1 交换变量
                    var a = 1;
                    var b = 2;
                    console.log(a);//1
                    console.log(b);//2
                    [b , a]=[a , b];
                    console.log(a);//2
                    console.log(b);//1
                // ...

        // 2.对象的解构赋值
            // 2.1 对象解构
                /*
                    对象中属性没有顺序所以需要右侧对象的属性名和左侧定义对象的变量名必须相同。
                    未匹配到也会赋值undefined。

                    原理：
                        先找左右两侧相同属性名（key），然后再赋值给对应的变量（value），
                        真正被赋值的是value而不是key。
                */
                let {a , b ,c}={a:'1',b:'2' ,c:'3'}
                console.log(a);//1
                console.log(b);//2
                console.log(c);//3

                //原理解释：
                let {aa:a ,bb: b ,cc:c}={aa:'1',bb:'2'}
                console.log(a);//undefined
                console.log(b);//undefined
                // console.log(aa);//aa is not defined
                // console.log(bb);//bb is not defined

            // 2.2 对象解构默认值
                let {a='1' , b ,c}={b:'2' ,c:'3'}
                console.log(a);//1
                console.log(b);//2
                console.log(c);//3

            // 2.3 嵌套对象的解构
                let {p: [x, { y }] } = {p: ['hello', {y: 'world'}] };
                // console.log(p);//p作为匹配属性名的key不会参与赋值，因此输出报错
                console.log(x);//hello
                console.log(y);//world

            // 2.4 选择性解构对象属性
                let obj = {p: [{y: 'world'}] };
                let {p: [{ y }, x ] } = obj;
                console.log(x);//undefined
                console.log(y);//world

            // 2.5 函数参数解构...
    </script>
</body>
</html>
posted @ 2021-09-13 09:54 飞渝阅读(22) 评论(0) 收藏举报
刷新页面返回顶部
飞渝

ES6--解构赋值

公告
