迭代器（Iterators）与可迭代协议（Iterable Protocol） (ES6+)

欢迎来到 JavaScript 的迭代世界

大家好！今天我们要一起探讨的是 ES6+ 中非常重要的两个概念：迭代器（Iterators） 和 可迭代协议（Iterable Protocol）。如果你曾经在代码中使用过 for...of 循环、扩展运算符（...）、解构赋值，或者 Array.from() 等方法，那你其实已经在不知不觉中与这两个概念打交道了！

什么是迭代器？

想象一下，你有一个装满糖果的盒子，你想一个一个地拿出来吃。你会怎么做？你可能会每次从盒子里拿出一颗糖果，吃完后再拿一颗，直到盒子空了为止。这个过程其实就是一个“迭代”的过程。

在 JavaScript 中，迭代器 就是帮助我们一次又一次地访问集合中的元素的工具。它就像一个“糖果分发机”，每次调用时都会返回下一个元素，直到没有更多元素为止。

迭代器的基本结构

每个迭代器都是一个对象，它必须实现一个 next() 方法。这个方法会返回一个包含两个属性的对象：

value: 当前的元素值。
done: 一个布尔值，表示是否已经遍历完所有元素。

const myIterator = {
  next: function() {
    // 返回一个对象，包含 value 和 done
    return { value: 'candy', done: false };
  }
};

console.log(myIterator.next()); // { value: 'candy', done: false }

当然，上面的例子只是一个简单的模拟。真实的迭代器通常会根据某种规则来决定 value 和 done 的值。

创建一个自定义迭代器

让我们来创建一个更实用的迭代器，比如一个可以遍历数组的迭代器。我们可以手动实现一个简单的数组迭代器：

function createArrayIterator(arr) {
  let index = 0;
  return {
    next: function() {
      if (index < arr.length) {
        return { value: arr[index++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
}

const myArray = [1, 2, 3];
const iterator = createArrayIterator(myArray);

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

在这个例子中，我们通过 createArrayIterator 函数创建了一个迭代器，它可以逐个返回数组中的元素，直到遍历完所有元素。

可迭代协议（Iterable Protocol）

现在我们已经了解了迭代器的工作原理，接下来要介绍的是 可迭代协议。简单来说，可迭代协议就是一种约定，它允许某些对象可以通过 for...of 循环、扩展运算符等语法糖来遍历其内部的元素。

为了使一个对象成为可迭代的，它必须实现一个特殊的 [Symbol.iterator] 方法。这个方法应该返回一个迭代器对象。也就是说，当 JavaScript 遇到一个可迭代对象时，它会自动调用这个对象的 [Symbol.iterator] 方法，并使用返回的迭代器来遍历元素。

使对象可迭代

我们可以通过实现 [Symbol.iterator] 方法来让自定义对象变得可迭代。来看一个例子：

const myObject = {
  items: ['apple', 'banana', 'cherry'],
  [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...of 来遍历 myObject
for (const item of myObject) {
  console.log(item);
}
// 输出:
// apple
// banana
// cherry

在这个例子中，我们为 myObject 实现了 [Symbol.iterator] 方法，使得它可以通过 for...of 循环来遍历 items 数组中的元素。

内置的可迭代对象

JavaScript 中有许多内置对象已经实现了可迭代协议，因此你可以直接使用 for...of 或其他相关语法来遍历它们。以下是一些常见的内置可迭代对象：

对象类型	说明
`Array`	数组是最常见的可迭代对象，可以直接用 `for...of` 遍历。
`String`	字符串也可以被遍历，每次返回一个字符。
`Map`	`Map` 对象可以遍历其键值对。
`Set`	`Set` 对象可以遍历其唯一值。
`TypedArray`	类型化数组（如 `Uint8Array`）也可以被遍历。
`NodeList`	DOM 查询结果（如 `document.querySelectorAll`）返回的 `NodeList` 也是可迭代的。

例如，我们可以轻松地遍历一个字符串：

const str = 'hello';
for (const char of str) {
  console.log(char);
}
// 输出:
// h
// e
// l
// l
// o

扩展运算符与可迭代对象

除了 for...of 循环，扩展运算符（...）也可以用于可迭代对象。它会将可迭代对象展开为一系列单独的元素。例如：

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5, 6];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

const set = new Set([1, 2, 3]);
const arrayFromSet = [...set];
console.log(arrayFromSet); // [1, 2, 3]

解构赋值与可迭代对象

解构赋值也可以与可迭代对象一起使用。例如，我们可以从数组或字符串中提取多个值：

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

const [char1, char2, char3] = 'abc';
console.log(char1); // 'a'
console.log(char2); // 'b'
console.log(char3); // 'c'

生成器函数（Generators）

说到迭代器，不得不提一下 生成器函数。生成器函数是一种特殊的函数，它可以暂停执行并在需要时恢复。生成器函数返回一个生成器对象，该对象本身就是一个迭代器。

生成器函数的定义方式与普通函数类似，但使用了 function* 语法，并且可以在函数体内使用 yield 关键字来暂停执行并返回一个值。

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

生成器函数的一个重要特性是它可以在 for...of 循环中直接使用：

for (const num of numberGenerator()) {
  console.log(num);
}
// 输出:
// 1
// 2
// 3

生成器函数还可以与其他异步操作结合使用，比如 async/await，这在处理复杂的异步流程时非常有用。

总结

今天我们深入了解了 JavaScript 中的 迭代器 和 可迭代协议。通过这些概念，我们可以更灵活地遍历和操作各种数据结构。无论是自定义对象还是内置对象，只要实现了可迭代协议，就可以享受到 for...of、扩展运算符、解构赋值等强大功能带来的便利。

希望这篇文章能让你对迭代器和可迭代协议有更清晰的理解。下次当你使用 for...of 或扩展运算符时，不妨想想背后的迭代器机制，也许你会发现更多的可能性！

如果你有任何问题或想法，欢迎在评论区留言讨论！😊

引用：

MDN Web Docs: Iterator protocol
MDN Web Docs: for…of
MDN Web Docs: Generators
ECMAScript Specification: Iterable protocol

（注：以上引用仅为参考，具体内容已在文章中体现，未插入外部链接。）