7迭代器与生成器

迭代器与生成器

---

理解迭代

• 例程是某个系统对外提供的功能接口或服务的集合

• 迭代的意思是按照顺序反复多次执行一段程序，通常会有明确的终止条件

• 迭代会在一个有序集合上进行

• 循环执行例程不理想原因：

  1. 迭代之前需要事先知道如何使用数据结构
  2. 遍历顺序并不是数据结构固有的

• ES5 新增了 Array.prototype.forEach()方法

  let collection = ['foo', 'bar', 'baz']
  collection.forEach((item) => console.log(item))
  // foo
  // bar
  // baz
  

  这个方法没有办法标识迭代何时终止

---

迭代器模式

实现了正式的Iterable接口的结构称为可迭代对象iterable，且其可以通过迭代器Iterator消费

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

// 数组的元素是有限的
// 递增索引可以按序访问每个元素
let arr = [3, 1, 4]; 
// 集合的元素是有限的
// 可以按插入顺序访问每个元素
let set = new Set().add(3).add(1).add(4);

可迭代对象不一定是集合对象，也可以是仅仅具有类似数组行为的其他数据结构，临时性可迭代对象可以实现为生成器

迭代器是按需创建的一次性对象，每个迭代器都会关联一个可迭代对象，而迭代器会暴露迭代其关联可迭代对象的API。迭代器无需了解与其关联的可迭代对象的结构，只需要知道如何获取连续的值

可迭代协议

实现Iterable接口要求具备支持迭代的自我识别能力和创建实现Iterator接口的对象的能力。必须暴露一个属性作为默认迭代器，该属性使用Symbol.iterator作为键。必须引用一个迭代器工厂函数，调用该函数返回一个新迭代器

实现Iterable接口：

• 字符串
• 数组
• 映射Map
• 集合Set
• arguments对象
• NodeList等DOM集合类型

// 检查是否存在默认迭代器属性可以暴露这个工厂函数：
let num = 1
let obj = {}

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

let str = 'bc'
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.querySelector('div')

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

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

不需要显示调用该工厂函数来生成迭代器，实现可迭代协议的所有类型都会自动兼容接收可迭代对象的任何语言特性：

• for-of循环
• 数组解构
• 扩展操作符
• Array.from()
• 创建集合
• 创建映射
• Promise.all()接收由期约组成的可迭代对象
• Promise.race()接收由期约组成的可迭代对象
• 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)   // (3) ['foo', 'bar', 'baz']
let arr22 = [...arr]
console.log(arr22)  // (3) ['foo', 'bar', 'baz']

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

let set = new Set(arr)
console.log(set)    // Set(3) {size: 3, foo, bar, baz}

let pairs = arr.map((el,idx) => [el, idx])
console.log(pairs)  // (3) [Array(2), Array(2), Array(2)]---> [['foo', 0], ['bar', 1], ['baz', 2]]
let map = new Map(pairs)
console.log(map)    // Map(3) {size: 3, foo => 0, bar => 1, baz => 2}

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

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

迭代器协议

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

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

// 可迭代对象
let arr = ['foo','bar']
// 迭代器工厂函数
console.log(arr[Symbol.iterator])
// 迭代器
let iter = arr[Symbol.iterator]()
console.log(iter)
// 执行迭代
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())

arr.push('baz')
// 这个时候的游标已经超过推入的baz的地址，因此往后再对其索引也获取不到内容
console.log(iter.next())

let iter2 = arr[Symbol.iterator]()
console.log(iter2.next())
// 在数组中间插入值
arr.splice(1,0,'baz')
console.log(iter2.next())
console.log(iter2.next())
console.log(iter2.next())
console.log(iter2.next())
/**
 * ƒ values()
 * Array Iterator
 * {value: 'foo', done: false}
 * {value: 'bar', done: false}
 * {value: undefined, done: true}
 * {value: undefined, done: true}
 * {value: 'foo', done: false}
 * {value: 'baz', done: false}
 * {value: 'bar', done: false}
 * {value: 'baz', done: false}
 * {value: undefined, done: true}
 */

