迭代器协议与可迭代对象：`for…of` 循环的底层机制

好的，各位观众老爷们，今天咱们要聊一个听起来高深莫测，但实际上跟咱们日常编程息息相关的话题：迭代器协议与可迭代对象，以及它们背后的“神秘力量”—— for...of 循环。

别害怕，这玩意儿不是什么高维数学公式，也不是量子力学里的薛定谔方程。它就像咱们每天都要用的筷子🥢，简单易懂，但没有它，吃嘛嘛不香！

一、什么是“可迭代”？你是个合格的可迭代对象吗？

咱们先来聊聊什么是“可迭代”。想象一下，你手里拿着一串糖葫芦，你想把它一个一个吃掉，对吧？这个“一个一个吃”的过程，就是“迭代”。

在编程世界里，可迭代对象（Iterable） 就是那些能够被“一个一个取出元素”的对象。比如说：

数组（Array）: 这绝对是迭代界的扛把子，谁还没事儿遍历个数组呢？
字符串（String）: 虽然它看起来像一句话，但其实是由一个个字符组成的，所以也能被迭代。
Map 和 Set: 这俩家伙是 ES6 之后加入的新成员，它们也实现了迭代协议。
arguments 对象: 函数调用时传入的参数列表，虽然它长得像数组，但其实是个“伪数组”，也能被迭代。
NodeList 对象: DOM 元素集合，比如 document.querySelectorAll() 返回的结果。

那么，问题来了，怎么判断一个东西是不是可迭代对象呢？

别着急，JavaScript 给我们提供了一个“鉴定秘籍”：看它有没有 Symbol.iterator 属性。

Symbol.iterator 是一个特殊的 Symbol 值，它作为属性名，指向一个函数，这个函数返回一个迭代器对象。

可以把 Symbol.iterator 想象成一个“传送门”，它把你从可迭代对象送到了迭代器对象那里。

二、迭代器协议：你得按规矩办事儿！

既然有了传送门，那咱们就得了解一下“迭代器协议”。这就像进入一个国家要遵守它的法律一样，迭代器也必须遵守一定的规则。

迭代器协议规定，一个对象要成为迭代器，必须实现一个 next() 方法。这个 next() 方法负责返回一个包含两个属性的对象：

value: 当前迭代到的值。
done: 一个布尔值，表示迭代是否结束。true 表示迭代结束，false 表示还有更多元素。

咱们用一张表格来总结一下：

属性	类型	描述
`next()`	函数	迭代器的核心方法，负责返回下一个值和迭代状态。
`value`	任意类型	当前迭代到的值。
`done`	布尔值	表示迭代是否结束。

举个例子，咱们来手动创建一个迭代器，迭代一个简单的数组：

const myArray = [1, 2, 3];

// 创建一个迭代器对象
const myIterator = {
  index: 0,
  next: function() {
    if (this.index < myArray.length) {
      return {
        value: myArray[this.index++],
        done: false
      };
    } else {
      return {
        value: undefined,
        done: true
      };
    }
  }
};

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 }

看到了吗？每次调用 next() 方法，迭代器都会返回数组中的下一个元素，直到所有元素都被迭代完，done 属性变为 true。

三、 for...of 循环：优雅的迭代方式

现在，咱们终于要揭开 for...of 循环的神秘面纱了！ 🥁🥁🥁

for...of 循环是一种简洁、优雅的迭代方式，它可以遍历任何可迭代对象。

const myArray = [10, 20, 30];

for (const value of myArray) {
  console.log(value); // 10, 20, 30
}

这段代码是不是看起来非常简单明了？但你知道它背后发生了什么吗？

for...of 循环的底层机制：

获取迭代器： for...of 循环首先会调用可迭代对象的 Symbol.iterator 方法，获取一个迭代器对象。
循环调用 next()： 然后，它会不断地调用迭代器对象的 next() 方法，直到 done 属性变为 true。
提取 value： 每次调用 next() 方法，for...of 循环都会提取返回对象的 value 属性，并将其赋值给循环变量（比如上面的 value）。

可以把 for...of 循环想象成一个辛勤的“搬运工”，它不断地从迭代器那里取东西，然后把东西放到循环变量里，供你使用。 💪

四、为什么要有迭代器协议？

你可能会问：搞这么复杂干嘛？直接用索引不行吗？像数组那样，用 for (let i = 0; i < array.length; i++) 不香吗？

问得好！ 👏

使用索引确实是一种迭代方式，但它只适用于那些支持索引访问的数据结构，比如数组。

而迭代器协议提供了一种统一的、标准化的迭代方式，它可以应用于任何实现了该协议的对象。

这就意味着，无论你面对的是数组、字符串、Map、Set，还是自定义的可迭代对象，你都可以使用 for...of 循环来遍历它们，而不用关心它们的底层实现细节。

