15、ES6 数组的解构赋值_es6数组解构赋值[]开头,不用let const开头-优快云博客

介绍ES6中数组解构赋值的基本用法及高级特性，包括默认值设定、模式匹配、惰性求值等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组的解构赋值

基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。

//ES5

   var a=1;
   var b=2;
   var c=3;

ES6允许写成下面这样。

var [a,b,c]=[1,2,3];
    console.log(a); //1
    console.log(b); //2
    console.log(c); //3

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
    let [foo,[[bar],baz]]=[1,[[2],3]];
    console.log(foo); //1
    console.log(bar); //2
    console.log(baz); //3
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
    let [head,...tail]=[1,2,3,4];
    console.log(head); //1
    console.log(tail); //[2, 3, 4]
    </script>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
    let [x,y,...z]=['a'];
    console.log(x); //a
    console.log(y); //undefined
    console.log(z); //[]
    </script>
</head>
<body>

</body>
</html>

如果解构不成功，变量的值就等于†‡ˆ‹‡†undefined 。

var [foo]=[];
var [bar,foo]=[1];

以上两种情况都属于解构不成功，ˆ‘‘ foo的值都会等于undefined†‡ˆ‹‡† 。

另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

    let [x,y]=[1,2,3];
    console.log(x); //1
    console.log(y); //2

   let [a,[b],c]=[1,[2,3],4];
    console.log(a); //1
    console.log(b); //2
    console.log(c); //4

上面两个例子，都属于不完全解构，但是可以成功。

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

//报错
    let [foo]=1;
    let [foo]=false;
    let [foo]=NaN;
    let [foo]=undefined;
    let [foo]=null;
    let [foo]={};

上面的表达式都会报错，因为等号右边的值，要么转为对象以后不具备Iterator接口（前五个表达式），要么本身就不具备Iterator接口（最后一个表达式）。

解构赋值不仅适用于var命令，也适用于let和const命令。

var [v1,v2,...vn]=array;
let [v1,v2,...vn]=array;
const [v1,v2,...vn]=array;

对于Set结构，也可以使用数组的解构赋值。

    let [x,y,z]=new Set(["a","b","c"]);
    console.log(x); //a
    console.log(y); //b
    console.log(z); //c
事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

function* fibs(){
        var a=0;
        var b=1;
        while (true){
            yield a;
            [a,b]=[b,a+b];
        }
     }
     var [first,second,third,fourth,fifth,sixth]=fibs();
     console.log(sixth); //5

上面代码中， fibs是一个Generator函数，原生具有Iterator接口。解构赋值会依次从这个接口获取值。

------------------------------------------------------------------------

默认值

解构赋值允许指定默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
     var [foo=true]=[];
     console.log(foo); //true

     let [x,y='b']=['a'];
     console.log(x); //a
     console.log(y); //b

     let [p,q='b']=['a',undefined];
     console.log(p); //a
     console.log(q); //b
    </script>
</head>
<body>

</body>
</html>

注意，ES6内部使用严格相等运算符（=== ），判断一个位置是否有值。所以，如果一个数组成员不严格等于 undefined，默认值是不会生效的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="js/traceur.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/traceur">
     var [x=1]=[undefined];
     console.log(x); //1

     var [y=1]=[null];
     console.log(y);   //null
    </script>
</head>
<body>

</body>
</html>