只要迭代器到达done:true状态，后续调用next()就一直返回同样的值，每个迭代器都表示对可迭代对象的一次性遍历，不同迭代器实例之间互相独立。

迭代器不与某个时刻可迭代对象的快照绑定，仅仅使用游标来记录遍历历程。若可迭代对象在迭代期间被修改，则迭代器也会反应相应的变化

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

// 这个类实现了可迭代接口（Iterable） 
// 调用默认的迭代器工厂函数会返回
// 一个实现迭代器接口（Iterator）的迭代器对象
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(); 
// 打印出 ArrayIterator 的实例
console.log(a[Symbol.iterator]()); // Array Iterator {}

自定义迭代器

任何实现Iterator接口的对象都可以作为迭代器使用，为了让一个可迭代对象能够创建多个迭代器，必须每创建一个迭代器就对应一个包含next()的新实例，因此可以将该变量存入闭包中，通过闭包返回迭代器

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
// 以上的类的每个实例只能被迭代一次
for(let i of counter){
  console.log(i)
}
// (nothing logged)

// 通过闭包返回迭代器，使得可以多次迭代
class Counter2{
  constructor(limit){
    this.limit = limit
  }
  [Symbol.iterator](){
    let count = 1     // 在闭包内创建变量，因此每次该对象生成新迭代器时，都可以重新计数
    let limit = this.limit
    return{
      next(){
        if(count <= limit){
          return { done: false, value: count++ }
        }
        else{
          return { done: true, value: undefined }
        }
      }  
    }
  }
}
let counter2 = new Counter2(3)
for(let i of counter2)console.log(i)
// 1 
// 2 
// 3
for(let i of counter2)console.log(i)
// 1 
// 2 
// 3

每个调用Symbol.iterator属性方法创建的迭代器也实现了Iterable接口，Symbol.iterator属性引用的工厂函数会返回相同的迭代器

let arr = ['foo','bar','baz']
let iter1 = arr[Symbol.iterator]()
console.log(iter1)  // Array Iterator
console.log(iter1[Symbol.iterator]) // ƒ [Symbol.iterator]()

let iter2 = iter1[Symbol.iterator]()  // Symbol.iterator 属性引用的工厂函数会返回相同的迭代器
console.log(iter2)  // Array Iterator
console.log(iter1 === iter2)  // true

let iter3 = arr[Symbol.iterator]()
console.log(iter3)  // Array Iterator
console.log(iter3 === iter1)  // false 

因为每个迭代器也实现了 Iterable接口，所以它们可以用在任何期待可迭代对象的地方，比如for-of 循环

let arr = [3, 1, 4]; 
let iter = arr[Symbol.iterator]();
for (let item of arr ) { console.log(item); } 
// 3 
// 1 
// 4 
for (let item of iter ) { console.log(item); } 
// 3 
// 1 
// 4

提前终止迭代器

可选的return()方法用于指定迭代器提前关闭时执行的逻辑，可以“关闭”迭代器来使迭代器不遍历到可迭代对象耗尽：

• for-of循环通过break、continue、return或throw提前退出时
• 解构操作未消费所有值时

return()方法必须返回一个有效的IteratorResult对象，当内置语言结构发现还有更多值可以迭代，但不会消费这些值时，会自动调用return()方法

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

let counter1 = new Counter(5)
for(let i of counter1){
  if(i>2)break
  console.log(i)
}
// 1 
// 2 
// Exiting early

let counter2 = new Counter(5)
try{
  for(let i of counter2){
    if(i>2)throw 'err'
    console.log(i)
  }
}catch(e){}
// 1 
// 2 
// Exiting early

let counter3 = new Counter(5)
let [a, b] = counter3
// Exiting early

