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

在软件开发中，我们经常需要遍历集合、数组、链表、树等数据结构。传统上，这些数据结构往往需要暴露内部实现细节，或者写大量重复的遍历代码。**迭代器模式（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

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

---

迭代器模式的优缺点 优点 统一接口：通过迭代器模式，无论底层数据结构如何，都可以使用统一的方式进行遍历。解耦集合与遍历算法：客户端无需了解集合内部实现，只需关注迭代器接口。延迟计算：生成器等迭代器可以实现惰性求值，按需生成数据，节省内存和计算资源。 缺点 额外抽象层：引入迭代器可能增加代码复杂度，特别是在简单遍历场景下可能显得有些冗余。状态管理问题：如果迭代器状态未妥善管理，可能导致错误或不一致的遍历结果。

---

总结

迭代器模式为遍历各种数据集合提供了一种统一而灵活的方式，使得客户端代码与底层数据结构实现解耦。本文详细介绍了迭代器模式的基本概念、核心结构和优缺点，并通过以下多个示例展示了其在不同场景下的应用：

基本迭代器实现：手动实现 next() 方法进行数组遍历。生成器实现：利用 ES6 生成器简化迭代器实现。反向迭代器：实现反向遍历逻辑。树结构遍历：通过中序遍历迭代器遍历二叉树。组合迭代器：统一遍历多个集合的数据。

希望这篇文章能够帮助你深入理解迭代器模式，并在实际项目中灵活应用这一设计模式来简化数据遍历逻辑和提高代码可维护性。

如果你有任何疑问或实践心得，欢迎在评论区交流分享！