这种统一性大大提高了代码的可读性和可维护性。

五、自定义可迭代对象：打造你的专属迭代器

现在，咱们来玩点高级的！咱们来创建一个自定义的可迭代对象。

假设我们要创建一个 Range 类，它可以生成一个指定范围内的数字序列。

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  // 实现 Symbol.iterator 方法，返回一个迭代器对象
  [Symbol.iterator]() {
    let currentValue = this.start;
    const that = this; // 保存 this 上下文

    return {
      next() {
        if (currentValue <= that.end) {
          return {
            value: currentValue++,
            done: false
          };
        } else {
          return {
            value: undefined,
            done: true
          };
        }
      }
    };
  }
}

// 使用 Range 类
const myRange = new Range(1, 5);

for (const value of myRange) {
  console.log(value); // 1, 2, 3, 4, 5
}

在这个例子中，我们首先定义了一个 Range 类，并在其中实现了 Symbol.iterator 方法。

Symbol.iterator 方法返回一个迭代器对象，这个迭代器对象包含一个 next() 方法，负责生成范围内的数字。

有了 Symbol.iterator 方法，Range 类的实例就可以被 for...of 循环遍历了。

六、生成器函数：迭代器的“魔法工厂”

手动创建迭代器对象是不是有点麻烦？没关系，JavaScript 还为我们提供了一种更简洁的方式：生成器函数（Generator Function）。

生成器函数是一种特殊的函数，它可以暂停执行，并在稍后的某个时候恢复执行。

生成器函数使用 function* 语法定义，并使用 yield 关键字来产生值。

function* myGenerator(start, end) {
  let currentValue = start;
  while (currentValue <= end) {
    yield currentValue++;
  }
}

// 使用生成器函数
const myIterator = myGenerator(10, 15);

console.log(myIterator.next()); // { value: 10, done: false }
console.log(myIterator.next()); // { value: 11, done: false }
console.log(myIterator.next()); // { value: 12, done: false }
console.log(myIterator.next()); // { value: 13, done: false }
console.log(myIterator.next()); // { value: 14, done: false }
console.log(myIterator.next()); // { value: 15, done: false }
console.log(myIterator.next()); // { value: undefined, done: true }

看到了吗？生成器函数返回一个迭代器对象，我们可以像使用普通迭代器一样使用它。

更重要的是，我们可以直接将生成器函数赋值给 Symbol.iterator 属性，从而创建一个可迭代对象：

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  // 使用生成器函数实现 Symbol.iterator 方法
  *[Symbol.iterator]() {
    let currentValue = this.start;
    while (currentValue <= this.end) {
      yield currentValue++;
    }
  }
}

// 使用 Range 类
const myRange = new Range(20, 25);

for (const value of myRange) {
  console.log(value); // 20, 21, 22, 23, 24, 25
}

使用生成器函数，我们可以更简洁、更优雅地创建可迭代对象。

七、迭代器与异步编程：Async Iterators

在异步编程的世界里，我们经常需要处理异步数据流，比如从服务器获取数据，或者读取文件内容。

为了处理异步数据流，JavaScript 引入了异步迭代器（Async Iterator） 和 异步可迭代对象（Async Iterable）。

异步迭代器与普通迭代器类似，但它的 next() 方法返回一个 Promise 对象。

异步可迭代对象包含一个 Symbol.asyncIterator 方法，该方法返回一个异步迭代器。

我们可以使用 for await...of 循环来遍历异步可迭代对象：

async function* myAsyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

async function main() {
  for await (const value of myAsyncGenerator()) {
    console.log(value); // 1, 2, 3
  }
}

main();

for await...of 循环会等待每个 Promise 对象 resolve，然后提取它的值。

异步迭代器和异步可迭代对象为我们提供了一种处理异步数据流的强大工具。

八、总结：迭代器的“三板斧”

好了，各位观众老爷们，今天的“迭代器之旅”就到这里了。咱们来总结一下：

可迭代对象： 拥有 Symbol.iterator 属性的对象，可以通过 for...of 循环遍历。
迭代器协议： 规定了迭代器对象必须实现 next() 方法，该方法返回一个包含 value 和 done 属性的对象。
for...of 循环： 一种简洁、优雅的迭代方式，可以遍历任何可迭代对象。

掌握了这“三板斧”，你就能在 JavaScript 的世界里“迭代天下”了！ 🚀

最后，希望这篇文章能帮助你更好地理解迭代器协议与可迭代对象，并在实际编程中灵活运用它们。记住，编程不仅仅是写代码，更是一种艺术，一种创造！希望各位能在编程的道路上越走越远，写出更精彩的代码！感谢大家的观看！ 🙏

发表回复 取消回复

发表回复取消回复