无需登录 数据私有 本地保存

Generator 与迭代器演示 - 暂停/恢复执行过程

JavaScript 开发工具 Generator 演示 迭代器
13
0
0
0

⚡ Generator 与迭代器演示

ES6 Generator 暂停/恢复执行过程可视化 yield & next()
预设示例
Generator 源码
就绪 Generator 已创建，点击"下一步"开始执行
执行流程
等待执行... 点击按钮开始
💡 提示：对于双向通信示例，在输入框中填写值后点击"传值执行"可向 Generator 内部传递数据。
执行历史 0

  • 暂无执行记录，点击"下一步"开始

常见问题与知识点

Generator 是 ES6 引入的一种特殊函数，使用 function* 声明。它可以暂停执行并在之后恢复执行，通过 yield 关键字产出值。调用 Generator 函数不会立即执行函数体，而是返回一个迭代器对象（Iterator），通过调用该对象的 next() 方法逐步执行。

yield 用于暂停 Generator 函数的执行，并向外返回一个值。每次调用 next() 时，函数从上次暂停的 yield 处恢复执行，直到遇到下一个 yield 或 return。返回值格式为 { value: any, done: boolean }。

Generator 内部有三种状态：suspended（暂停中，等待 next() 调用）、executing（正在执行中，瞬态）和 closed（已完成，done 为 true）。初始创建的 Generator 处于 suspended 状态，第一次 next() 开始执行。

调用 next(value) 时传入的参数，会作为上一个 yield 表达式的返回值。这实现了双向通信：Generator 通过 yield 向外输出值，外部通过 next(val) 向内部输入值。注意：第一次调用 next() 时传入的参数会被忽略。

  • 惰性求值：按需生成无限序列（如斐波那契数列）
  • 状态机：管理复杂的状态转换逻辑
  • 异步流程控制：配合 Promise 实现类同步写法（async/await 的前身）
  • 数据流处理：逐条处理大型数据集，避免内存溢出
  • 协作式多任务：在单线程中模拟并发

async/await 本质上是 Generator + Promise 的语法糖。async 函数可以看作自动执行的 Generator，await 相当于 yield。在 async/await 出现之前，开发者使用 Generator 配合自动执行器（如 co 库）来实现异步流程控制。
🔧 相关工具