《ECMAScript 6 入门 - 阮一峰》阅读笔记：2, 变量的解构赋值

发表于 | 分类于

一，数组的解构赋值

1，基本用法

从数组中提取值，按照对应位置，对变量赋值。这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

解构成功的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 完全解构
let [a, b, c] = [1, 2, 3];
a // 1
b // 2
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

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

// 不完全解构：即等号左边的模式，只匹配一部分的等号右边的数组
let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

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

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

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

1
2
3
4
5
6
7
8
9
// 错误的解构
// 转为对象后不具备 Iterator 接口
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
// 本身不具备 Iterator 接口
let [foo] = {};

所以，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

// fibs是一个 Generator 函数，原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。
function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

2，默认值

解构赋值允许指定默认值，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
所以，只有数组成员严格等于（===）undefined，默认值是才会生效的。

1
2
3
4
5
6
7
8
9
10
11
let [foo = true] = [];
foo // true

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

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

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

默认值的表达式是惰性求值的，即只有在用到的时候，才会求值。

1
2
3
4
5
6
7
8
9
10
11
12
13
function f() {
  console.log('aaa');
}
// 因为x能取到值，所以函数f根本不会执行。
let [x = f()] = [1];
x // 1
// 上面的代码其实等价于下面的代码。
let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

1
2
3
4
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: x用到默认值y时，y还没有声明。

二，对象的解构赋值

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

1
2
3
4
5
6
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

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

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