JS `Symbol.iterator`：自定义对象的迭代行为与 `for…of` 循环

各位听众，大家好！今天咱们来聊聊 JavaScript 里一个有点神秘，但又非常实用的东西：Symbol.iterator。这玩意儿关系到你的自定义对象能不能用 for...of 循环，听起来是不是瞬间高大上了？别怕，咱们用大白话把它讲透。

开场白：迭代是个啥？

想象一下，你有一堆苹果，你想一个一个地拿出来吃。这个“一个一个地拿出来”的过程，就有点像迭代。在编程世界里，迭代就是按某种顺序访问一个集合中的元素。

JavaScript 提供了多种迭代的方式，比如 for 循环，while 循环，forEach 方法等等。但是，这些方法对于某些数据结构（比如数组）来说很方便，对于另一些数据结构（比如自定义对象）来说，就有点力不从心了。

for...of：为迭代而生

for...of 循环是 ES6 引入的，专门用来迭代可迭代对象（iterable object）的。它的语法简洁明了：

for (const element of iterable) {
  // 对 element 做一些事情
}

但是，问题来了：哪些东西是“可迭代对象”呢？

JavaScript 内置的一些类型天生就是可迭代的，比如：

数组（Array）
字符串（String）
Map
Set
arguments 对象
NodeList 等 DOM 集合

这些东西可以直接用 for...of 循环。但是，如果你想让你的自定义对象也能用 for...of 循环，那就需要用到 Symbol.iterator 了。

Symbol.iterator：迭代的钥匙

Symbol.iterator 是一个特殊的 symbol 值，它被用作一个方法的名字。如果一个对象拥有一个名为 Symbol.iterator 的方法，那么它就被认为是可迭代的。

这个方法必须返回一个迭代器对象（iterator object）。迭代器对象必须有一个 next() 方法，这个 next() 方法返回一个对象，包含两个属性：

value：当前迭代的值
done：一个布尔值，表示迭代是否完成

简单来说，Symbol.iterator 就像一把钥匙，告诉 for...of 循环： "嘿，我知道怎么迭代我的对象，你用我给你的迭代器就行了！"

动手实践：让你的对象可迭代

咱们来创建一个简单的对象，让它变得可迭代。假设我们有一个 Team 对象，它包含一个队员的列表。

class Team {
  constructor(members) {
    this.members = members;
  }
}

现在，我们想让 Team 对象可以用 for...of 循环来遍历队员。咱们需要给 Team 对象添加一个 Symbol.iterator 方法。

class Team {
  constructor(members) {
    this.members = members;
  }

  [Symbol.iterator]() {
    let index = 0;
    const members = this.members;

    return {
      next: () => {
        if (index < members.length) {
          return { value: members[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
}

让我们来解读一下这段代码：

[Symbol.iterator]() { ... }: 这定义了一个名为 Symbol.iterator 的方法。注意，[] 是必要的，因为 Symbol.iterator 是一个 symbol 值，而不是一个字符串。
let index = 0;: 我们用 index 变量来追踪当前迭代的队员的索引。
const members = this.members;: 为了方便起见，我们将 this.members 赋值给 members 变量。
return { next: () => { ... } };: Symbol.iterator 方法返回一个迭代器对象，这个迭代器对象有一个 next() 方法。
next: () => { ... }: next() 方法是迭代的核心。每次调用 next() 方法，它都会返回一个包含 value 和 done 属性的对象。
- if (index < members.length) { ... }: 如果还有队员没有被迭代，就返回一个包含当前队员信息的对象，并将 index 加 1。
- else { ... }: 如果所有队员都已经被迭代过了，就返回一个 done 属性为 true 的对象。

现在，我们可以使用 for...of 循环来遍历 Team 对象了：

const myTeam = new Team(['Alice', 'Bob', 'Charlie']);

for (const member of myTeam) {
  console.log(member); // 输出：Alice, Bob, Charlie
}

更简洁的写法：使用生成器函数

上面的代码虽然能实现迭代，但是稍微有点冗长。我们可以使用生成器函数（generator function）来简化代码。

生成器函数是一种特殊的函数，它可以暂停执行，并在稍后恢复执行。生成器函数使用 function* 语法来定义。

咱们用生成器函数来改写 Team 类的 Symbol.iterator 方法：

class Team {
  constructor(members) {
    this.members = members;
  }

  *[Symbol.iterator]() {
    for (const member of this.members) {
      yield member;
    }
  }
}

这段代码看起来是不是简洁多了？

*[Symbol.iterator]() { ... }: 我们使用 function* 语法来定义一个生成器函数。
yield member;: yield 关键字用于暂停生成器函数的执行，并将 member 的值作为迭代器的 value 属性返回。当 for...of 循环再次请求下一个值时，生成器函数会从上次暂停的地方继续执行。

生成器函数会自动创建一个迭代器对象，所以我们不需要手动创建迭代器对象和 next() 方法。

深入探讨：Symbol.iterator 的应用场景

除了让自定义对象可以用 for...of 循环之外，Symbol.iterator 还有一些其他的应用场景。

自定义迭代逻辑

你可以根据自己的需求，定义不同的迭代逻辑。比如，你可以让 Team 对象按照队员姓名的字母顺序进行迭代，或者只迭代特定类型的队员。

无限序列

你可以使用 Symbol.iterator 来创建无限序列。比如，你可以创建一个生成斐波那契数列的迭代器。

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; //为了防止无限循环，这里加个判断。
}

与扩展运算符（...）结合使用

扩展运算符可以将一个可迭代对象展开成一个数组。

const myTeam = new Team(['Alice', 'Bob', 'Charlie']);
const membersArray = [...myTeam]; // membersArray 现在是 ['Alice', 'Bob', 'Charlie']

Symbol.iterator 与其他迭代方式的比较

特性	`for...of` + `Symbol.iterator`	`for` 循环	`forEach` 方法
适用对象	可迭代对象	数组	数组
语法	简洁	略显繁琐	相对简洁
控制迭代	可以自定义	灵活	无法完全控制
中断迭代	可以使用 `break` 和 `continue`	可以	无法直接中断
异步迭代	可以	不支持	不支持

注意事项

确保你的 Symbol.iterator 方法返回一个有效的迭代器对象，并且 next() 方法的 done 属性在迭代完成后返回 true。否则，你的 for...of 循环可能会陷入无限循环。
Symbol.iterator 方法应该是一个纯函数，不应该修改对象的状态。迭代不应该产生副作用。
在某些旧版本的浏览器中，可能不支持 Symbol.iterator。你可以使用 polyfill 来提供兼容性。

总结

Symbol.iterator 是一个强大的工具，它可以让你自定义对象的迭代行为，并与 for...of 循环无缝集成。掌握 Symbol.iterator 可以让你写出更优雅、更易读的代码。

咱们今天就讲到这里。希望大家对 Symbol.iterator 有了更深入的了解。记住，编程就像谈恋爱，要多实践，才能真正理解它的美妙之处！下课！

发表回复 取消回复

发表回复取消回复