掌握ES6的迭代器和生成器：解锁编程新世界

2023-10-12 16:33:07

迭代器和生成器：JavaScript 中的循环与序列利器

一、何为迭代器？

迭代器是一种神奇的对象，提供了一个名为 next() 的方法，它能够返回一个包含当前迭代元素的漂亮对象，同时还配备了一个 done 属性，时刻记录着迭代是否已经结束。在 JavaScript 王国中，我们可以使用 for...of 循环轻松遍历迭代器，仿佛它是家常便饭。

二、生成器的奥秘

生成器是 JavaScript 领域中的超能力函数，它们能够返回一个强大无比的迭代器对象。生成器函数使用 yield ，可以暂时叫停函数的执行，悠闲地返回当前迭代的元素。每当生成器函数被召唤时，它都会优雅地创建一个迭代器对象，供我们尽情差遣。

三、迭代器与生成器的差别

迭代器：一个对象，持有 next() 方法，为我们提供元素的访问权限。
生成器：一个函数，能够产出迭代器对象。
迭代器：可以使用 for...of 循环轻松遍历。
生成器：使用 yield 关键字，在函数执行的间隙中，优雅地返回当前迭代的元素。

四、迭代器与生成器的用武之地

迭代器和生成器的用武之地可是广阔无垠，涵盖了各种场景：

遍历数组或对象： 轻松遍历，元素尽收眼底。
生成序列： 无穷无尽的序列，信手拈来。
处理异步操作： 异步世界中的得力助手，轻松驾驭。
编写可迭代对象： 让你的对象也拥有迭代的超能力。

五、ES6 的迭代器与生成器实战演练

1、遍历数组：

const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
}

2、生成序列：

function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const sequence = generateSequence(1, 5);

for (const number of sequence) {
  console.log(number);
}

3、处理异步操作：

async function fetchUsers() {
  const response = await fetch('https://example.com/users');
  const users = await response.json();

  for (const user of users) {
    console.log(user);
  }
}

fetchUsers();

4、编写可迭代对象：

class MyIterableObject {
  *[Symbol.iterator]() {
    for (let i = 0; i < 5; i++) {
      yield i;
    }
  }
}

const object = new MyIterableObject();

for (const number of object) {
  console.log(number);
}