// 如果迭代器没有关闭，则可以继续从上次离开的地方继续迭代
let abc = [1, 2, 3, 4]  // 数组的迭代器不会关闭
let iter = abc[Symbol.iterator]()
for(let i of iter){
  console.log(i)
  if(i>2)break
}
// 1 
// 2 
// 3

for(let i of iter){
  console.log(i)
}
// 4

由于return()方法可选，并非所有迭代器都是可关闭的。可以测试迭代器实例的return属性是否是函数对象即可知道某个迭代器是否可关闭。

仅仅给不可关闭的迭代器添加该方法不能使其可关闭，原因是调用return()不会强制迭代器进入关闭状态

let a = [1, 2, 3, 4, 5]; 
let iter = a[Symbol.iterator](); 
iter.return = function() { 
 console.log('Exiting early'); 
 return { done: true };
}; 
for (let i of iter) { 
 console.log(i); 
 if (i > 2) { 
 break 
 } 
} 
// 1 
// 2 
// 3 
// 提前退出
for (let i of iter) { 
 console.log(i); 
} 
// 4 
// 5

---

生成器

生成器拥有在一个函数块内暂停和恢复代码执行的能力

生成器基础

生成器是一个函数，前加上星号*。只要是可以定义函数的地方，就可以定义生成器。其中箭头函数不能用来定义生成器函数

// 生成器函数声明
function* generatorFn() {}

// 生成器函数表达式
let generatorFn = function* (){}

// 作为对象字面量方法的生成器函数
let foo = {
  * generatorFn(){}
}

// 作为类实例方法的生成器函数
class Foo{
  * generatorFn() {}
}

// 作为类静态方法的生成器函数
class Bar{
  static * generatorFn() {}
}

星号不受两侧空格影响

调用生成器函数生成一个生成器对象。一开始处于暂停执行suspended状态，具有next()方法，调用该方法可以使生成器开始或恢复运行，next()是在外部可被使用的方法

next()带有done以及value属性。

函数体为空的生成器函数中间不会停留，第一次next()调用就会到达done: true状态，除了接下来将会学习到的yield情况，因为没有yield时可以直接到达return的状态

value属性为生成器函数的返回值，默认undefined，可以通过生成器函数的返回值指定

生成器函数只会在初次调用next()方法时开始执行，默认的迭代器都是自引用的

function * generatorFn() {}
let g = generatorFn()
console.log(g)  // generatorFn {[[GeneratorState]]: 'suspended'}
console.log(g.next)  // ƒ next()
console.log(g.next())   // {value: undefined, done: true}

// value返回值
function * generatorFn2() {
  return 'foo'
}
let g2 = generatorFn2()
console.log(g2)  // generatorFn2 {[[GeneratorState]]: 'suspended'}
console.log(g2.next())   // {value: 'foo', done: true}

// 生成器函数只会在初次调用next()方法后开始执行
function* generatorFn() { 
  console.log('foobar'); 
 } 
 // 初次调用生成器函数并不会打印日志
 let generatorObject = generatorFn(); 
 generatorObject.next(); // foobar

// 生成器对象实现了 Iterable 接口，它们默认的迭代器是自引用的
console.log(generatorFn)// ƒ* generatorFn() { }
console.log(generatorFn())// generatorFn {[[GeneratorState]]: 'suspended'}
console.log(generatorFn()[Symbol.iterator])// ƒ [Symbol.iterator]()
console.log(generatorFn()[Symbol.iterator]())// generatorFn {[[GeneratorState]]: 'suspended'}

通过yield中断执行

生成器遇到yield之前会正常执行，遇到之后执行停止，函数作用域状态保留，停止执行的生成器函数之后通过生成器对象上调用next()方法来恢复执行

yield生成的值会出现在next()方法返回的对象里

通过yield退出的生成器函数处在done:false状态，通过return退出的处于done:true状态

