JavaScript迭代器与生成器实现原理

迭代器是遵循next()方法返回value和done的对象，生成器是ES6语法糖用于简化迭代器创建。

JavaScript中的迭代器和生成器是处理数据序列的重要工具，理解它们的实现原理有助于写出更高效、可读性更强的代码。核心在于，迭代器是一种设计模式，生成器则是ES6引入的语法糖，能更方便地创建迭代器。

迭代器的工作机制

迭代器是一个对象，遵循迭代器协议：必须实现一个 next() 方法，该方法返回一个包含 value 和 done 两个属性的对象。

当遍历开始时，每次调用 next()，迭代器返回当前值并推进内部状态。一旦完成，done 变为 true。

手动实现一个简单的数组迭代器：

立即学习“Java免费学习笔记（深入）”；

function createArrayIterator(arr) {
  let index = 0;
  return {
    next: function() {
      if (index < arr.length) {
        return { value: arr[index++], done: false };
      } else {
        return { done: true };
      }
    }
  };
}
<p>const iter = createArrayIterator([1, 2, 3]);
iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: false }
iter.next(); // { value: 3, done: false }
iter.next(); // { done: true }</p>

这个例子展示了迭代器如何通过闭包保存状态，并逐步返回结果。

生成器函数的本质

生成器函数用 function* 定义，调用后返回一个生成器对象，这个对象既是迭代器，也是可迭代对象。

生成器内部使用 yield 暂停执行，每次调用 next() 才继续运行到下一个 yield 或函数结束。

例如：

function* gen() {
  yield 1;
  yield 2;
  return 3;
}
<p>const g = gen();
g.next(); // { value: 1, done: false }
g.next(); // { value: 2, done: false }
g.next(); // { value: 3, done: true }</p>

生成器的关键在于暂停与恢复执行上下文。V8引擎在遇到 yield 时会保存当前调用栈、变量环境等信息，下次调用 next 时恢复执行。

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

57

查看详情

生成器如何简化异步编程

虽然现在普遍使用 async/await，但生成器曾是 Promise 结合使用的主力。通过外部驱动器（如 run 函数），可以自动执行生成器中的异步操作。

基本思路是：生成器 yield 一个 Promise，驱动器在 next 返回后监听其 resolve，再将结果传回生成器继续执行。

示例：

function* asyncGen() {
  const data = yield fetch('/api/data');
  const json = yield data.json();
  return json;
}

配合一个 runner 函数，就能实现类似 async/await 的效果。这体现了生成器对控制流的强大掌控能力。

底层实现与引擎支持

生成器并非纯 JavaScript 实现，而是由 JS 引擎（如 V8）底层支持。引擎为生成器函数创建特殊的字节码，能够中断和恢复执行栈。

每个生成器对象都有自己的执行上下文栈，yield 不像 return 那样销毁上下文，而是将其挂起。

这也意味着生成器比普通函数消耗更多内存，频繁使用需注意性能影响。

基本上就这些。迭代器是协议，生成器是语法，两者结合让 JavaScript 的数据流处理更加灵活。不复杂但容易忽略。

以上就是JavaScript迭代器与生成器实现原理的详细内容，更多请关注php中文网其它相关文章！