3.变量的解构赋值

1.数组的解构赋值

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（

===

），判断一个位置是否有值。所以，如果一个数组成员不严格等于

undefined

，默认值是不会生效的。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上面代码中，如果一个数组成员是

null

，默认值就不会生效，因为

null

不严格等于

undefined

。

2.对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于

undefined

。

如果变量名与属性名不一致，必须写成下面这样。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

这实际上说明，对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面代码中，

foo

是匹配的模式，

baz

才是变量。真正被赋值的是变量

baz

，而不是模式

foo

。

注意，采用这种写法时，变量的声明和赋值是一体的。对于

let

和

const

来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。

let foo;
let {foo} = {foo: 1}; // SyntaxError: Duplicate declaration "foo"

let baz;
let {bar: baz} = {bar: 1}; // SyntaxError: Duplicate declaration "baz"

上面代码中，解构赋值的变量都会重新声明，所以报错了。不过，因为

var

命令允许重新声明，所以这个错误只会在使用

let

和

const

命令时出现。如果没有第二个

let

命令，上面的代码就不会报错

let foo;
({foo} = {foo: 1}); // 成功

let baz;
({bar: baz} = {bar: 1}); // 成功

上面代码中，

let

命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句。

3.字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个

length

属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

4.数值和布尔值的解构赋值

5.函数参数的解构赋值

6.圆括号问题

ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

7.用途