
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 时恢复执行。
生成器如何简化异步编程
虽然现在普遍使用 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 的数据流处理更加灵活。不复杂但容易忽略。


