ES6 数组的解构赋值

数组的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值。

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

ES6 允许写成下面这样。

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

下面的同样会被解析

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

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

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

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

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

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x) // "a"
console.log(y) // "b"
console.log(z) // "c"

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

var [foo = true] = [];
console.log(foo) // true

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

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

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

var [x = 1] = [undefined];
console.log(x) // 1

var [x = 1] = [null];
console.log(x) // null

上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined