JavaScript迭代器与生成器实战-js教程-PHP中文网

JavaScript迭代器与生成器实战

狼影

发布： 2025-10-18 16:30:01

原创

372人浏览过

迭代器是定义next方法的对象，返回value和done属性；2. 实现可迭代协议的类型如数组、字符串等具有Symbol.iterator方法；3. 生成器函数通过yield简化迭代器创建，提升处理大数据序列的可读性与性能。

javascript迭代器与生成器实战

JavaScript中的迭代器和生成器是处理数据序列的强大工具，尤其在面对大量数据或需要自定义遍历逻辑时，它们能显著提升代码的可读性和性能。理解并掌握它们的实际用法，对现代前端开发至关重要。

什么是迭代器（Iterator）

迭代器是一个对象，它定义了一个 next() 方法，返回一个包含 value 和 done 属性的对象。当 done 为 true 时，表示遍历结束。

JavaScript 中很多内置类型都实现了可迭代协议，比如数组、字符串、Map、Set 等，这意味着它们都有一个 [Symbol.iterator] 方法。

示例：手动创建一个迭代器

假设我们要遍历一个数字范围：

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

function createRangeIterator(start, end) {
  let current = start;
  return {
    next() {
      if (current <= end) {
        return { value: current++, done: false };
      } else {
        return { done: true };
      }
    }
  };
}
<p>const iter = createRangeIterator(1, 3);
iter.next(); // { value: 1, done: false }
iter.next(); // { value: 2, done: false }
iter.next(); // { value: 3, done: false }
iter.next(); // { done: true }

登录后复制

这个例子展示了如何手动实现一个简单的计数迭代器。虽然写起来稍显繁琐，但它帮助理解底层机制。

使用生成器简化迭代器创建

生成器函数是创建迭代器的“语法糖”。只需在函数名前加一个 *，并在内部使用 yield 返回值，函数就会自动返回一个迭代器对象。

示例：用生成器重写 range 函数

function* rangeGenerator(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}
<p>const gen = rangeGenerator(1, 3);
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { done: true }

登录后复制

代码更简洁，逻辑更清晰。你不需要手动管理状态和 next 方法，JavaScript 引擎会帮你处理。

生成器函数可以暂停和恢复执行。每次遇到 yield，函数暂停，下次调用 next() 才继续。

What-the-Diff

检查请求差异，自动生成更改描述

103

查看详情

生成器在实际项目中的应用

生成器不只是用来生成数字序列。它们在异步编程、状态管理、大数据流处理中也有实用场景。

惰性求值：只在需要时计算下一个值，节省内存。例如处理大文件或无限序列。
异步流程控制：结合 Promise 使用，可以让异步代码看起来像同步的（虽然现在 async/await 更常用）。
状态机：用 yield 控制状态流转，适合实现复杂的业务流程。

示例：模拟分页加载数据

假设你要从服务器“一页一页”获取用户数据：

function* fetchUsersPage() {
  let page = 1;
  while (true) {
    const response = yield fetch(`/api/users?page=${page}`);
    const data = yield response.json();
    if (data.length === 0) break;
    page++;
    yield* data; // 将数组每一项依次 yield 出去
  }
}

登录后复制

注意这里用了 yield*，它可以将另一个可迭代对象的内容逐个 yield 出来。

虽然真实项目中我们会用 async/await 配合事件或回调处理分页，但这个例子展示了生成器在控制流程上的灵活性。

可迭代协议与 for...of 的配合

为了让自定义对象支持 for...of 循环，你需要实现 [Symbol.iterator] 方法，并让它返回一个迭代器。

示例：让一个类成为可迭代对象

class TaskList {
  constructor() {
    this.tasks = ['学习ES6', '写代码', '测试'];
  }
<p>*[Symbol.iterator]() {
for (const task of this.tasks) {
yield task.toUpperCase();
}
}
}</p><p>const list = new TaskList();
for (const task of list) {
console.log(task);
}
// 输出：
// 学习ES6
// 写代码
// 测试

登录后复制

通过在类中定义生成器方法作为 [Symbol.iterator]，我们让 TaskList 实例可以直接用于 for...of 循环，且自动转换为大写输出。

基本上就这些。迭代器和生成器看似抽象，但在处理数据流、优化性能、构建工具函数时非常有用。掌握它们，能让代码更优雅、更高效。

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