当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript生成器与迭代器使用教程

JavaScript生成器与迭代器使用教程

2026-01-20 21:34:46 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript生成器与迭代器详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

生成器和迭代器协议是JavaScript处理数据序列的核心机制，通过实现Symbol.iterator方法和next()返回value与done属性的对象，使对象可迭代。生成器函数使用yield暂停执行，并能通过next()传参实现双向通信，如greet()示例所示，支持状态保持与惰性求值，广泛应用于异步控制与大数据处理。

JavaScript生成器与迭代器协议

JavaScript中的生成器（Generator）和迭代器协议（Iterator Protocol）是处理数据序列的重要机制，尤其适用于惰性求值和大量数据的逐步处理。它们让开发者可以更灵活地定义和控制数据遍历行为。

迭代器协议：实现可迭代对象的基础

迭代器协议规定了一个对象如何被逐个访问其元素。只要一个对象实现了 Symbol.iterator 方法，并且该方法返回一个具有 next() 方法的对象，它就是可迭代的。

调用 next() 方法会返回一个包含两个属性的对象：

value：当前步骤的值
done：布尔值，表示是否已遍历完成

例如，手动创建一个简单的计数器迭代器：

生成器函数：简化迭代器创建

生成器是一种特殊函数，能暂停执行并恢复，由 function* 定义，返回一个同时符合迭代器和可迭代协议的对象。使用 yield 关键字来指定每次迭代输出的值。

生成器自动实现了 Symbol.iterator 和 next() 方法，无需手动编写。

示例：用生成器实现斐波那契数列

function* fibonacci() {
  let a = 0, b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

也可以在 for...of 循环中直接使用：

for (let n of fibonacci()) {
if (n > 100) break;
console.log(n);
}

生成器的高级用法：双向通信与状态保持

生成器不仅可以用 yield 向外输出值，还能通过 next() 方法传入数据，实现函数内外通信。

next() 接收的参数会成为当前 yield 表达式的返回值。

例子：一个响应式对话生成器

function* greet() {
const name = yield "What is your name?";
yield `Hello, ${name}!`;
}

const g = greet();
console.log(g.next().value); // "What is your name?"
console.log(g.next("Alice").value); // "Hello, Alice!"

这种特性可用于构建状态机、异步流程控制等场景。

基本上就这些。生成器和迭代器协议共同构成了现代 JavaScript 中处理序列数据的核心能力，尤其在结合 async/await 时展现出强大潜力。理解它们有助于写出更高效、更清晰的数据处理逻辑。

理论要掌握，实操不能落！以上关于《JavaScript生成器与迭代器使用教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！