function *generatorFn() {
  yield 'abc'
  return 'def'
}
let generatorObject = generatorFn()
// 在第一次调用next()之前处于暂停阻塞状态
console.log(generatorObject)// generatorFn {[[GeneratorState]]: 'suspended'}
// 由于yield的存在，第一次调用的时候不能到达函数结束的地方，因此一开始done：false
console.log(generatorObject.next())// {value: 'abc', done: false}
console.log(generatorObject.next())// {value: 'def', done: true}

生成器函数内部执行流程会针对每个生成器对象区分作用域，在一个生成器对象上调用next()不会影响其它生成器，即生成器之间相互独立

yield只能在生成器函数内部使用，且return以及yield关键字必须直接位于生成器函数定义中，出现在其它地方（如嵌套的非生成器函数中会抛出语法错误）

// 有效
function* validGeneratorFn() { 
 yield; 
} 
// 无效
function* invalidGeneratorFnA() { 
 function a() { 
 	yield; 
 } 
} 
// 无效 箭头函数无效
function* invalidGeneratorFnB() { 
 const b = () => { 
 yield; 
 } 
} 
// 无效 闭包无效
function* invalidGeneratorFnC() { 
 (() => { 
 	yield; 
 })(); 
}

1、生成器对象可作为迭代对象

function * genFn(){
  yield 1
  yield 2
  yield 3
  return 4
}
for(const i of genFn()){
  console.log(i)
}
// 1 
// 2 
// 3
// 没有返回return中的值

// 循环指定次数
function *nTimes(n) {
  while(n--){
    yield
  }
}
for(let i of nTimes(3)){
  console.log('foo') // 输出'foo'三次
}

2. 使用yield实现输入输出

yield可以当作函数的中间参数使用，上一次让生成器函数暂停的yield会接收传给next()方法的第一个值，但第一次调用next()传入的值不会被使用，因为第一次调用next()时为了开始执行生成器函数

function *genFn(initial) {
  // 此处分为两个阶段，第一个阶段即initial，即开始执行
  console.log(initial)
  // 执行开始结束后，才会继续执行yield，这是才开始接收传入next的值
  console.log(yield)
  console.log(yield)
}
let generatorObj = genFn('foo')
// 不需要使用console.log即可打印传入next的参数，但是传入的值并不会改变value内的值
// 需要传入才会自己打印，若没有主动传入则不会主动打印
generatorObj.next('bar') // 'foo'
generatorObj.next('baz') // 'baz'
generatorObj.next('qux') // 'qux'

yield可以同时用于输入以及输出

function *fun() {
  return yield 'foo'
}
// 执行完所有yield之后才会进行done:true
// 第一个next不会接收外部输入，接受值在第二个开始，若没有传入则为undefined
let gen = fun()
console.log(gen.next())// {value: 'foo', done: false}
console.log(gen.next())// {value: undefined, done: true}
// 第二个传入时会显示
let gen1 = fun()
console.log(gen1.next())// {value: 'foo', done: false}
console.log(gen1.next('bar'))// {value: 'bar', done: true}
/*
因为函数必须对整个表达式求值才能确定要返回的值，所以它在遇到 yield 关键字时暂停执行并计算出要产生的值："foo"。下一次调用 next()传入了"bar"，作为交给同一个 yield 的值。然后这个值被确定为本次生成器函数要返回的值
*/

yield关键字不是只能用一次

function* generatorFn() { 
 for (let i = 0;;++i) { 
 yield i; 
 } 
} 
let generatorObject = generatorFn(); 
console.log(generatorObject.next().value); // 0 
console.log(generatorObject.next().value); // 1 
console.log(generatorObject.next().value); // 2 
console.log(generatorObject.next().value); // 3 
console.log(generatorObject.next().value); // 4 
console.log(generatorObject.next().value); // 5

3. 产生可迭代对象

使用星号可以增强yield行为，使其能够迭代一个可迭代对象，从而一次产出一个值，yield星号两侧空格不影响行为，yield*实际上只是将一个可迭代对象序列化为一连串可以单独产出的值

