庖丁解牛 JavaScript 迭代器与生成器，ES6 革新之旅

2023-11-08 18:47:08

踏上 JavaScript 迭代器与生成器之旅

在 JavaScript 的世界中，我们经常需要处理循环和迭代操作，无论是遍历数组、处理对象还是生成一系列数据。传统的循环语句，如 for 循环和 while 循环，虽然简单好用，但在某些场景下却显得有些笨拙和有限。为了解决这些痛点，ES6 引入了迭代器和生成器这两个强有力的工具。

认识迭代器：揭示对象的内部世界

迭代器，简单来说，就是一种可以由任意对象实现的接口，它支持连续获取对象产出的每一个值。您可以将迭代器看作一个“数据源”，它可以按照一定的顺序不断提供新的数据。

要创建一个迭代器，您需要实现一个 Symbol.iterator 方法。这个方法返回一个对象，该对象实现了 next() 方法。next() 方法每次调用都会返回一个包含 value 和 done 属性的对象。value 属性包含当前产出的值，done 属性是一个布尔值，表示迭代器是否已完成遍历。

例如，以下代码创建了一个简单的迭代器，它可以产生从 1 到 10 的数字：

const numberIterator = {
  [Symbol.iterator]() {
    let current = 1;
    return {
      next() {
        if (current <= 10) {
          return { value: current++, done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },
};

使用这个迭代器，我们可以轻松地遍历数字序列：

for (const number of numberIterator) {
  console.log(number); // 1, 2, 3, ..., 10
}

生成器：巧妙构建迭代器

生成器，顾名思义，是一种可以生成数据的函数。它与普通函数不同之处在于，它可以暂停执行，并在稍后继续执行。这使得生成器非常适合用于生成一系列数据，而无需一次性全部创建。

要创建一个生成器，您需要使用 function* 语法。在生成器函数内部，使用 yield 来生成数据。yield 关键字可以暂停生成器函数的执行，并返回一个包含 value 属性的对象。当生成器函数再次被调用时，它将从暂停的地方继续执行。

例如，以下代码创建了一个生成器，它可以生成从 1 到 10 的数字：

function* numberGenerator() {
  for (let i = 1; i <= 10; i++) {
    yield i;
  }
}

使用这个生成器，我们可以通过调用 next() 方法来生成数字：

const generator = numberGenerator();

console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
// ...

// 直到所有数字生成完毕

迭代器和生成器携手并进

迭代器和生成器可谓是天生一对，它们可以无缝协作，帮助您解决各种编程难题。

利用生成器创建迭代器： 您可以将生成器函数作为迭代器的 Symbol.iterator 方法，这样就可以轻松地从生成器中生成迭代器。
使用 for-of 循环遍历迭代器： ES6 引入了 for-of 循环，可以轻松地遍历迭代器。您只需要将迭代器作为 for-of 循环的右操作数即可。
将迭代器转换为数组： 您可以使用 Array.from() 方法将迭代器转换为数组。这在需要将迭代器中的数据存储到数组中时非常有用。