javascript迭代器是什么_如何自定义可迭代对象？_网络技术

javascript迭代器是什么_如何自定义可迭代对象？

发布时间 - 2026-01-10 00:00:00 点击率：次

JavaScript迭代器本质是具有next()方法的对象，每次调用返回{value: ..., done: true|false}；它不存储数据，只按需产出值；原生可迭代对象通过[Symbol.iterator]()提供该迭代器。

JavaScript 迭代器本质是啥？

迭代器不是语法糖，也不是新数据类型，而是一个**有 next() 方法的对象**，每次调用返回形如 { value: ..., done: true|false } 的结果。它本身不存储数据，只负责按需“吐”出下一个值。数组、字符串、Map 等原生可迭代对象背后都封装了这样的迭代器——但你调用 for...of 时，引擎自动调用其 [Symbol.iterator]() 方法拿到这个迭代器对象。

怎么让一个对象支持 `for...of`？

只需在对象上定义 [Symbol.iterator] 方法，且该方法必须返回一个符合迭代器协议的对象（即带 next() 的对象）。注意：不是返回值，而是返回一个迭代器实例。

[Symbol.iterator] 是一个方法，不能是箭头函数（否则无法用 this）
返回的迭代器对象里，next() 必须是函数，且每次调用应推进内部状态
如果想多次遍历（比如两次 for...of），[Symbol.iterator] 每次都得返回**新**的迭代器，不能复用同一个

const counter = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    const { to } = this;
    return {
      next() {
        if (current <= to) {
          return { value: current++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (const num of counter) {
  console.log(num); // 1, 2, 3
}

为什么自定义迭代器常配合生成器函数？

手写 next() 容易出错，尤其涉及异步、暂停、复杂状态时。function* 生成器函数天然返回符合协议的迭代器，且能用 yield 声明式地控制产出逻辑，大幅降低出错概率。

生成器函数体内，yield 表达式的值就是 next().value
生成器函数执行后不立即运行，只返回迭代器；每次 next() 才执行到下一个 yield
若对象需要支持多次遍历，[Symbol.iterator] 仍需每次调用生成器函数（即每次 return myGenerator()）

const range = {
  from: 10,
  to: 12,
  *[Symbol.iterator]() {
    for (let i = this.from; i <= this.to; i++) {
      yield i;
    }
  }
};

[...range] // [10, 11, 12]

容易被忽略的关键细节

很多人以为只要加了 [Symbol.iterator] 就万事大吉，但实际踩坑点很具体：

done: true 后再调 next()，value 应为 undefined（规范要求），但手写时容易漏掉或返回旧值
迭代器必须可“重置”：for...of、Array.from()、展开运算符等都会重新调用 [Symbol.iterator]，所以不能把状态存在对象自身上（除非你明确只允许单次遍历）
异步迭代器要用 [Symbol.asyncIterator]，和同步迭代器完全隔离；混用会静默失败
某些工具（如 Babel 转译老环境）可能不自动 polyfill Symbol.iterator，需确认目标环境支持或引入 core-js

# javascript # java # 可迭代对象

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：VS Code与AI如何重塑现代软件开发流程

下一篇：Edge浏览器IE模式怎么开启_让Edge兼容旧版网站教程【

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher