JavaScript-数组解构赋值-CFANZ编程社区

什么是数组的解构赋值

解构赋值是 ES6 中新增的一种赋值方式。

数组解构赋值的注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 3, 5];
        let a = arr[0];
        let b = arr[1];
        let c = arr[2];
        
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);

        console.log("********************");

        let [d, e, f] = arr;

        console.log("d = " + d);
        console.log("e = " + e);
        console.log("f = " + f);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组解构赋值_html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let [a, b, c] = [1, 3, 5];

        let [d, e, f] = [1, 3, [2, 4]];

        let [g, h, [i, j]] = [1, 3, [2, 4]];

        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);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组解构赋值_赋值_02

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let [a, b] = [1, 3, 5];

        console.log("a = " + a);
        console.log("b = " + b);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组解构赋值_赋值_03

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let [a, b, c] = [1];

        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组解构赋值_html_04

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let [a, b = 666, c = 888] = [1];
        
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组解构赋值_数组_05

在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let [a, b = 666] = [1, 3, 5];
        
        console.log("a = " + a);
        console.log("b = " + b);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组解构赋值_html_06

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let [a, b] = [1, 3, 5];
        let [c, ...d] = [1, 3, 5];
        let [e, ...f] = [1, 3, 5];
        
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);
        console.log("d = " + d);
        console.log("e = " + e);
        console.log("f = " + f);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组解构赋值_赋值_07