【阮一峰·ECMAScript6入门】2.变量的解构赋值

  1. 数组的解构赋值
  2. 对象的解构赋值
  3. 字符串的解构赋值
  4. 数值和布尔值的解构赋值
  5. 函数参数的解构赋值
  6. 圆括号问题
  7. 用途

1. 数组的解构赋值

a. 基本用法

解构(Destructuring):按照一定模式,从数组和对象中提取值,对变量进行赋值。

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

解构成功

“模式匹配”:只要等号两边的模式相同,左边的变量就会被赋予对应的值。

[...变量名]:将该变量转为数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let [a, b, c] = [1, 2, 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, ...z] = ['a'];
x // "a"
y // undefined
z // []

解构不成功

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

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

不完全解构(依然可以成功)

不完全解构:等号左边的模式,只匹配等号右边的一部分数组

1
2
3
4
5
6
7
8
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

等号的右边不是数组:报错

严格地说,不是可遍历的结构,参见《Iterator》一章

1
2
3
4
5
6
7
// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

前五个:等号右边的值转为对象以后不具备 Iterator 接口
最后一个:等号右边的对象本身就不具备 Iterator 接口

ES6新增结构

Set数据结构

Set 结构可以使用数组的解构赋值

1
2
let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

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

1
2
3
4
5
6
7
8
9
10
11
12
// fibs是一个 Generator 函数(参见《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

您的支持将鼓励我继续创作!
------本文结束感谢阅读------