7.1 理解迭代

在 JavaScript 中，计数循环就是一种最简单的迭代

  1. for (let i = 1; i <= 10; ++i) { 
  2.   console.log(i); 
  3. }

循环是迭代机制的基础，这是因为它可以指定迭代的次数，以及每次迭代要执行什么操作。
每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的。

7.2 迭代器模式

迭代器模式、描述了一个方案，即可以把有些结构称为“可迭代对象”（iterable），因为它们实现了正式的 Iterable 接口，而且可以通过迭代器 Iterator 消费。

任何实现 Iterable 接口的数据结构都可以被实现 Iterator 接口的结构“消费”（consume）。
迭代器（iterator）是按需创建的一次性对象。每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代其关联可迭代对象的 API。

7.2.1 可迭代协议

实现 Iterable 接口（可迭代协议）要求同时具备两种能力：支持迭代的自我识别能力和创建实现Iterator 接口的对象的能力。

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

  • 字符串
  • 数组
  • 映射
  • 集合
  • arguments对象
  • NodeList 等DOM集合类型
  1. let num = 1; 
  2. let obj = {}; 
  4. // 这两种类型没有实现迭代器工厂函数
  5. console.log(num[Symbol.iterator]); // undefined 
  6. console.log(obj[Symbol.iterator]); // undefined 
  8. let str = 'abc'; 
  9. let arr = ['a', 'b', 'c']; 
  10. let map = new Map().set('a', 1).set('b', 2).set('c', 3); 
  11. let set = new Set().add('a').add('b').add('c'); 
  12. let els = document.querySelectorAll('div');
  14. // 这些类型都实现了迭代器工厂函数
  15. console.log(str[Symbol.iterator]); // f values() { [native code] } 
  16. console.log(arr[Symbol.iterator]); // f values() { [native code] } 
  17. console.log(map[Symbol.iterator]); // f values() { [native code] } 
  18. console.log(set[Symbol.iterator]); // f values() { [native code] } 
  19. console.log(els[Symbol.iterator]); // f values() { [native code] } 
  21. // 调用这个工厂函数会生成一个迭代器
  22. console.log(str[Symbol.iterator]()); // StringIterator {} 
  23. console.log(arr[Symbol.iterator]()); // ArrayIterator {} 
  24. console.log(map[Symbol.iterator]()); // MapIterator {} 
  25. console.log(set[Symbol.iterator]()); // SetIterator {} 
  26. console.log(els[Symbol.iterator]()); // ArrayIterator {}

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

  • for-of 循环
  • 数组解构
  • 扩展操作符
  • Array.From ()
  • 创建集合
  • 创建映射
  • Promise.all()接收由期约组成的可迭代对象
  • Promise.race()接收由期约组成的可迭代对象
  • yield*操作符，在生成器中使用

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

  1. let arr = ['foo', 'bar', 'baz']; 
  3. // for-of 循环
  4. for (let el of arr) { 
  5.   console.log(el); 
  6. }
  8. // foo 
  9. // bar 
  10. // baz 
  12. // 数组解构
  13. let [a, b, c] = arr; 
  14. console.log(a, b, c); // foo, bar, baz 
  16. // 扩展操作符
  17. let arr2 = [...arr]; 
  18. console.log(arr2); // ['foo', 'bar', 'baz'] 
  20. // Array.from() 
  21. let arr3 = Array.from(arr); 
  22. console.log(arr3); // ['foo', 'bar', 'baz'] 
  24. // Set 构造函数
  25. let set = new Set(arr); 
  26. console.log(set); // Set(3) {'foo', 'bar', 'baz'} 
  28. // Map 构造函数
  29. let pairs = arr.map((x, i) => [x, i]); 
  30. console.log(pairs); // [['foo', 0], ['bar', 1], ['baz', 2]] 
  31. let map = new Map(pairs); 
  32. console.log(map); // Map(3) { 'foo'=>0, 'bar'=>1, 'baz'=>2 }

7.2.2 迭代器协议

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

next()方法返回的迭代器对象 IteratorResult 包含两个属性：done 和 value。
done 是一个布尔值，表示是否还可以再次调用 next()取得下一个值
value 包含可迭代对象的下一个值（done 为false），或者 undefined（done 为 true）。

