TypeScript实例讲解（十八）

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

本篇内容：生成器函数。
复制代码

生成器

生成器是一种能够中途停止，可以从停止的地方继续运行的函数。通常借助 return 或 yield 停止函数运行。通过 function * 语法创建生成器函数，生成器函数会返回一个对象，可以调用这个对象上的 next() 方法。

延迟迭代器

通过生成器函数可用于创建延迟迭代器。

// 例 1
function* generatorDemo() {
    // 第一次执行
    yield 'first'

    // 第二次执行
    yield 'second'
    
    // 第三次执行
    yield 'third'
}

let iterator = generatorDemo()
console.log(iterator.next().value)   // first
console.log(iterator.next().value)   // second
console.log(iterator.next().value)   // third
复制代码

例1通过 function* 语法创建了一个生成器函数，调用该函数后赋值给变量 iterator。生成器函数在调用时不会执行。它只是创建一个生成器对象。函数体用到 yield 关键字，表示返回一个迭代器。

变量 iterator 拥有 next() 方法，作用是顺序执行返回的迭代器函数。第一次调用 next() 方法遇到 yield 关键字，yield 会把它后面的值返回，生成器生成一个对象 { value: 'Hello, ', done: false }，函数停止运行，直到再次调用 next() 方法。

当迭代器结束后再次调用 next() 会返回 { done: true, value: undefined }，此时没有返回值（默认为 undefined）。

// 例 2
function* getRandom() {
    while (true) {
        yield Math.floor(Math.random() * 100)
    }
}

const iterator = getRandom()
let num = 1
while (num % 9 !== 0) {
    num = iterator.next().value
}

console.log(num)
复制代码

例2是一个更实用的例子，程序当生成的随机数是9的倍数时才会停止，否则会一直执行。

next() 传值

next() 方法可以带参数向生成器传值，控制上一次 yield 表达式的结果值。注意：在第一次调用 next() 方法时传参是无意义的。

// 例 3
function* generatorDemo() {
    // 第一次执行
    let y1 = yield 'first'

    // 第二次执行
    let y2 = yield 'second' + y1
    
    // 第三次执行
    let y3 = yield 'third' + y2
}

let iterator = generatorDemo()
console.log(iterator.next().value)     // first
console.log(iterator.next(10).value)   // second10
console.log(iterator.next(20).value)   // third20
复制代码

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

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。