// 等价的 generatorFn： 
// function* generatorFn() { 
// for (const x of [1, 2, 3]) { 
// yield x; 
// } 
// }
function *generatorFn() {
  yield* [1, 2, 3]
}
let gen = generatorFn()
for(const i of generatorFn()){
  console.log(i)
}
// 1 
// 2 
// 3

yield*的值时关联迭代器返回done:true时的value属性，对于普通迭代器来说，这个值是undefined

对于生成器函数产生的迭代器来说，该值即为生成器函数返回的值

// 运行过程中知道运行完所有yield之后，才遇到generatorFn中console.log的右括号，该输出才真正执行
function *generatorFn() {
  console.log('iter value:', yield* [1, 2, 3])
}
for(const i of generatorFn()){
  console.log('value:', i)
}
// value: 1 
// value: 2 
// value: 3 
// iter value: undefined

function *innerGeneratorFn() {
  yield 'foo'
  return 'bar'
}
function *outerGeneratorFn() {
  console.log('iter value:', yield* innerGeneratorFn())
}
for(const i of outerGeneratorFn()){
  console.log('value:', i)
}
// value: foo
// iter value: bar

4. 使用yield实现递归算法

yield*最有用的地方是实现递归操作，此时生成器可以产生自身

// 递归实例
function *nTimes(n) {
  if(n>0){
    yield* nTimes(n-1)
    yield n-1
  }
}
for(const i of nTimes(3)){
  console.log(i)
}
// 0 
// 1 
// 2

图数据结构非常适合递归遍历，而递归生成器恰好非常合用。为此，生成器函数必须接收一个可迭代对象，产出该对象中的每一个值，并且对每个值进行递归

使用递归生成器结构和 yield*可以优雅地表达递归算法。下面是一个图的实现，用于生成一个随机的双向图：

// 节点的相关结构
class Node {
  constructor(id){
    this.id = id
    this.neighbors = new Set()  // 由于邻居数量不确定，因此可以用集合存储
  }
  // 用于节点之间连接
  connect(node){
    if(node !== this){
      this.neighbors.add(node)
      node.neighbors.add(this)
    }
  }
}

// 随机图的相关结构
class RandomGraph {
  // 构造函数中需要包含节点，以及节点间的联系
  constructor(num){
    this.nodes = new Set() // 存储自身节点

    // 创建节点
    for(let i=0; i<num; i++){
      this.nodes.add(new Node(i))
    }

    // 随机连接节点，即集合中存在的节点间相互连接，若相同在节点函数connect有判定
    const threshold = 1/num
    for(const x of this.nodes){
      for(const y of this.nodes){
        if(Math.random() < threshold){
          x.connect(y)
        }
      }
    }
  }

  // 用于调试
  print(){
    for(const node of this.nodes){
      const ids = [...node.neighbors].map(el => el.id).join(',')
      console.log(`${node.id}: ${ids}`)
    }
  }

  // 判断所有节点是否互相连通
  isConnected() {
    const visitedNodes = new Set()

    // 深度遍历
    function *traverse(nodes) {
      for(const node of nodes){
        if(!visitedNodes.has(node)){
          yield node
          yield* traverse(node.neighbors)
        }
      }
    }

    // 取得集合中的第一个节点
    const firstNode = this.nodes[Symbol.iterator]().next().value

    // 使用递归生成器迭代每一个节点
    for(const node of traverse([firstNode])){
      visitedNodes.add(node)
    }

    return visitedNodes.num === this.nodes.num
  }
}

const g = new RandomGraph(6)
g.print()
/**
 * 0: 5,1,2,3
 * 1: 0
 * 2: 0,4
 * 3: 0
 * 4: 2,5
 * 5: 0,4
 */
console.log(g.isConnected()) // true

生成器作为默认迭代器

