当前位置：首页 > article >正文

JavaScript设计模式 -- 迭代器模式

article 2025/2/22 16:32:03

在软件开发中，我们经常需要遍历集合、数组、链表、树等数据结构。传统上，这些数据结构往往需要暴露内部实现细节，或者写大量重复的遍历代码。**迭代器模式（Iterator Pattern）**提供了一种统一的方式来访问集合内的元素，而不暴露集合的内部表示。通过定义统一的迭代器接口，可以使客户端代码与数据结构实现解耦，从而使系统更易扩展和维护。

迭代器模式简介

迭代器模式属于行为型设计模式，其主要思想是将遍历集合的责任封装在迭代器对象中，客户端通过统一的迭代器接口逐个访问集合中的元素，而无需了解集合的内部结构。这样做可以使集合与遍历算法分离，进而提高系统的灵活性和可维护性。

在 JavaScript 中，ES6 引入了内置的迭代器协议（Iterator Protocol）和生成器（Generator），使得实现迭代器变得非常方便。即便如此，自定义迭代器的设计思想依然适用于各种编程语言和场景。

迭代器模式的核心结构

迭代器模式通常包含以下角色：

聚合对象（Aggregate）
管理一组元素，并提供创建迭代器对象的方法。
迭代器（Iterator）
定义访问聚合对象中各个元素的接口，通常包括 next() 方法以及（可选的） hasNext() 方法。

这种设计使得客户端只需要依赖于统一的迭代器接口，无论底层集合是数组、链表、树还是其他数据结构，遍历方式都保持一致。

JavaScript 中的迭代器实现示例

下面我们通过多个示例展示如何在 JavaScript 中实现迭代器模式，涵盖多种应用场景。

示例 1：基本迭代器实现

首先，实现一个简单的迭代器，用于遍历一个数组。我们手动实现一个迭代器对象，该对象包含 next() 方法，用于返回集合中下一个元素。

// 自定义迭代器构造函数
function createIterator(array) {
  let index = 0;
  return {
    next: function() {
      if (index < array.length) {
        return { value: array[index++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
}

// 使用示例
const arr = [10, 20, 30];
const iterator = createIterator(arr);

console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

示例 2：使用 ES6 生成器实现迭代器

ES6 提供了生成器函数（Generator），可以让我们更简单地创建迭代器。生成器函数会返回一个符合迭代器协议的对象。

// 使用生成器函数创建迭代器
function* arrayIterator(array) {
  for (let item of array) {
    yield item;
  }
}

// 使用示例
const arr2 = ['a', 'b', 'c'];
const iterator2 = arrayIterator(arr2);

console.log(iterator2.next()); // { value: 'a', done: false }
console.log(iterator2.next()); // { value: 'b', done: false }
console.log(iterator2.next()); // { value: 'c', done: false }
console.log(iterator2.next()); // { value: undefined, done: true }

生成器不仅使代码更加简洁，还能处理无限序列和复杂的迭代逻辑。

示例 3：自定义反向迭代器

有时我们需要反向遍历一个集合。下面示例展示如何实现一个反向迭代器。

function createReverseIterator(array) {
  let index = array.length - 1;
  return {
    next: function() {
      if (index >= 0) {
        return { value: array[index--], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
}

// 使用示例
const arr3 = [1, 2, 3, 4];
const reverseIterator = createReverseIterator(arr3);

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

这种自定义迭代器可以应用于需要反向遍历的场景，例如从后向前遍历日志记录或历史数据。

示例 4：树结构的中序遍历迭代器

对于树状结构，常见的遍历方式有中序、前序、后序等。下面我们实现一个二叉树的中序遍历迭代器，利用生成器函数来简化递归逻辑。

// 定义二叉树节点
class TreeNode {
  constructor(value, left = null, right = null) {
    this.value = value;
    this.left = left;
    this.right = right;
  }
}

// 中序遍历生成器函数
function* inorderTraversal(node) {
  if (node) {
    yield* inorderTraversal(node.left);
    yield node.value;
    yield* inorderTraversal(node.right);
  }
}

// 构造示例二叉树
//         4
//       /   \
//      2     6
//     / \   / \
//    1   3 5   7
const tree = new TreeNode(
  4,
  new TreeNode(2, new TreeNode(1), new TreeNode(3)),
  new TreeNode(6, new TreeNode(5), new TreeNode(7))
);

// 使用中序遍历迭代器
const treeIterator = inorderTraversal(tree);
for (let value of treeIterator) {
  console.log(value); // 按顺序输出：1, 2, 3, 4, 5, 6, 7
}

这种迭代器在处理树形数据结构时非常有用，能够使遍历逻辑清晰且易于扩展到其他遍历顺序。

示例 5：组合多个集合的迭代器

在某些场景中，我们可能需要同时遍历多个不同的集合。通过组合迭代器，我们可以实现统一遍历多个集合的功能。

function* compositeIterator(...iterables) {
  for (let iterable of iterables) {
    // 假设每个 iterable 都符合迭代器协议（如数组、生成器等）
    for (let item of iterable) {
      yield item;
    }
  }
}

// 使用示例
const arrA = [1, 2, 3];
const arrB = ['a', 'b', 'c'];
const composite = compositeIterator(arrA, arrB);

for (let value of composite) {
  console.log(value);
}
// 控制台输出：
// 1
// 2
// 3
// a
// b
// c

该示例展示了如何利用生成器组合多个集合的迭代过程，使得客户端可以使用单一的迭代接口来处理不同来源的数据。