深入剖析 JavaScript 迭代器模式

前端

2023-10-29 21:37:03

在《JavaScript 高级程序设计》的旅程中，我们踏入了广袤的迭代器模式，它揭示了高效遍历和处理数据结构的奥秘。本次笔记将为你深入阐述迭代器模式，揭开 ES6 中两大法宝——迭代器和生成器的面纱。

迭代器模式：概念与应用

迭代器模式是一种设计模式，它提供了一种方法来遍历集合中的元素，而无需知道集合的内部结构。它将数据访问封装在称为迭代器对象的独立对象中，从而实现了数据的抽象和解耦。

ES6 中的迭代器和生成器

ES6 为 JavaScript 引入了迭代器和生成器，极大地增强了迭代器模式。

迭代器： 迭代器是一个对象，它包含一个 next() 方法，用于返回集合中的下一个元素。迭代器可以用于 for-of 循环和其他内置函数，如 Array.prototype.forEach()。
生成器： 生成器是一个函数，它可以通过 yield 返回一个值。当调用生成器时，它会生成一个迭代器，该迭代器可以逐个返回生成器产生的值。

迭代器模式的优缺点

优点：

抽象数据访问： 迭代器模式将数据访问与集合结构分离，实现了代码的可重用性和可维护性。
懒加载： 生成器支持延迟计算，只有在需要时才生成值，从而优化性能。
可定制： 迭代器可以轻松定制，以满足特定的遍历需求。

缺点：

额外开销： 迭代器和生成器的创建可能需要额外的开销，尤其是在处理大量数据时。
代码复杂性： 在某些情况下，使用迭代器和生成器可能导致代码更加复杂。

for 和 forEach：遍历数据的替代方案

在 ES6 之前，JavaScript 中常用的遍历方法包括 for 循环和 Array.prototype.forEach()。然而，这些方法存在一些局限性：

for 循环： 要求知道数据结构的具体结构，且遍历顺序无法灵活定制。
forEach()： 无法确定遍历是否终止，仅适用于数组，并且回调结构较笨重。

实践：使用迭代器遍历数组

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

// 使用 for-of 循环和迭代器遍历
for (const number of numbers) {
  console.log(number);
}

练习：使用生成器创建斐波那契数列

function* fibonacci() {
  let [a, b] = [0, 1];

  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1