迭代器与生成器【未完成】

JavaScript |

迭代的英文 “iteration” 源自拉丁文 iero，意思是“重复”或“再来”。在软件开发领域,“迭代”的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件。ECMAScript 规范新增了两个高级特性:迭代器和生成器。使用这两个特性，能够更清晰、高效、方便地实现迭代。

迭代器模式

迭代器模式(特别是在 ECMAScript 这个语境下)描述了一个方案，即可以把有些结构称为“可迭代对象”(iterable)，因为它们实现了正式的 Iterable 接口，而且可以通过迭代器 Iterator 消费。

可迭代对象是一种抽象的说法。基本上，可以把可迭代对象理解成数组或集合这样的集合类型的对象。它们包含的元素都是有限的，而且都具有无歧义的遍历顺序:

// 数组的元素是有限的
// 递增索引可以按序访问每个元素
let arr = [3, 1, 4];

// 集合的元素是有限的
// 可以按插入顺序访问每个元素
let set = new Set().add(3).add(1).add(4);

不过，可迭代对象不一定是集合对象，也可以是仅仅具有类似数组行为的其他数据结构，比如本章开头提到的计数循环。该循环中生成的值是暂时性的，但循环本身是在执行迭代。计数循环和数组都具有可迭代对象的行为。

任何实现 Iterable 接口的数据结构都可以被实现 Iterator 接口的结构“消费”(consume)。迭代器(iterator)是按需创建的一次性对象。每个迭代器都会关联一个可选代对象，而迭代器会暴露用于迭代其关联可迭代对象的 API。迭代器无须了解与其关联的可迭代对象的结构，只需要知道如何取得连续的值。这种概念上的分离正是 Iterable 和 Iterator 的强大之处。

可迭代协议

实现 Iterable 接口(可迭代协议)要求同时具备两种能力: 支持迭代的自我识别能力和创建实现 Iterator 接口的对象的能力。在 ECMAScript 中，这意味着必须暴露一个属性作为“默认迭代器”，而且这个属性必须使用特殊的 symbol.iterator 作为键。这个默认迭代器属性必须引用一个迭代器工厂函数，调用这个工厂函数必须返回一个新迭代器。

很多内置类型实现了 Iterable 接口:

  1. 字符串
  2. 数组
  3. 映射
  4. 集合
  5. arguments 对象
  6. NodeList 等 DOM 集合类型

检查是否存在默认迭代器属性可以暴露这个工厂函数:

let num = 1;
let obj = {};

// 这两种类型没有实现选代器工厂函数
console.log(num[Symbol.iterator]); // undefined
console.log(obj[Symbol.iterator]); // undefined

let str = "abc";
let arr = ["a", "b", "c"];
let map = new Map().set("a", 1).set("b", 2).set("c", 3);
let set = new Set().add("a").add("b").add("c");
let els = document.querySelectorAll("div");

// 这些类型都实现了选代器工厂函数
console.log(str[Symbol.iterator]);
console.log(arr[Symbol.iterator]);
console.log(map[Symbol.iterator]);
console.log(set[Symbol.iterator]);
console.log(els[Symbol.iterator]);

// 调用这个工厂函数会生成一个迭代器
console.log(str[Symbol.iterator]());
console.log(arr[Symbol.iterator]());
console.log(map[Symbol.iterator]());
console.log(set[Symbol.iterator]());
console.log(els[Symbol.iterator]());

实际写代码的过程中，不需要显式调用这个工厂函数来生成迭代器。实现可迭代协议的所有类型都会自动兼容接收可迭代对象的任何语言特性。接收可选代对象的原生语言特性包括:

  1. for-of 循环
  2. 数据解构
  3. 扩展操作符
  4. Array.from()
  5. 创建集合
  6. 创建映射
  7. Promise.all() 接收由期约组成的可迭代对象
  8. Promise.race() 接收由期约组成的可迭代对象
  9. yield * 操作符，在生成器中使用

这些原生语言结构会在后台调用提供的可选代对象的这个工厂函数，从而创建一个迭代器:

let arr = ["foo", "bar", "baz"];

// for-of 循环
for (let el of arr) {
  console.log(el);
}
// foo
// bar
// baz

// 数组解构
let [a, b, c] = arr;
console.log(a, b, c); // foo, bar, baz

// 扩展操作符
let arr2 = [...arr];
console.log(arr2); // ["foo", "bar", "baz"]

// Array.from()
let arr3 = Array.from(arr);
console.log(arr3); // ["foo", "bar", "baz"]

// Set 构造函数
let set = new Set(arr);
console.log(set); // Set(3) { 'foo', 'bar', 'baz' }

