JavaScript自定义迭代器方法解析

JavaScript迭代器是一种按需遍历数据的灵活机制，核心在于实现符合迭代协议的[Symbol.iterator]方法——它需返回一个拥有next()方法的对象，每次调用返回{value, done}结构，精准控制遍历节奏；文章不仅详解了手动构建迭代器的关键细节（如done语义、return()/throw()可选支持），更强调生成器函数（function*）作为最简洁高效的自定义方式，并通过对象键值排序遍历、数字范围生成等实用示例，清晰展现如何让任意对象变身可迭代对象，助你轻松写出内存友好、语义明确、与for...of和展开运算符无缝协作的现代JavaScript遍历逻辑。

迭代器是 JavaScript 中一种统一遍历数据结构的机制，它允许你按需逐个获取集合中的值，而无需一次性加载全部内容。核心在于实现 [Symbol.iterator] 方法，返回一个具有 next() 方法的对象，每次调用 next() 返回 { value, done } 形式的对象。

迭代器的基本结构

一个合法的迭代器对象必须满足：

• next() 方法必须存在，且每次调用返回 { value: any, done: boolean }
• done: true 表示遍历结束，之后的 next() 调用仍应返回 { value: undefined, done: true }
• 可选地支持 return()（用于提前终止）和 throw()（用于错误注入），但非必需

为普通对象添加自定义迭代

默认情况下，普通对象不可被 for...of 遍历。只需在对象上部署 [Symbol.iterator] 方法即可：

示例：让对象按属性名顺序迭代键值对

const obj = { a: 1, b: 2, c: 3 };
obj[Symbol.iterator] = function* () {
  for (const key of Object.keys(this).sort()) {
    yield [key, this[key]];
  }
};
for (const [k, v] of obj) {
console.log(k, v); // 'a' 1, 'b' 2, 'c' 3
}

用生成器函数快速创建迭代器

生成器函数（function*）天然返回符合迭代器协议的对象，是最简洁的自定义方式：

• 函数体中用 yield 暂停并产出值
• 每次调用 next() 从上次暂停处继续执行
• 函数返回后自动设 done: true

示例：实现一个范围迭代器

function* range(start, end) {
  for (let i = start; i const iter = range(2, 5);
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log([...range(0, 3)]); // [0, 1, 2]

迭代器与可迭代协议的区别

注意两个概念不等价：

• 迭代器：是那个有 next() 方法的对象（如 range(0,3) 的返回值）
• 可迭代对象：是实现了 [Symbol.iterator] 方法的对象（如数组、字符串、或上面加了该方法的 obj）
• 所有可迭代对象可通过 for...of、展开运算符、Array.from() 等使用；迭代器本身通常只直接调用 next()

基本上就这些。自定义迭代不复杂但容易忽略协议细节，关键是守住 next() 的返回格式和 done 的语义。

本篇关于《JavaScript自定义迭代器方法解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！