迭代器并不知道怎么从可迭代对象中取得下一个值，也不知道可迭代对象有多大。
只要迭代器到达 done: true 状态，后续调用 next()就一直返回同样的值了

  1. // 可迭代对象
  2. let arr = ['foo', 'bar']; 
  4. // 迭代器工厂函数
  5. console.log(arr[Symbol.iterator]); // f values() { [native code] } 
  7. // 迭代器
  8. let iter = arr[Symbol.iterator](); 
  9. console.log(iter); // ArrayIterator {} 
  11. // 执行迭代
  12. console.log(iter.next()); // { done: false, value: 'foo' } 
  13. console.log(iter.next()); // { done: false, value: 'bar' } 
  14. console.log(iter.next()); // { done: true, value: undefined }
  16. console.log(iter.next()); // { done: true, value: undefined } 
  17. console.log(iter.next()); // { done: true, value: undefined }

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

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

7.2.3 自定义迭代器

7.2.4 提前终止迭代器

7.3 生成器

7.3.1 生成器基础

生成器的形式是一个函数，函数名称前面加一个星号（*）表示它是一个生成器。
只要是可以定义函数的地方，就可以定义生成器。

  1. // 生成器函数声明
  2. function* generatorFn() {} 
  4. // 生成器函数表达式
  5. let generatorFn = function* () {} 
  7. // 作为对象字面量方法的生成器函数
  8. let foo = { 
  9.  * generatorFn() {} 
  10. } 
  12. // 作为类实例方法的生成器函数
  13. class Foo { 
  14.  * generatorFn() {} 
  15. } 
  17. // 作为类静态方法的生成器函数
  18. class Bar { 
  19.  static * generatorFn() {} 
  20. }

调用生成器函数会产生一个生成器对象。生成器对象一开始处于暂停执行（suspended）的状态。
与迭代器相似，生成器对象也实现了 Iterator 接口，因此具有 next()方法。
调用这个方法会让生成器开始或恢复执行。

  1. function* generatorFn() {} 
  3. const g = generatorFn(); 
  5. console.log(g); // generatorFn {<suspended>} 
  6. console.log(g.next); // f next() { [native code] }

next()方法的返回值类似于迭代器，有一个 done 属性和一个 value 属性。
函数体为空的生成器函数中间不会停留，调用一次 next()就会让生成器到达 done: true 状态。

  1. function* generatorFn() {} 
  3. let generatorObject = generatorFn(); 
  5. console.log(generatorObject); // generatorFn {<suspended>} 
  6. console.log(generatorObject.next()); // { done: true, value: undefined }

生成器函数只会在初次调用 next()方法后开始执行

  1. function* generatorFn() { 
  2.   console.log('foobar'); 
  3. } 
  5. // 初次调用生成器函数并不会打印日志
  6. let generatorObject = generatorFn(); 
  8. generatorObject.next(); // foobar

7.3.2 通过yield中断执行

yield 关键字可以让生成器停止和开始执行，也是生成器最有用的地方。
生成器函数在遇到 yield关键字之前会正常执行。遇到这个关键字后，执行会停止，函数作用域的状态会被保留。
停止执行的生成器函数只能通过在生成器对象上调用 next()方法来恢复执行

  1. function* generatorFn() { 
  2.   yield; 
  3. } 
  5. let generatorObject = generatorFn(); 
  7. console.log(generatorObject.next()); // { done: false, value: undefined } 
  8. console.log(generatorObject.next()); // { done: true, value: undefined }

yield 关键字有点像函数的中间返回语句，它生成的值会出现在 next()方法返回的对象里。
通过 yield 关键字退出的生成器函数会处在 done: false 状态；
通过 return 关键字退出的生成器函数会处于 done: true 状态。

  1. function* generatorFn() { 
  2.   yield 'foo'; 
  3.   yield 'bar'; 
  4.   return 'baz'; 
  5. } 
  7. let generatorObject = generatorFn(); 
  9. console.log(generatorObject.next()); // { done: false, value: 'foo' } 
  10. console.log(generatorObject.next()); // { done: false, value: 'bar' } 
  11. console.log(generatorObject.next()); // { done: true, value: 'baz' }

7.3.3 生成器作为默认迭代器

7.3.4 提前终止生成器