遍历

Mr.Hope ... 2019-09-19 JavaScript 大约 2 分钟

本章对 JavaScript 的可遍历数据结构及如何遍历做一些介绍。

# iterable

遍历 Array 可以采用下标循环,遍历 Map 和 Set 就无法使用下标。为了统一集合类型,ES6 标准引入了新的 iterable 类型,Array、Map 和 Set 都属于 iterable 类型。

具有 iterable 类型的集合可以通过新的 for ... of 循环来遍历。

for ... of 循环是 ES6 引入的新的语法,用 for ... of 循环遍历集合,用法如下:

const a = ["A", "B", "C"];
const s = new Set(["A", "B", "C"]);
const m = new Map([
  [1, "x"],
  [2, "y"],
  [3, "z"],
]);

for (let x of a) {
  // 遍历Array
  console.log(x);
}
for (let x of s) {
  // 遍历Set
  console.log(x);
}
for (let x of m) {
  // 遍历Map
  console.log(x[0] + "=" + x[1]);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

您可能会有疑问,for ... of 循环和 for ... in 循环有何区别?

for ... in 循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个 Array 数组实际上也是一个对象,它的每个元素的索引被视为一个属性。

当我们手动给 Array 对象添加了额外的属性后,for ... in 循环将带来意想不到的意外效果:

const a = ["A", "B", "C"];

a.name = "Hello";
for (let x in a) {
  console.log(x); // '0', '1', '2', 'name'
}
1
2
3
4
5
6

提示

for ... in 循环将把 name 包括在内,但 Array 的 length 属性却不包括在内。

for ... of 循环则完全修复了这些问题,它只循环集合本身的元素:

const a = ["A", "B", "C"];

a.name = "Hello";
for (let x of a) {
  console.log(x); // 'A', 'B', 'C'
}
1
2
3
4
5
6

这就是为什么要引入新的 for ... of 循环。

然而,更好的方式是直接使用 iterable 内置的 forEach 方法,它接收一个函数,每次迭代就自动回调该函数。以 Array 为例:

"use strict";
const a = ["A", "B", "C"];

a.forEach(function (element, index, array) {
  // element: 指向当前元素的值
  // index: 指向当前索引
  // array: 指向Array对象本身
  console.log(element + ", index = " + index);
});
1
2
3
4
5
6
7
8
9

注意

forEach() 方法是 ES5.1 标准引入的,您需要测试浏览器是否支持 (IE says No)。

Set 与 Array 类似,但 Set 没有索引,因此回调函数的前两个参数都是元素本身:

const s = new Set(["A", "B", "C"]);

s.forEach(function (element, sameElement, set) {
  console.log(element);
});
1
2
3
4
5

Map 的回调函数参数依次为 valuekeymap 本身:

const m = new Map([
  [1, "x"],
  [2, "y"],
  [3, "z"],
]);

m.forEach(function (value, key, map) {
  console.log(value);
});
1
2
3
4
5
6
7
8
9

如果对某些参数不感兴趣,由于 JavaScript 的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得 Array 的 element:

const a = ["A", "B", "C"];

a.forEach(function (element) {
  console.log(element);
});
1
2
3
4
5