ES6 解构赋值-数组模型的解构（Array) 

<html>

<head>
    <title> ES6 解构赋值-数组模型的解构（Array）</title>
</head>

<body>




    <script>
        //1,基本
        {
            let [a, b, c] = ["这是a", "这是b", "这是c"];
            console.log("a=" + a);
            console.log("b=" + b);
            console.log("c=" + c);
        }
        console.log("----------------------分割线-------------------------------")
        //2,可嵌套
        {
            let [a, [b], c] = ["这是a", ["这是b"], ["这是c"]];
            console.log("a=" + a);
            console.log("b=" + b);
            console.log("c=" + c);
        }
        console.log("----------------------分割线-------------------------------")
        //3,可忽略
        {
            let [a, , c] = ["这是a", , "这是c"];
            console.log("a=" + a);
            console.log("c=" + c);
        }
        console.log("----------------------分割线-------------------------------")
        //4,不完全解构
        {
            let [a = 6, b] = [];
            console.log("a=" + a);//有输出
            console.log("b=" + b);//显示b=undefined
        }
        console.log("----------------------分割线-------------------------------")
        //5,剩余的运算符
        {
            let [a, ...b] = [1, 2, 3];
            console.log("a=" + a);//输出a=1
            console.log("b=" + b);//输出=2,3
        }
        console.log("----------------------分割线-------------------------------")
        //6,字符串等:在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。可遍历对象即实现 Iterator 接口的数据。
        {
            let [a, b, c, d, e, f, g, h, i, j] = "HELLOWORLD";
            console.log("a=" + a);//有输出
            console.log("b=" + b);//有输出
            console.log("c=" + c);//有输出
            console.log("d=" + d);//有输出
            console.log("e=" + e);//有输出
            console.log("f=" + f);//有输出
            console.log("g=" + g);//有输出
            console.log("h=" + h);//有输出
            console.log("i=" + i);//有输出
            console.log("j=" + j);//有输出
          /*控制台输出结果
            a = H
            b = E
            c = L
            d = L
            e = O
            f = W
            g = O
            h = R
            j = D
          */        
        }
        console.log("----------------------分割线-------------------------------")
        //7.解构默认值
        {
            //当解构模式有匹配结果(a=2)，且匹配结果是 undefined 时，会触发默认值作为返回结果。
            let[a=2]=[undefined];
            console.log(a);//输出2
        }
        //a 与 b 匹配结果为 undefined ，触发默认值：a = 3; b = a =3
        {
            console.log("----------------------分割线:解构默认值-------------------------------")
            let[a=3,b=a]=[];
            console.log(a);//输出3
            console.log(b);//输出3
        }
        //a 正常解构赋值，匹配结果：a = 1，b 匹配结果 undefined ，触发默认值：b = a =1
        {
            console.log("----------------------分割线:解构默认值-------------------------------")
            let[a=3,b=a]=[1];
            console.log(a);//输出1
            console.log(b);//输出1
        }
        //a 与 b 正常解构赋值，匹配结果：a = 1，b = 2
        {
            console.log("----------------------分割线:解构默认值-------------------------------")
            let[a=3,b=a]=[1,2];
            console.log(a);//输出1
            console.log(b);//输出2
        }

    </script>
</body>

</html>

教程来源于：https://www.runoob.com/w3cnote/es6-tutorial.html

posted @ 2020-09-26 13:05  KwFruit  阅读(216)  评论(0)    收藏  举报