// Map 构造函数
let pairs = arr.map((x, i) => [x, i]);
console.log(pairs); // [['foo', 0], ['bar', 1], ['baz', 2]]
let map = new Map(pairs);
console.log(map); // Map(3) { 'foo' => 2, 'bar' => 2, 'baz' => 2 }

如果对象原型链上的父类实现了 Iterable 接口，那么这个对象也就实现了这个接口:

class FooArray extends Array {}
let fooArr = new FooArray("foo", "bar", "baz");

for (let el of fooArr) {
  console.log(el);
}
// foo
// bar
// baz

迭代器协议

迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。迭代器 API 使用 next() 方法在可迭代对象中谝历数据。每次成功调用 next() 都会返回一个 IteratorResult 对象，其中包含迭代器返回的下一个值。若不调用 next()，则无法知道迭代器的当前位置。

next() 方法返回的迭代器结果对象 IteratorResult 包含两个属性: done 和 value。done 是一个布尔值，表示是否还可以再次调用 next() 取得下一个值；value 包含可迭代对象的下一个值（done 为 false 时），或者 undefined（done 为 true 时）。done:true 状态称为“耗尽”。可以通过以下简单的数组来演示:

// 可迭代对象
let arr = ["foo", "bar"];

// 迭代器工厂函数
console.log(arr[Symbol.iterator]);

// 迭代器
let iter = arr[Symbol.iterator]();
console.log(iter); // ArrayIterator()

// 执行迭代
console.log(iter.next()); // { done: false, value: 'foo' }
console.log(iter.next()); // { done: false, value: 'bar' }
console.log(iter.next()); // { done: true, value: undefined }

这里通过创建迭代器并调用 next() 方法按顺序迭代了数组，直至不再产生新值。迭代器并不知道怎么从可迭代对象中取得下一个值，也不知道可迭代对象有多大。只要迭代器到达 done: true 状态后续调用 next() 就一直返回同样的值了:

let arr = ["foo"];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { done: false, value: 'foo' }
console.log(iter.next()); // { done: true, value: undefined }
console.log(iter.next()); // { done: true, value: undefined }

每个迭代器都表示对可迭代对象的一次性有序遍历。不同迭代器的实例相互之间没有联系，只会独立地遍历可迭代对象:

let arr = ["foo", "bar"];
let iter1 = arr[Symbol.iterator]();
let iter2 = arr[Symbol.iterator]();

console.log(iter1.next()); // { done: false, value: 'foo' }
console.log(iter2.next()); // { done: false, value: 'foo' }
console.log(iter2.next()); // { done: false, value: 'bar' }
console.log(iter1.next()); // { done: false, value: 'bar' }

迭代器并不与可迭代对象某个时刻的快照绑定，而仅仅是使用游标来记录遍历可迭代对象的历程。如果可迭代对象在迭代期间被修改了，那么迭代器也会反映相应的变化:

let arr = ["foo", "baz"];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { done: false, value: 'foo' }

// 在数组中间插入值
arr.splice(1, 0, "bar");

console.log(iter.next()); // { done: false, value: 'bar' }
console.log(iter.next()); // { done: false, value: 'baz' }
console.log(iter.next()); // { done: true, value: undefined }

注意: 选代器维护着一个指向可选代对象的引用，因此选代器会阻止垃圾回收程序回收可迭代对象。

// 这个类实现了可迭代接口（Iterable）
// 调用默认的迭代器工厂函数会返回
// 一个实现迭代器接口（Iterable）的迭代器对象

class Foo {
  [Symbol.iterator]() {
    return {
      next() {
        return { done: false, value: "foo" };
      },
    };
  }
}

let f = new Foo();

console.log(f[Symbol.iterator]()); // { next: f() {} }

// Array 类型实现了可迭代结构（Iterable）
// 调用 Array 类型的默认迭代器工厂函数
// 会创建一个 ArrayIterator 的实例
let a = new Array();
console.log(a[Symbol.iterator]()); // Array Iterator {}

自定义迭代器

与 Iterable 接口类似，任何实现 Iterator 接口的对象都可以作为迭代器使用。下面这个例子中的 counter 类只能被迭代一定的次数:

class Counter {
  constructor(limit) {
    this.count = 1;
    this.limit = limit;
  }
  next() {
    if (this.count <= this.limit) {
      return { done: false, value: this.count++ };
    } else {
      return { done: true, value: undefined };
    }
  }
  [Symbol.iterator]() {
    return this;
  }
}

let counter = new Counter(3);

for (let i of counter) {
  console.log(i);
}
// 1
// 2
// 3

这个类实现了 Iterator 接口，但不理想，这是因为它的每个实例只能被迭代一次：

for (let i of counter) {
  console.log(i);
}
// 1
// 2
// 3