探索 Symbol.iterator 的奇妙世界：让你的 JavaScript 对象也能“走起来”
各位朋友，晚上好！今天咱们聊点儿有点儿意思的东西——Symbol.iterator。别听到“Symbol”就觉得高深莫测，其实它就像咱们生活中的“遥控器”，能控制你的 JavaScript 对象“走起来”，哦不，是“迭代起来”。
想象一下，你是一位玩具店的老板，店里堆满了各种各样的玩具：小汽车、毛绒熊、积木、拼图…… 你想把这些玩具一件一件地展示给顾客，吸引他们购买。 这时候，你需要一个“展示员”，他按照一定的顺序，把玩具一件件拿出来，让顾客看得清清楚楚。
在 JavaScript 的世界里，Symbol.iterator 就扮演着这个“展示员”的角色。它允许你定义一个对象的默认迭代器，换句话说，就是告诉 JavaScript： “嘿，伙计，如果你想遍历我的对象，就按照我定义的方式来！”
什么是迭代？ 别慌，咱们先聊聊“逛街”
“迭代”这个词听起来有点儿学术，但其实咱们每天都在进行迭代。 比如，你周末去逛街，一家一家店铺地逛，这就是一个迭代的过程。 每逛完一家店，你就“迭代”到了下一家店，直到你逛完了整条街。
在 JavaScript 中，迭代就是指按某种顺序访问一个集合中的每个元素。 比如，遍历一个数组，或者遍历一个字符串，都是迭代。
那么，为什么要让对象也能迭代呢？ 因为有些情况下，我们需要按照特定的方式来访问对象中的数据。 比如，你有一个表示书架的对象，书架上有很多书，你可能希望按照书名或者作者的顺序来遍历这些书。
Symbol.iterator： 赋予对象迭代的能力
Symbol.iterator 是一个特殊的 Symbol 值，它作为对象的属性名，定义了对象的默认迭代器。 简单来说，就是你给你的对象添加一个名为 Symbol.iterator 的属性，这个属性的值是一个函数，这个函数返回一个迭代器对象。
这个迭代器对象又是什么呢？ 它需要包含一个 next() 方法，这个方法负责返回下一个要迭代的值。 每次调用 next() 方法，它都会返回一个对象，包含两个属性：
value: 当前迭代到的值。done: 一个布尔值，表示迭代是否完成。如果为true，则表示已经迭代到了集合的末尾。
是不是有点儿绕？ 没关系，咱们来举个例子：
const myCollection = {
items: ['apple', 'banana', 'orange'],
[Symbol.iterator]: function() {
let index = 0;
return {
next: () => {
if (index < this.items.length) {
return { value: this.items[index++], done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
};
for (const item of myCollection) {
console.log(item); // 输出：apple, banana, orange
}在这个例子中，我们定义了一个名为 myCollection 的对象，它有一个 items 属性，是一个数组。 我们还定义了一个 Symbol.iterator 属性，它的值是一个函数。
这个函数返回一个迭代器对象，这个迭代器对象有一个 next() 方法。 next() 方法会依次返回 items 数组中的元素，直到迭代到数组的末尾。
通过这个例子，我们可以看到，通过定义 Symbol.iterator 属性，我们可以让 myCollection 对象可以被 for...of 循环遍历。
Symbol.iterator 的应用场景：让你的数据结构更灵活
Symbol.iterator 在很多场景下都非常有用。 比如，你可以用它来：
- 自定义数据结构的迭代方式： 比如，你可以定义一个二叉树对象，并使用
Symbol.iterator来实现中序遍历、前序遍历或者后序遍历。 - 创建无限序列： 比如，你可以定义一个斐波那契数列生成器，它可以无限地生成斐波那契数列的元素。
- 懒加载数据： 比如，你可以定义一个对象，它只在需要的时候才加载数据，而不是一次性加载所有数据。
场景一：模拟一个简单的队列
class Queue {
constructor() {
this.items = [];
}
enqueue(item) {
this.items.push(item);
}
dequeue() {
return this.items.shift();
}
isEmpty() {
return this.items.length === 0;
}
[Symbol.iterator]() {
let index = 0;
const items = this.items; // 缓存 items 数组
return {
next: () => {
if (index < items.length) {
return { value: items[index++], done: false };
} else {
return { value: undefined, done: true };
}
}
};
}
}
const myQueue = new Queue();
myQueue.enqueue('Task 1');
myQueue.enqueue('Task 2');
myQueue.enqueue('Task 3');
for (const task of myQueue) {
console.log(task); // 输出：Task 1, Task 2, Task 3
}这个例子中，我们定义了一个 Queue 类，它模拟了一个队列。 通过定义 Symbol.iterator 属性，我们可以使用 for...of 循环来遍历队列中的元素。 值得注意的是，我们缓存了 this.items 到 items 变量中，这避免了在 next 函数中重复访问 this.items，提升了性能。
场景二：生成斐波那契数列
const fibonacci = {
[Symbol.iterator]: () => {
let a = 0;
let b = 1;
return {
next: () => {
const value = a;
a = b;
b = value + b;
return { value: value, done: false };
}
};
}
};
let i = 0;
for (const num of fibonacci) {
console.log(num);
i++;
if(i > 10) break; // 只打印前10个
}在这个例子中，我们定义了一个 fibonacci 对象，它使用 Symbol.iterator 来生成斐波那契数列。 我们可以使用 for...of 循环来无限地遍历斐波那契数列的元素。 当然，为了避免无限循环，我们添加了一个 break 语句，只打印前 10 个元素。
Symbol.iterator 和 Generator 的完美结合：事半功倍
如果你觉得手动编写迭代器对象太麻烦，那么你可以使用 Generator 函数来简化这个过程。 Generator 函数是一种特殊的函数，它可以暂停执行，并在需要的时候恢复执行。
Generator 函数可以自动生成迭代器对象，你只需要在函数中使用 yield 关键字来返回每个要迭代的值。
咱们把上面的斐波那契数列的例子用 Generator 来改写一下：
const fibonacci = {
[Symbol.iterator]: function*() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
};
let i = 0;
for (const num of fibonacci) {
console.log(num);
i++;
if(i > 10) break; // 只打印前10个
}在这个例子中，我们使用 function* 关键字定义了一个 Generator 函数。 在函数中，我们使用 yield 关键字来返回每个斐波那契数列的元素。 Generator 函数会自动返回一个迭代器对象，所以我们不需要手动创建迭代器对象了。 代码是不是简洁了很多？
温馨提示：并非所有对象都需要迭代
虽然 Symbol.iterator 非常强大，但并不是所有对象都需要迭代。 只有当你的对象表示一个集合，并且你需要按照特定的方式来访问集合中的元素时，才需要使用 Symbol.iterator。
如果你的对象只是一个简单的键值对集合，那么你可以直接使用 Object.keys()、Object.values() 或者 Object.entries() 方法来遍历对象的属性。
总结：让你的 JavaScript 对象更具活力
Symbol.iterator 是一个非常强大的工具，它可以让你的 JavaScript 对象拥有迭代的能力，让你的数据结构更加灵活，让你的代码更加简洁。
希望通过今天的讲解，你对 Symbol.iterator 有了更深入的了解。 以后，当你需要遍历一个自定义的对象时，不妨考虑使用 Symbol.iterator 来实现。
记住，编程就像玩乐高积木，Symbol.iterator 就是一块特殊的积木，它可以让你构建出更复杂、更有趣的程序！ 祝你编程愉快！