什么是JS的生成器函数？-js教程-PHP中文网

什么是JS的生成器函数？

幻夢星雲

发布： 2025-08-29 19:23:02

原创

1002人浏览过

生成器函数通过function*定义，返回迭代器对象，调用next()可逐次执行并返回value和done属性，适用于异步编程、自定义迭代器等场景。

什么是js的生成器函数？

JS的生成器函数是一种特殊的函数，它允许你暂停函数的执行，并在稍后的某个时间点恢复执行。简单来说，它像一个可以多次返回值的函数。

生成器函数可以让你更灵活地处理异步操作、迭代器等场景。

生成器函数是如何工作的？

生成器函数使用

function*

登录后复制

语法定义。与普通函数不同，生成器函数在调用时不会立即执行，而是返回一个迭代器对象。这个迭代器对象可以控制生成器函数的执行。

生成器函数内部可以使用

yield

登录后复制

关键字来暂停函数的执行，并将

yield

登录后复制

后面的表达式的值作为迭代器的

value

登录后复制

属性返回。当调用迭代器的

next()

登录后复制

方法时，生成器函数会从上次暂停的地方继续执行，直到遇到下一个

yield

登录后复制

关键字或者函数结束。

如何定义和使用生成器函数？

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

const iterator = myGenerator();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

登录后复制

可以看到，每次调用

iterator.next()

登录后复制

，生成器函数都会执行到下一个

yield

登录后复制

，并返回一个包含

value

登录后复制

和

done

登录后复制

属性的对象。

done

登录后复制

属性表示生成器函数是否已经执行完毕。

生成器函数在异步编程中的应用

生成器函数可以用于简化异步编程。例如，可以使用生成器函数来实现一个简单的异步任务队列：

function* asyncTaskQueue(tasks) {
  for (const task of tasks) {
    const result = yield task(); // 假设 task 返回一个 Promise
    console.log('Task completed:', result);
  }
}

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const tasks = [
  () => delay(1000).then(() => 'Task 1'),
  () => delay(500).then(() => 'Task 2'),
  () => delay(1500).then(() => 'Task 3'),
];

const iterator = asyncTaskQueue(tasks);

function runTask(iterator, value) {
  const result = iterator.next(value);
  if (!result.done) {
    result.value.then(res => runTask(iterator, res));
  }
}

runTask(iterator);

登录后复制

这个例子展示了如何使用生成器函数来顺序执行异步任务。虽然看起来比 Promise.all 复杂一些，但在处理复杂的异步流程控制时，生成器函数可以提供更清晰的结构。

生成器函数与迭代器的关系

生成器函数返回的是一个迭代器对象，这个迭代器对象实现了迭代器协议。迭代器协议定义了迭代器的行为，包括

next()

登录后复制

方法。

迭代器协议的核心是

next()

登录后复制

方法，它返回一个包含

value

登录后复制

和

done

登录后复制

属性的对象。

value

登录后复制

属性表示迭代器的当前值，

done

登录后复制

属性表示迭代器是否已经迭代完毕。

生成器函数可以自动实现迭代器协议，这使得它非常适合用于创建自定义的迭代器。

生成器函数的

yield*

登录后复制

语法

yield*

登录后复制

语法可以将另一个迭代器（或者可迭代对象）中的值依次 yield 出来。这可以用于组合多个生成器函数。

function* generator1() {
  yield 1;
  yield 2;
}

function* generator2() {
  yield 3;
  yield* generator1(); // yield* 用于委托给另一个生成器
  yield 4;
}

const iterator = generator2();

console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

登录后复制

yield*

登录后复制

简化了组合多个迭代器的过程，使得代码更加简洁易懂。

Android 基础知识入门 pdf版

Android 基础知识入门 pdf，介绍什么是Android、Android可以完成的功能、Android架构、Android应用程序框架、Android函数库等，从开始安装Android开始，到环境配置，到一步步编写复杂的应用程序，本书将带你了解基础但有内涵的Android入门知识。

查看详情

生成器函数的错误处理

在生成器函数中，可以使用

try...catch

登录后复制

语句来捕获错误。如果

yield

登录后复制

表达式抛出错误，可以在生成器函数内部捕获并处理它。

function* myGenerator() {
  try {
    yield 1;
    throw new Error('Something went wrong');
    yield 2; // 这行代码不会执行
  } catch (error) {
    console.error('Error caught:', error);
  }
  yield 3;
}

const iterator = myGenerator();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // Error caught: Error: Something went wrong
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

登录后复制

错误处理对于保证生成器函数的健壮性非常重要。

生成器函数与async/await 的关系