ES6 中的内建迭代器

《深入理解ES6》阅读随笔

对象集合迭代器

• entries：遍历返回键与值；
• keys：遍历返回键（如果是数组返回索引）；
• values：遍历返回值；
  数组与 Set 集合默认返回的迭代器为 values 类型，Map 集合默认返回的迭代器为 entries，下面是几个通过 for-of 输出迭代器的列子：

const arrList = ["a", "b", "c"];
const setList = new Set(["s1", "s2", "s3"]);
const mapList = new Map([
  ["key1", "value1"],
  ["key2", "value2"],
  ["key3", "value3"],
]);
console.log("---- arr ----");
// default
for (let v of arrList) {
  console.log(v);
}
// keys
for (let v of arrList.keys()) {
  console.log(v);
}
// values
for (let v of arrList.values()) {
  console.log(v);
}
// entries
for (let v of arrList.entries()) {
  console.log(v);
}
console.log("---- set ----");
// default
for (let v of setList) {
  console.log(v);
}
// keys
for (let v of setList.keys()) {
  console.log(v);
}
// values
for (let v of setList.values()) {
  console.log(v);
}
// entries
for (let v of setList.entries()) {
  console.log(v);
}
console.log("---- map ----");
// default
for (let v of mapList) {
  console.log(v);
}
// keys
for (let v of mapList.keys()) {
  console.log(v);
}
// values
for (let v of mapList.values()) {
  console.log(v);
}
// entries
for (let v of mapList.entries()) {
  console.log(v);
}

上面代码整体的输出结果如下所示：

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }
---- arr ----
a
b
c
0
1
2
a
b
c
[ 0, 'a' ]
[ 1, 'b' ]
[ 2, 'c' ]
---- set ----
s1
s2
s3
s1
s2
s3
s1
s2
s3
[ 's1', 's1' ]
[ 's2', 's2' ]
[ 's3', 's3' ]
---- map ----
[ 'key1', 'value1' ]
[ 'key2', 'value2' ]
[ 'key3', 'value3' ]
key1
key2
key3
value1
value2
value3
[ 'key1', 'value1' ]
[ 'key2', 'value2' ]
[ 'key3', 'value3' ]

另外，Map 类型的迭代器还可以通过解构的方式获取键值：

// 接着使用上面例子中声明的 Map 集合，来解构获取键值
for (let [k,v] of mapList.entries()) {
  console.log(k,v);
}
// 最终输出
key1 value1
key2 value2
key3 value3

字符串迭代器

在 JavaScript 中，字符串是可以像数组一样迭代的，比如字符串 “Hi”可以通过 “Hi”[0] 的方式取出 “H” 字符；但是有一种情况需要注意，就是占用两个字符单元的特殊字符，不能直接通过位置索引来获取到，需要使用迭代器来获取一下，就像下面这个例子一样：

const str1 = "Hi";
for (let i = 0; i < str1.length; i++) {
  console.log(str1[i]);
}
const str2 = "Hi,🎮";
// 按索引取值会出现乱码，因为 moji 字符占用两个长度
for (let i = 0; i < str2.length; i++) {
  console.log(str2[i]);
}
// 此时可以通过迭代器输出的方式，即可正常获取字符元素
for (let v of str2) {
  console.log(v);
}
结果：
H
i
H
i
,
�
�
H
i
,
🎮

NodeList 迭代器

NodeList 是 Web 中用于存放节点的一个集合，它并不属于任何已声明的集合类型，比如数组、Set、Map，但是却也内置了迭代器，因此可以通过 for-of 的方式，像取数组一样，对其进行遍历操作。