各位观众老爷，晚上好！我是你们的老朋友，今晚咱们来聊聊JavaScript里一个挺有意思的东西：Iterator协议，以及它和for...of循环之间的那些不得不说的故事。
开场白：JavaScript世界里的寻宝游戏
想象一下，你是一名寻宝猎人，手头有一张藏宝图（某种数据结构），而藏宝图上并没有直接告诉你宝藏在哪里，而是告诉你怎么一步一步找到宝藏。这个“一步一步找到宝藏”的过程，在JavaScript的世界里，就有点像Iterator协议做的事情。它定义了一种标准的方式，让你可以遍历一个数据结构里的所有元素，就像寻宝一样，一步一步地找到你想要的宝贝。
什么是Iterator协议？
Iterator协议，简单来说，就是一套规则，告诉JavaScript引擎，一个对象要怎么才能被“迭代”（遍历）。这套规则的核心在于，一个对象必须提供一个next()方法。这个next()方法就像是寻宝图上的下一步指示，它会返回一个包含两个属性的对象：
value: 当前迭代到的元素的值，也就是你挖到的宝贝。done: 一个布尔值，表示迭代是否结束。如果为true，说明所有宝藏都找到了，寻宝结束；如果为false，说明还有宝贝等着你去挖。
让我们用代码来更直观地理解一下：
// 一个简单的数组
const myArray = [1, 2, 3];
// 创建一个迭代器
const myIterator = myArray[Symbol.iterator]();
console.log(myIterator.next()); // 输出: { value: 1, done: false }
console.log(myIterator.next()); // 输出: { value: 2, done: false }
console.log(myIterator.next()); // 输出: { value: 3, done: false }
console.log(myIterator.next()); // 输出: { value: undefined, done: true }在这个例子里，myArray[Symbol.iterator]()返回了一个迭代器对象。这个迭代器对象有一个next()方法，每次调用它，都会返回数组中的下一个元素，直到数组结束，done变为true。
Symbol.iterator：迭代器的“身份证”
你可能注意到了Symbol.iterator这个奇怪的东西。这玩意儿其实是一个特殊的Symbol，它就像一个身份证，告诉JavaScript引擎，这个对象可以被迭代。当JavaScript引擎看到一个对象有Symbol.iterator属性，并且这个属性的值是一个函数，那么它就知道可以调用这个函数来获取这个对象的迭代器。
自定义迭代器：打造你的专属寻宝图
Iterator协议的强大之处在于，你可以为任何对象自定义迭代器。这就像你可以自己绘制藏宝图，定义自己的寻宝规则。
const myObject = {
data: [ 'a', 'b', 'c' ],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.data.length) {
return { value: this.data[index++], done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
};
for (const item of myObject) {
console.log(item); // 输出: a, b, c
}在这个例子里，我们给myObject添加了一个Symbol.iterator属性，它的值是一个函数，这个函数返回一个迭代器对象。这个迭代器对象定义了next()方法，用于遍历myObject的data属性。
for...of循环：寻宝的自动化工具
现在，我们来聊聊for...of循环。for...of循环就像一个自动化的寻宝工具，它可以自动地调用迭代器的next()方法，直到done为true，然后把每次迭代到的value赋值给循环变量。
const myArray = ['apple', 'banana', 'cherry'];
for (const fruit of myArray) {
console.log(fruit); // 输出: apple, banana, cherry
}在这个例子里，for...of循环会自动地调用myArray的迭代器的next()方法，并将每次迭代到的水果赋值给fruit变量。
for...of循环的底层原理：Iterator协议的幕后英雄
for...of循环之所以能够遍历数组、字符串、Map、Set等数据结构，就是因为这些数据结构都实现了Iterator协议。当for...of循环遇到一个对象时，它会首先检查这个对象是否具有Symbol.iterator属性。如果有，它就调用这个属性对应的函数，获取迭代器对象，然后不断地调用迭代器的next()方法，直到done为true。
让我们用伪代码来模拟一下for...of循环的底层实现：
function forOf(iterable, callback) {
// 1. 获取迭代器
const iterator = iterable[Symbol.iterator]();
// 2. 循环调用next()方法，直到done为true
let result = iterator.next();
while (!result.done) {
// 3. 执行回调函数
callback(result.value);
// 4. 获取下一个结果
result = iterator.next();
}
}
// 使用自定义的forOf函数
const myArray = ['apple', 'banana', 'cherry'];
forOf(myArray, (fruit) => {
console.log(fruit); // 输出: apple, banana, cherry
});Iterator协议的应用场景：无限的可能性
Iterator协议的应用场景非常广泛。除了遍历常见的数据结构之外，它还可以用于：
- 生成器函数： 生成器函数可以创建迭代器，用于生成无限序列。
- 异步迭代： 异步迭代器可以用于处理异步数据流，例如从服务器获取数据。
- 自定义数据结构： 你可以为任何自定义数据结构实现Iterator协议，使其可以被
for...of循环遍历。
一些常见的实现Iterator协议的数据结构
为了更清晰地理解哪些数据结构天生自带“寻宝图”，我们列个表格：
| 数据结构 | 是否实现Iterator协议 | 迭代器返回的值 |
|---|---|---|
| Array | 是 | 数组的元素 |
| String | 是 | 字符串的字符 |
| Map | 是 | [key, value]数组 |
| Set | 是 | Set中的元素 |
| TypedArray | 是 | TypedArray的元素 |
| arguments对象 | 是 | arguments对象中的参数 |
| NodeList | 是 | NodeList中的节点 |
Iterator vs Iterable：别傻傻分不清楚
这里要特别强调两个概念：Iterator和Iterable。
- Iterable (可迭代对象): 是指实现了
Symbol.iterator方法的对象。换句话说，它是一个知道如何创建迭代器的对象。你可以把它想象成藏宝图本身。 - Iterator (迭代器): 是指拥有
next()方法的对象。它负责实际的迭代过程，一步一步地返回下一个元素。你可以把它想象成拿着藏宝图寻宝的寻宝猎人。
Iterable是“源”，Iterator是“流”。 Iterable负责提供Iterator，Iterator负责产生值。
Generator函数与Iterator：更优雅的寻宝方式
Generator函数是ES6引入的一个强大的特性，它可以更简洁地创建迭代器。Generator函数使用function*语法定义，并且可以使用yield关键字来暂停函数的执行，并返回一个值。
function* myGenerator() {
yield 1;
yield 2;
yield 3;
}
const myIterator = myGenerator();
console.log(myIterator.next()); // 输出: { value: 1, done: false }
console.log(myIterator.next()); // 输出: { value: 2, done: false }
console.log(myIterator.next()); // 输出: { value: 3, done: false }
console.log(myIterator.next()); // 输出: { value: undefined, done: true }在这个例子里，myGenerator()函数返回一个迭代器对象。每次调用next()方法，函数都会从上次yield的位置继续执行，直到遇到下一个yield或函数结束。
Generator函数可以更方便地创建复杂的迭代器，例如无限序列：
function* infiniteSequence() {
let i = 0;
while (true) {
yield i++;
}
}
const iterator = infiniteSequence();
console.log(iterator.next().value); // 输出: 0
console.log(iterator.next().value); // 输出: 1
console.log(iterator.next().value); // 输出: 2
// ...无限循环Iterator协议的优势：标准、灵活、高效
Iterator协议的优势在于：
- 标准化： 它提供了一种标准的方式来遍历数据结构，使得不同的数据结构可以使用相同的
for...of循环进行遍历。 - 灵活性： 你可以为任何对象自定义迭代器，以满足不同的需求。
- 高效性： 迭代器可以按需生成值，而不是一次性生成所有值，从而节省内存空间。特别是在处理大数据集时，这一点尤为重要。
总结：掌握寻宝秘籍，玩转JavaScript
Iterator协议是JavaScript中一个非常重要的概念，它为for...of循环提供了底层支持，并使得我们可以方便地遍历各种数据结构。掌握Iterator协议，就像掌握了寻宝的秘籍，可以让你在JavaScript的世界里自由地探索，找到你想要的宝贝。
最后的彩蛋：一个更复杂的例子
为了加深理解，我们来看一个更复杂的例子，模拟一个分页数据迭代器：
class PagedData {
constructor(data, pageSize) {
this.data = data;
this.pageSize = pageSize;
this.currentPage = 0;
}
[Symbol.iterator]() {
let currentPage = 0;
const pageSize = this.pageSize;
const data = this.data;
return {
next: () => {
const startIndex = currentPage * pageSize;
const endIndex = Math.min(startIndex + pageSize, data.length);
if (startIndex >= data.length) {
return { value: undefined, done: true };
}
const pageData = data.slice(startIndex, endIndex);
currentPage++;
return { value: pageData, done: false };
}
};
}
}
const allData = Array.from({ length: 55 }, (_, i) => `Item ${i + 1}`); // 创建55个元素的数据
const pagedData = new PagedData(allData, 10); // 每页10个元素
for (const page of pagedData) {
console.log("Page:", page); // 打印每一页的数据
}这个例子中，PagedData类实现了Symbol.iterator方法，返回一个迭代器，每次迭代返回一页数据。这在处理大量数据时非常有用，可以避免一次性加载所有数据，提高性能。
好了，今天的讲座就到这里。希望大家有所收获，下次再见！祝大家编程愉快，Bug少一点，头发多一点！