分类：js
在 JavaScript 的世界里，for...of 循环以其简洁优雅的语法赢得了无数开发者的青睐。然而，这个看似简单的语法糖背后，隐藏着一套精心设计的协议体系——迭代器协议与可迭代协议。理解这套设计哲学，不仅能让我们写出更灵活的代码，更能窥见 JavaScript 语言设计者对抽象与统一的深刻思考。
从 for 循环到 for…of 的进化
在 ES6 之前，遍历数据的方式可谓五花八门：数组用 for 循环或 forEach，对象用 for...in，类数组对象则需要手动转换。这种碎片化的遍历方式不仅增加了认知负担，还容易引发错误——比如 for...in 会遍历原型链上的可枚举属性，而 forEach 无法中途跳出循环。
ES6 引入的 for...of 试图终结这种混乱。它的设计目标很明确：为所有可遍历的数据结构提供统一的遍历接口。无论是数组、字符串、Map、Set，还是自定义对象，只要遵循特定的协议，就能被 for...of 消费。
那么，这个"特定的协议"究竟是什么？
可迭代协议：定义"可被遍历"的能力
可迭代协议的核心非常简单：一个对象只要拥有 Symbol.iterator 方法，它就是可迭代的。这个方法必须返回一个迭代器对象。
const iterable = {
[Symbol.iterator]() {
// 返回一个迭代器对象
return {
next() {
// 返回 { value, done }
}
};
}
};
Symbol.iterator 是一个内置的 Symbol 值，它充当了"遍历接口"的约定键名。这种设计非常巧妙：Symbol 的唯一性保证了不会与普通属性名冲突，而将其作为方法名则形成了一种隐式的接口契约。
JavaScript 中的内置可迭代对象包括：Array、String、Map、Set、TypedArray、函数的 arguments 对象，以及 NodeList 等 DOM 集合。这意味着它们都实现了 Symbol.iterator 方法。
迭代器协议：定义"如何遍历"
迭代器协议规定了迭代器对象的行为：必须实现一个 next() 方法，每次调用返回一个包含 value 和 done 两个属性的对象。
value：当前迭代的值done：布尔值，表示迭代是否结束
当 done 为 true 时，value 通常为 undefined（虽然规范允许有值，但会被忽略）。
function createIterator(arr) {
let index = 0;
return {
next() {
if (index < arr.length) {
return { value: arr[index++], done: false };
}
return { value: undefined, done: true };
}
};
}
这个协议的精妙之处在于它的状态性：迭代器本身维护遍历状态，每次调用 next() 推进一次。这种设计将"遍历逻辑"与"数据结构"解耦，使得同一个数据结构可以同时拥有多个独立的迭代器，互不干扰。
手动实现一个可迭代对象
理解了两个协议后，我们可以为自定义对象赋予遍历能力。假设我们要创建一个表示"范围"的对象：
class Range {
constructor(start, end) {
this.start = start;
this.end = end;
}
[Symbol.iterator]() {
let current = this.start;
const end = this.end;
return {
next() {
if (current <= end) {
return { value: current++, done: false };
}
return { value: undefined, done: true };
}
};
}
}
const range = new Range(1, 5);
console.log([...range]); // [1, 2, 3, 4, 5]
for (const num of range) {
console.log(num); // 1, 2, 3, 4, 5
}
注意这里用闭包维护了 current 状态，每次调用 Symbol.iterator 都会创建一个全新的迭代器。这解释了为什么 for...of 可以重复遍历同一个对象——每次循环都会调用 Symbol.iterator 获取新的迭代器。
生成器：迭代器的语法糖
手动实现迭代器虽然可行，但写起来颇为繁琐。ES6 同时引入的生成器函数（Generator）正是为了解决这个问题：
class Range {
constructor(start, end) {
this.start = start;
this.end = end;
}
*[Symbol.iterator]() {
for (let i = this.start; i <= this.end; i++) {
yield i;
}
}
}
生成器函数执行后返回一个生成器对象，它天然实现了迭代器协议。yield 关键字则充当了 next() 方法中返回值的角色。这种写法不仅更简洁，还让遍历逻辑的编写变得像写普通函数一样自然。
for…of 的运作机制
现在我们可以完整地解释 for...of 的执行过程：
- 调用对象的
Symbol.iterator方法，获取迭代器 - 反复调用迭代器的
next()方法 - 每次将返回对象的
value赋给循环变量 - 当
done为true时，终止循环
如果对象没有 Symbol.iterator 方法，for...of 会抛出 TypeError。这也是为什么普通对象不能直接使用 for...of 的原因——它们默认没有实现可迭代协议。
设计哲学：协议优于继承
这套迭代机制背后体现了 JavaScript 一贯的设计哲学：基于协议（Protocol）的鸭子类型。
与 Java 的 Iterable 接口不同，JavaScript 不要求对象继承特定的基类。任何对象，只要实现了 Symbol.iterator 方法，就被视为可迭代的。这种"能力即身份"的设计带来了极大的灵活性：
- 跨类型统一：数组、字符串、Map、Set 共享同一套遍历语法
- 用户可扩展：自定义对象可以无缝接入语言内置的遍历机制
- 解耦与组合：迭代器将遍历逻辑从数据结构中抽离，便于复用和组合
更进一步，迭代器协议还催生了惰性求值的能力。生成器可以表示无限序列，因为值只在需要时才被计算：
function* naturals() {
let n = 1;
while (true) {
yield n++;
}
}
const gen = naturals();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
// 可以永远调用下去
这种"按需计算"的模式在处理大数据流、无限序列时尤为强大，也是函数式编程中惰性求值思想的体现。
结语
for...of 的优雅并非偶然，而是建立在迭代器协议与可迭代协议这两块基石之上。可迭代协议定义了"什么可以被遍历"，迭代器协议定义了"如何遍历"，而 Symbol.iterator 则充当了两者之间的桥梁。
理解这套设计，不仅让我们能够为自定义数据结构赋予遍历能力，更让我们体会到 JavaScript 语言设计中的核心智慧：通过最小化的协议约定，实现最大化的表达自由。当你下次写下 for...of 时，或许会对这行简单的代码多一分敬意——它背后承载的，是一套精心构建的抽象体系。
未经允许不得转载：任鹏个人博客 » JavaScript 迭代器与可迭代协议：for…of 背后的设计哲学
