13_JavaScript之数组解构赋值-ES6

ES6之前我们要把一个数组赋值给某一个变量时是这样做的

    <script>
        let arr = [1, 2, 3];
        a = arr[0];
        b = arr[1];
        c = arr[2];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
    </script>

控制台输出：

而ES6中，出现了结构赋值的做法

    <script>
        let arr = [1, 2, 3];
        let [a, b, c] = arr;
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
    </script>

控制台输出：

1.在数组的解构赋值中，等号左边的格式必须和等号右边的格式一模一样才能完全结构。

    <script>
        let [a, b, c] = [1, 2, [3, 4]];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
    </script>

控制台输出：

正确做法是：

    <script>
        let [a, b, [c, d]] = [1, 2, [3, 4]];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
        console.log("d的值为：" + d);
    </script>

控制台输出：

2.在数组的解构赋值中，左边的个数可以和右边的个数不一样。

    <script>
        let [a, b, c] = [1, 2];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
    </script>

控制台输出：

    <script>
        let [a, b, c] = [1, 2, 3, 4];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
    </script>

控制台输出：

3. 在数组的解构赋值中，如果右边的个数和左边的个数不一样，我们可以给左边指定默认值。

    <script>
        let [a, b = 666, c = 888] = [1];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
    </script>

控制台输出：

4.在数组的解构赋值中，如果左右两边数目不一样，那么设置的默认值会被覆盖

    <script>
        let [a, b = 666, c = 888] = [1, 2, 3];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
        console.log("c的值为：" + c);
    </script>

控制台输出：

5.在数组的解构赋值中，，还可以使用ES6中新增的扩展运算符来打包剩余数据，如果使用了扩展符，那么扩展运算符只能写在最后

ES6新增的扩展运算符号： …

    <script>
        let [a, ...b] = [1, 2, 3];
        console.log("a的值为：" + a);
        console.log("b的值为：" + b);
    </script>

控制台输出：