JavaScript迭代协议是一套约定:对象需实现[Symbol.iterator]方法并返回符合迭代器协议的对象;迭代器协议要求next()方法返回{value: any, done: boolean}结构,done为true时结束迭代。

JavaScript 迭代协议不是某个 API 或函数,而是一套约定:只要对象实现了 [Symbol.iterator] 方法,并返回一个符合迭代器协议的对象,它就能被 for...of、Array.from、展开运算符(...)等消费。
什么是迭代器协议?
迭代器协议规定:一个迭代器对象必须有 next() 方法,该方法返回形如 { value: any, done: boolean } 的对象。当 done 为 true 时,迭代结束。
常见错误是只实现 next(),却忘了它必须返回正确结构——比如返回 { v: 123 } 或 undefined,会导致 for...of 报错 TypeError: Iterator result undefined is not an object。
示例(手动构造一个合法迭代器):
立即学习“Java免费学习笔记(深入)”;
const iterator = {
i: 0,
next() {
if (this.i < 3) {
return { value: this.i++, done: false };
}
return { value: undefined, done: true };
}
};
// 可以用 for...of 消费(但注意:它本身还不是可迭代对象)
for (const x of iterator) console.log(x); // ❌ TypeError:iterator 不可迭代
如何让对象可迭代?
关键是在对象上定义 [Symbol.iterator] 方法,且该方法必须返回一个迭代器对象(即带 next() 的对象)。
-
[Symbol.iterator]必须是函数,不能是箭头函数(否则无法用this绑定上下文) - 每次调用
[Symbol.iterator]应返回**新迭代器**,否则多次遍历会相互干扰(比如两个for...of同时跑,共享同一个计数器) - 若想复用已有数组/字符串的迭代行为,可直接
return arr[Symbol.iterator]()
示例(让自定义对象支持 for...of):
const range = {
from: 1,
to: 3,
[Symbol.iterator]() {
let current = this.from;
return {
next: () => {
if (current <= this.to) {
return { value: current++, done: false };
}
return { value: undefined, done: true };
}
};
}
};
for (const n of range) console.log(n); // 1, 2, 3
console.log([...range]); // [1, 2, 3]
哪些内置类型默认可迭代?
数组、字符串、Map、Set、TypedArray、arguments 对象、NodeList 都原生实现了 [Symbol.iterator]。但普通对象({})、Object.prototype、JSON、Function 等不支持。
常见误区:
-
for...in遍历的是对象的**可枚举属性名**,和迭代协议无关;它不保证顺序,也不处理 Symbol 键 -
Object.keys(obj)返回数组,所以能展开,但obj本身仍不可迭代 - 给普通对象加
[Symbol.iterator]不会影响for...in行为,两者完全独立
性能提示:如果只是临时需要遍历键或值,优先用 Object.keys(obj) + for...of,而不是给对象挂迭代器——后者会污染实例,且多数场景没必要。
Generator 函数是最简捷的实现方式
不用手写 next() 和状态管理,用 function* 自动返回符合协议的迭代器。
注意点:
- Generator 函数本身不是迭代器,调用后返回的才是
- 不能在 generator 内部用
this访问外层对象(除非显式.bind()),因为 generator 函数体不绑定this - generator 支持
yield*委托,适合组合多个可迭代源
示例(更简洁安全的 range 实现):
const range = {
from: 1,
to: 3,
*[Symbol.iterator]() {
for (let i = this.from; i <= this.to; i++) {
yield i;
}
}
};
console.log([...range]); // [1, 2, 3]
最易被忽略的一点:迭代协议是“按需计算”的,next() 只在每次循环时才执行。这意味着你可以用它表达无限序列(如自然数)、延迟加载的数据流,甚至 I/O 流——但也要小心,忘记设终止条件会导致死循环。











