可迭代协议要求对象实现Symbol.iterator方法,返回遵循迭代器协议的迭代器;2. 迭代器协议要求对象具有next()方法,返回包含value和done属性的对象;3. 二者共同支持for...of、扩展运算符等语法,使数组、字符串及自定义对象可被遍历。

JavaScript 中的遍历机制建立在两个核心协议之上:可迭代协议(Iterable Protocol)和迭代器协议(Iterator Protocol)。这两个协议共同支撑了语言中 for...of 循环、扩展运算符、解构赋值等语法的实现。理解它们有助于深入掌握 JavaScript 的数据遍历逻辑。
可迭代协议(Iterable Protocol)
一个对象如果实现了 Symbol.iterator 方法,就被认为是可迭代的。这个方法必须返回一个迭代器对象,即遵循迭代器协议的对象。当使用 for...of 遍历数组、字符串、Map 等原生类型时,JavaScript 引擎会自动调用该对象的 Symbol.iterator 方法获取迭代器。
例如,数组是原生可迭代对象:
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
iterator.next(); // { value: 1, done: false }
iterator.next(); // { value: 2, done: false }
任何自定义对象只要实现 Symbol.iterator 方法,也可以被 for...of 使用:
立即学习“Java免费学习笔记(深入)”;
const myIterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
for (const value of myIterable) {
console.log(value); // 输出 1, 2, 3
}
迭代器协议(Iterator Protocol)
迭代器是一个具有 next() 方法的对象,该方法返回一个包含 value 和 done 属性的结果对象。
- value:当前迭代的值,可以是任意类型。
- done:布尔值,表示迭代是否完成。为 true 时表示遍历结束。
迭代器本身也通常是可迭代的,只需在返回的对象上实现 [Symbol.iterator]() => this,这样它就能被 for...of 正常处理。
const counter = {
current: 0,
end: 3,
next() {
if (this.current < this.end) {
return { value: ++this.current, done: false };
} else {
return { done: true };
}
},
[Symbol.iterator]() {
return this;
}
};
for (const num of counter) {
console.log(num); // 输出 1, 2, 3
}
原生支持可迭代的对象
以下内置类型默认实现了 Symbol.iterator,可以直接用于 for...of 或扩展运算符:
- Array
- String
- TypedArray(如 Uint8Array)
- Map
- Set
- arguments 对象
- DOM 集合(如 NodeList)部分支持
例如:
const str = "hi"; [...str]; // ['h', 'i']const map = new Map([['a', 1], ['b', 2]]); for (const [key, value] of map) { console.log(key, value); // a 1, b 2 }
生成器函数与迭代器
生成器函数(function*)是创建迭代器最简便的方式。它会自动返回一个符合迭代器协议的对象,无需手动实现 next() 和 done 逻辑。
function* idGenerator() {
let id = 1;
while (true) {
yield id++;
}
}
const gen = idGenerator();
gen.next().value; // 1
gen.next().value; // 2
生成器函数中的 yield 暂停执行并返回值,下次调用 next() 时从暂停处继续,非常适合实现惰性求值和无限序列。
基本上就这些。理解可迭代与迭代器协议,能让你更清楚 for...of 背后发生了什么,也能写出更灵活的数据结构。不复杂但容易忽略细节。










