JavaScript迭代器生成器_可迭代协议深入解析-js教程-PHP中文网

JavaScript迭代器生成器_可迭代协议深入解析

紅蓮之龍

发布： 2025-11-25 13:14:33

原创

376人浏览过

可迭代协议通过Symbol.iterator使对象支持for...of遍历，返回迭代器对象；迭代器协议由next()方法实现，生成器函数以*声明并用yield简化迭代逻辑，自动实现迭代器协议。

javascript迭代器生成器_可迭代协议深入解析

JavaScript中的迭代器和生成器是处理数据序列的核心机制，理解它们的工作原理有助于写出更高效、更具可读性的代码。关键在于掌握“可迭代协议”和“迭代器协议”的区别与联系，以及生成器如何简化迭代逻辑。

可迭代协议：让对象能被 for...of 遍历

一个对象如果实现了Symbol.iterator方法，它就是“可迭代的”。这个方法必须返回一个迭代器对象，从而支持for...of循环、展开运算符（...）、Array.from()等语法。

常见内置可迭代对象包括：数组、字符串、Map、Set、arguments 对象等。你也可以为自定义对象实现可迭代性。

例如，让一个对象支持遍历其属性值：

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

const myObj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]() {
    const values = Object.values(this);
    let index = 0;
    return {
      next() {
        if (index < values.length) {
          return { value: values[index++], done: false };
        }
        return { done: true };
      }
    };
  }
};
<p>for (const val of myObj) {
console.log(val); // 输出 1, 2, 3
}</p>

登录后复制

迭代器协议：定义如何逐步访问数据

迭代器是一个具有next()方法的对象，每次调用返回一个形如{ value, done }的结果。done 为 true 表示遍历结束。

迭代器本身不需要一次性拥有所有数据，适合处理无限序列或懒加载场景。

手动创建一个计数迭代器：

听脑AI

听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。

745

查看详情

function createCounter(max) {
  let count = 0;
  return {
    next() {
      if (count < max) {
        return { value: count++, done: false };
      }
      return { done: true };
    }
  };
}
<p>const counter = createCounter(3);
console.log(counter.next()); // { value: 0, done: false }
console.log(counter.next()); // { value: 1, done: false }
console.log(counter.next()); // { value: 2, done: false }
console.log(counter.next()); // { done: true }</p>

登录后复制

生成器函数：优雅创建迭代器

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

通过yield关键字暂停执行并返回值，下次调用next()时从暂停处继续。

重写上面的计数器：

function* counterGenerator(max) {
  let count = 0;
  while (count < max) {
    yield count++;
  }
}
<p>const gen = counterGenerator(3);
for (const val of gen) {
console.log(val); // 输出 0, 1, 2
}</p>

登录后复制

生成器的优势在于代码简洁，状态自动维护，且天然支持惰性求值。

实际应用场景举例

利用生成器可以轻松实现一些实用功能：

无限序列：如斐波那契数列，只在需要时计算下一个值
分页数据流：逐页拉取 API 数据，对外表现为单一可迭代接口
异步迭代：结合 async/await 使用 async generator 处理异步任务队列

例如，生成斐波那契数列前 n 项：

function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}
<p>for (const num of fibonacci()) {
if (num > 100) break;
console.log(num);
}</p>

登录后复制

基本上就这些。掌握可迭代协议和生成器，能让代码更贴近数据流动的本质，写出既直观又高效的迭代逻辑。

以上就是JavaScript迭代器生成器_可迭代协议深入解析的详细内容，更多请关注php中文网其它相关文章！