JavaScript 世界的守门人——迭代器与生成器

前端

2023-12-24 12:21:20

探索 JavaScript 的迭代器与生成器：遍历序列的魔法武器

什么是迭代器？

想象你正漫步在繁华的集市，摊位上的商品琳琅满目。你迫不及待地想一件一件地查看它们。这时，"迭代器"就是你的魔法拐杖，它能带你轻松游历集市上的每一个摊位。

在 JavaScript 中，迭代器是一种对象，可以让你遍历数据结构的元素。它就像一个游标，从序列的开头开始，一步一步地移动到末尾。使用迭代器，你可以逐一访问序列中的每一项，就像集市上逐个浏览摊位一样。

迭代器的使用方式

获取迭代器非常简单，只需使用 Symbol.iterator() 方法。它会返回一个对象，其中包含一个 next() 方法。这个方法返回一个对象，其中包含两个属性：value 和 done。

value：当前项的值。
done：一个布尔值，表示迭代是否结束。

你可以使用 while 循环来遍历迭代器：

// 任务列表
const tasks = ['写代码', '调试代码', '测试代码', '发布代码'];

// 获取迭代器
const iterator = tasks[Symbol.iterator]();

// 遍历任务列表
while (true) {
  // 获取当前项
  const { value, done } = iterator.next();

  if (done) {
    break;
  }

  // 处理当前项
  console.log(value);
}

这段代码使用 while 循环来遍历 tasks 数组中的任务。每次循环，它都会调用迭代器的 next() 方法，获取当前任务的值和一个表示迭代是否结束的布尔值。如果迭代结束，循环将退出；否则，它将处理当前任务的值。

什么是生成器？

现在，假设你是一个艺术家，正在创作一幅壮观的画作。你不可能一口气完成它，你需要暂停作画，休息一下，然后继续创作。这时，"生成器"就是你的画笔，它让你可以随时暂停和恢复作画。

在 JavaScript 中，生成器是一种特殊的函数，它可以通过 yield 暂停执行。当调用生成器的 next() 方法时，它会返回一个对象，其中包含一个 value 属性（当前生成的值）和一个 done 属性（表示生成器是否已完成）。

你可以使用 for...of 循环来遍历生成器：

// 生成器函数
function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

// 遍历生成器
for (const number of generateNumbers()) {
  console.log(number);
}