JavaScript 生成器函数(generator)详解：优雅处理异步任务流

原创

已于 2023-09-08 11:18:00 修改 · 7.4k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ecmascript #es6 #javascript

于 2023-07-03 15:09:16 首次发布

本文详细介绍了JavaScript中的生成器函数，包括其定义、使用yield暂停和恢复执行的功能，以及如何与其他语言特性如迭代器协议、解构赋值、Promise和async/await配合使用。通过示例展示了生成器在处理大量数据和异步操作中的优势，强调了其在复杂流程控制中的灵活性。

1. 生成器函数的定义和使用

2. 暂停和恢复执行

3. 与其他语言特性的配合使用

Iterator Protocol 迭代器协议

Generators 是 JavaScript 中的一种特殊函数，它们可以暂停执行并根据需要生成多个值。通过 yield 关键字，生成器函数可以在每次被调用时产生一个新值，这使得它们非常适合处理大量数据或需要延迟计算的场景。本文将详细介绍 generators 的作用、用法以及与其他语言特性的配合使用。

1. 生成器函数的定义和使用

生成器函数是通过一个特殊的函数关键字 function* 来定义的。在生成器函数内部，可以使用 yield 关键字来指定需要生成的值。以下是生成器函数的示例：

function* myGenerator() {
    yield 'Apple';
    yield 'Banana';
    yield 'Cherry';
}

const generator = myGenerator();

console.log(generator.next()); // 输出: { value: 'Apple', done: false }
console.log(generator.next()); // 输出: { value: 'Banana ', done: false }
console.log(generator.next()); // 输出: { value: 'Cherry', done: false }
console.log(generator.next()); // 输出: { value: undefined, done: true }

通过调用生成器函数，我们可以获得一个生成器对象 generator。每次调用 generator.next() 都会返回一个包含 value 和 done 属性的对象。

value 表示下一个生成的值。
done 表示是否还有更多的值需要生成。当所有值都被生成后，done 为 true。

2. 暂停和恢复执行

生成器函数的强大之处在于它们能够暂停和恢复执行，这意味着可以在需要时延迟计算或逐步处理大量数据，而不是一次性全部处理。以下示例展示了如何利用生成器函数处理大型数据集：

function* generateNumbers() {
    for (let i = 0; i <= 1000000; i++) {
        yield i;
    }
}

const numbersGenerator = generateNumbers();

for (let number of numbersGenerator) {
    console.log(number);
}

在上述示例中，我们定义了一个生成器函数 generateNumbers()，它会生成一个从 0 到 1000000 的数字序列。通过 yield 关键字，每次循环都会产生一个新的数字，并在迭代过程中输出到控制台。通过这种方式，我们可以逐步处理巨大的数据集，避免一次性加载整个数据集导致的性能问题。