当前位置：首页 > 文章列表 > 文章 > 前端 > JS中的Generator函数是什么？如何使用？

JS中的Generator函数是什么？如何使用？

2025-06-06 14:28:40 0浏览收藏

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JS中的Generator函数是什么？如何使用？》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

Generator函数是JavaScript中一种能分段执行并保持状态的特殊函数，通过function*定义，使用yield暂停执行，适合处理异步操作、懒加载和逐步返回结果。它在调用时不立即执行函数体，而是返回一个Generator对象，通过.next()方法逐步执行，每次遇到yield或return暂停；其中return标记done: true，而yield为done: false。Generator可通过配合Promise实现类似同步的异步流程控制，如异步任务按顺序执行；也可用于创建自定义迭代器，例如无限递增数字生成器。此外，支持通过.next(value)传值、.throw(error)触发错误及使用yield*代理其他Generator，提供了灵活的代码执行控制方式。

Generator函数是JavaScript中一种特殊的函数，它和普通函数不同，可以在执行过程中暂停，并在之后恢复执行。这种“可暂停”的特性让它非常适合用来处理异步操作、懒加载数据、或者需要逐步返回结果的场景。

什么是Generator函数？

Generator函数本质上是一种能分段执行并保持状态的函数。它不会像普通函数那样一调用就从头执行到尾，而是可以在执行过程中通过 yield 暂停，在外部控制下继续执行下一步。

定义方式是在函数关键字 function 后加一个星号 *，例如：

function* myGenerator() {
  yield 1;
  yield 2;
  return 3;
}

当你调用这个函数时，它并不会立即执行函数体，而是返回一个Generator对象，你可以通过这个对象手动控制执行进度。

如何使用Generator函数？

基本用法：一步步执行

调用 .next() 方法可以让Generator函数从当前暂停的位置继续执行，直到遇到下一个 yield 或 return。

const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: true }

value 是当前 yield 或 return 的值。
done 表示函数是否已经执行完毕。

注意：只有 return 的值才会标记为 done: true，而 yield 返回的是 done: false。

Generator配合异步操作

虽然现在Promise和async/await更常见，但在早期JS中，Generator常被用来模拟异步流程控制。

比如，你可以写一个异步任务，每次 yield 等待一个异步操作完成：

function asyncTask(time) {
  return new Promise(resolve => setTimeout(resolve, time));
}

function* taskRunner() {
  console.log('开始任务1');
  yield asyncTask(1000).then(() => console.log('任务1完成'));

  console.log('开始任务2');
  yield asyncTask(500).then(() => console.log('任务2完成'));
}

const runner = taskRunner();
runner.next().value.then(() => runner.next().value);

虽然看起来有点绕，但这种方式让异步逻辑看起来像是同步写的，便于管理流程。

用Generator实现自定义迭代器

由于Generator默认返回一个可迭代对象，所以你很容易用它来创建一个自定义的数据生成器。

比如，实现一个无限递增的数字生成器：

function* numberGenerator(start = 0) {
  let i = start;
  while (true) {
    yield i++;
  }
}

const nums = numberGenerator(5);
console.log(nums.next().value); // 5
console.log(nums.next().value); // 6
console.log(nums.next().value); // 7

这种模式非常适合用于懒加载、流式数据处理等场景。