第十八节: TypeScript生成器(Generator)

生成器(Generator)

迭代器和生成器是两个概念. 但这两个概念很容易混淆, 原因在于生成器会借助迭代器功能.

生成器是一种能够中途停止，然后从停止的地方继续运行的函数。可以借助 yield 或 return 停止函数运行。

通过function *来创建一个生成器函数, 在调用生成器函数后并不会立即执行函数中的代码，而是会返回一个迭代器对象通过调用迭代器对象的 next() 方法，可以获得 yield/return 的返回值。

1. 生成器函数的特殊性

一个正常的函数，如果没有 return 或者 throw 一个异常，一旦被调用在函数运行结束之前是不会停止的。

如果再次调用这个函数，它会重新从第一行开始执行。

例如:

// 普通函数
function fn(){
  console.log('hello')
  console.log('world')
  console.log(20)
  console.log(false)
}

相反,生成器函数可以中途停止, 然后从停止的地方继续执行

生成器函数返回一个对象, 这个对象就是迭代器, 调用迭代器上的next()方法执行后续代码

例如:

// 生成器函数
function * generatorFn(){
  console.log('开始执行')

  yield 'hello';

  console.log('暂停后再次执行')
  yield 'world';

  console.log('函数执行完毕')
}

// 执行生成器函数,获取迭代器
let interator = generatorFn()

// 调用next 方法获取值
// 迭代器next() 方法返回 {value:,done:}
// 如果要获取值,就调用value 方法
let val = interator.next().value
console.log('val', val)
/*
  控制台打印结果:
    开始执行
    val hello
*/ 

示例中,通过function *语法创建了一个生成器函数调用这个函数并赋值给变量 iterator，我们已经知道这是个迭代器对象。

调用iterator对象上的 next() 方法，首先打印出 开始执行，然后遇到了 yield Hello,，yield 会将后面的值返回，迭代器生成一个对象 { value: 'Hello, ', done: false }，函数停止运行，直到再次调用 next() 方法。

// 再次调用next 方法
let val2 =  interator.next().value
console.log('val2', val2)
/*
  控制台打印结果:
    暂停后再次执行
    val2 world
*/

再次调用 next() 方法，函数内继续执行，打印出 暂停后再次执行，遇到 yield 'World!'，生成对象 { value: 'World!', done: false }，函数停止运行，直到再次调用 next() 方法。

// 再次调用next 方法
let val3 =  interator.next().value
console.log('val3', val3)
/*
  控制台打印结果:
    函数执行完毕
    val3 undefined
*/

2. 通过next()参数向生成器传值

在调用 next() 的时候可以传递一个参数，在上次 yield 前接收到这个参数：

例如:

function* gen() { 
  console.log('开始执行')
  let res1 = yield 1
  console.log('中断后继续执行')
  console.log('res1',res1)
  
  let res2 = yield 2
  console.log('res2', res2)
  
  console.log('执行结束')
  return 3
}

let iterator = gen()
console.log(iterator.next('first'))
console.log(iterator.next('second'))
console.log(iterator.next('third'))

/*
  执行结果
    开始执行
    { value: 1, done: false }
    中断后继续执行
    res1 second
    { value: 2, done: false }
    res2 third
    执行结束
    { value: 3, done: true }

*/

这里注意下，生成器最初没有产生任何结果，在第一次调用 next() 时传参是无意义的

3. 小结:

生成器还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。

async await 就是基于生成器函数的语法糖，await 可以等待异步函数执行完毕再继续执行后面的代码。