因为生成器对象实现了 Iterable 接口，而且生成器函数和默认迭代器被调用之后都产生迭代器，所以生成器格外适合作为默认迭代器

class Foo {
  constructor(){
    this.values = [1, 2, 3]
  }
  * [Symbol.iterator]() {
    yield* this.values  // 即此处加上yield*即可将生成器作为默认迭代器
  }
}
const f = new Foo()
for(const i of f){
  console.log(i)
}
// 1
// 2
// 3
// 生成器对象是可迭代的

提前终止生成器

• 生成器可关闭，可选的return()以及throw()方法可用于强制生成器进入关闭状态，return()方法用于提前终止迭代器
• 迭代器的return()方法并不能强制迭代器进入关闭状态

function *generatorFn() {}
const g = generatorFn()
console.log(g)// generatorFn {[[GeneratorState]]: 'suspended'}
console.log(g.next)// f next()
console.log(g.return)// f return()
console.log(g.throw)// f throw()

• return()方法强制生成器进入关闭状态，提供传入的值，即终止迭代器对象的值。所有生成器对象都有return()方法，通过其进入关闭状态，就无法恢复了，后续调用next()之后都会显示done: true状态，提供的任何返回值都不会被存储或传播

function *generatorFn() {
  for(const i of [1, 2, 3]){
    yield i
  }
}
const g = generatorFn()
console.log(g)// generatorFn {[[GeneratorState]]: 'suspended'}
console.log(g.return(4))// {value: 4, done: true}
console.log(g)// generatorFn {[[GeneratorState]]: 'closed'}

const g1 = generatorFn()
console.log(g1.next())// {value: 1, done: false}
// 调用return后就进入关闭状态
console.log(g1.return(4))// {value: 4, done: true}
console.log(g1.next())// {value: undefined, done: true}
console.log(g1.next())// {value: undefined, done: true}
console.log(g1.next())// {value: undefined, done: true}

• for-of循环等内置语言结构会忽略状态为done: true的迭代器实例内部返回的值

function *generatorFn() {
  for(const x of [1, 2, 3]){
    yield x
  }
}
const g = generatorFn()
for(const x of g){
  if(x > 1){
    g.return(4)// 调用之后即进入关闭状态，在此之后的x都不会再被调用
  }
  console.log(x)  // 1 2
}

• throw()会在暂停时将一个提供的错误注入到生成器对象中；若错误未被处理，则生成器关闭。若生成器函数内部处理了该错误，则生成不会关闭，还可以恢复执行。错误处理会跳过对应的yield，相当于跳过了一个值

function *generatorFn() {
  for(const x of [1, 2, 3]){
    yield x
  }
}
const g = generatorFn()
console.log(g)
try{
  g.throw('foo')// generatorFn {[[GeneratorState]]: 'suspended'}
}catch(e){
  console.log(e)// foo
}
console.log(g)// generatorFn {[[GeneratorState]]: 'closed'}

function *generatorFn2() {
  for(const x of [1,2,3]){
    try{
      yield x
    }
    catch(e){
      console.log(e)
    }
  }
}
const g1 = generatorFn2()
console.log(g1.next())// {value: 1, done: false}
g1.throw('foo')       // foo
// 中间的yield 2被跳过，且跳过后done的状态依旧是false
console.log(g1.next())// {value: 3, done: false}

生成器在 try/catch 块中的 yield 关键字处暂停执行。在暂停期间，throw()方法向生成器对象内部注入了一个错误：字符串"foo"。这个错误会被 yield 关键字抛出。因为错误是在生成器的 try/catch 块中抛出的，所以仍然在生成器内部被捕获。可是，由于 yield 抛出了那个错误，生成器就不会再产出值 2。此时，生成器函数继续执行，在下一次迭代再次遇到 yield 关键字时产出了值 3。

如果生成器对象还没有开始执行，那么调用 throw()抛出的错误不会在函数内部被捕获，因为这相当于在函数块外部抛出了错误