[ES6] Iterator遍历器

概念

遍历器（Iterator）是一种接口，为各种不同的数据结构提供同一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

作用：

• 为各种数据结构，提供一个统一的、简便的访问接口；

• 使得数据结构的成员能够按某种次序排列；

• ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。

遍历的过程：结合 Generator 生成器理解

1. 创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

2. 第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

3. 第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。

4. 不断调用指针对象的next方法，直到它指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。

与for...of的关系

实现 Iterator 接口的目的，就是为所有的数据结构提供一种统一的访问机制，即for...of循环。当使用for...of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口。

一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。

默认的 Iterator 接口部署在数据结构的Symbol.iterator属性。它就是当前数据结构默认的遍历器生成函数，执行它就会返回一个遍历器。

原生具备 Iterator 接口的数据结构有：

• Array

• Map

• Set

• String

• TypedArray

• 函数的 arguments 对象

• NodeList 对象

使用场景

1. for...of

2. 对数组和 Set 结构进行解构赋值时

3. ...扩展运算符（可用来将该数据结构转为数组）

4. yield*

5. 其他对数组进行遍历的场景，如

   • for…of
   • Array.from()
   • Map(), Set(), WeakMap(), WeakSet()（比如new Map([['a',1],['b',2]])）
   • Promise.all()
   • Promise.race()

字符串的 Iterator 接口

字符串也是可以遍历的：

var someString = "hi";
typeof someString[Symbol.iterator]
// "function"

var iterator = someString[Symbol.iterator]();

iterator.next()  // { value: "h", done: false }
iterator.next()  // { value: "i", done: false }
iterator.next()  // { value: undefined, done: true }

方法

遍历器对象有三个方法，如果要手动实现遍历器对象生成函数，必须要实现next()方法，可选实现return()和throw()方法。

return()

return()方法的使用场合是，如果for...of循环提前退出（通常是因为出错，或者有break语句），就会调用return()方法。如果一个对象在完成遍历前，需要清理或释放资源，就可以部署return()方法。

// 情况一
for (let line of readLinesSync(fileName)) {
  console.log(line);
  break;
}

// 情况二
for (let line of readLinesSync(fileName)) {
  console.log(line);
  throw new Error();
}

上面代码中，情况一输出文件的第一行以后，就会执行return()方法，关闭这个文件；情况二会在执行return()方法关闭文件之后，再抛出错误。

注意，return()方法必须返回一个对象，这是 Generator 语法决定的。

throw()

throw()方法主要是配合 Generator 函数使用，一般的遍历器对象用不到这个方法。

数组的遍历

JavaScript 原有的for...in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for...of循环，允许遍历获得键值。

var arr = ['a', 'b', 'c', 'd'];

for (let a in arr) {
  console.log(a); // 0 1 2 3
}

for (let a of arr) {
  console.log(a); // a b c d
}

上面代码表明，for...in循环读取键名，for...of循环读取键值。如果要通过for...of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法。

for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in循环也不一样。

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

对比其他遍历方式

• 数组的 forEach循环

  无法中途跳出forEach循环，break命令或return命令都不能奏效。

• for...in循环

  • 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
  • for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
  • 某些情况下，for...in循环会以任意顺序遍历键名。

• for...of循环

  • 有着同for...in一样的简洁语法，但是没有for...in那些缺点。
  • 不同于forEach方法，它可以与break、continue和return配合使用。
  • 提供了遍历所有数据结构的统一操作接口。