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

深入理解JavaScript设计模式之迭代器模式

news 来源：原创 2025/8/23 21:59:45

文章目录

深入理解JavaScript设计模式之迭代器模式
- 定义
- - 官方翻译
  - 白话翻译
- 实现jQuery中的each迭代器
- - 实现数组迭代器
  - 迭代器实现创建Dom元素
- 内部迭代器和外部迭代器
- - 内部迭代器
  - 外部迭代器
- 迭代类数组对象和字面量对象
- 倒序迭代器
- 中止迭代器
- 迭代器的应用举例
- - 音乐播放器
  - 案例待输出更新。。。
- 总结

深入理解JavaScript设计模式之迭代器模式

定义

官方翻译

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，不用关心对象你的内部构造也可以按顺序访问其中的每个元素。

白话翻译

为遍历不同数据结构的集合提供统一的接口，能遍历访问集合数据中的项，不用关心项的数据结构。

实现jQuery中的each迭代器

实现数组迭代器

很简单，就是创建一个高阶函数结构两个参数，一个参数为数组，另外一个参数为调用此函数的回调函数，回调函数中返回遍历对象的下标与对应下标值。

<html><body><script>var each = function (arr, callback) {for (var i = 0, l = arr.length; i < l; i++) {callback.call(arr, i, arr[i]);}};each([1, 2, 3], function (i, n) {console.log(i, n);});</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

迭代器实现创建Dom元素

在很多原生开发业务中，需要批量创建n个指定元素，也可以将迭代与业务区分开来实现，如下代码根据数组中的内容动态创建li元素,业务模式与迭代方法分类分离的设计模式。

<html><body><ul id="list"></ul><script>var each = function (arr, callback) {for (var i = 0, l = arr.length; i < l; i++) {callback.call(arr, i, arr[i]);}};each([1, 2, 3], function (i, n) {var oli = document.createElement("li");oli.innerHTML = n;list.appendChild(oli);});</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

内部迭代器和外部迭代器

内部迭代器

上面代码中的each函数属于内部迭代器，each函数的内部已经定义好了迭代规则，each完全接手整个迭代过程，外部只需要依次调用，内部迭代器很方便，不用关心迭代器内部的实现，跟迭代器的交互也就是一次调用。但是也有缺点，由于内部迭代器的迭代规则已经被规定死，上面的each函数就无法同时迭代两个数组了，如果有需求要求迭代两个数组，判断两个数组是否相等，如果不该写内部迭代器each的代码，只能在外部套一个compare的方法进行数组相等逻辑的判断。

<html><body><ul id="list"></ul><script>var each = function (arr, callback) {for (var i = 0, l = arr.length; i < l; i++) {callback.call(arr, i, arr[i]);}};var compare = function (ary1, ary2) {if (ary1.length !== ary2.length) {throw new Error("ary1 和 ary2 不相等");}each(ary1, function (i, n) {if (n !== ary2[i]) {throw new Error("ary1 和 ary2 不相等");}});console.log("ary1 和 ary2 相等");};compare([1, 2, 3], [1, 2, 4]); // throw new Error ( 'ary1 和 ary2 不相等' )</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式
上面写的compare函数真的难看难懂，但是好歹可以完成需求。

外部迭代器

部迭代器必须显式地请求迭代下一个元素。外部迭代器增加了一些调用的复杂度，但相对也增强了迭代器的灵活性，我们可以手工控制迭代的过程或者顺序。
定义一个Iterator函数，接收一个对象或者数组作为参数，返回一个包含三个方法的对象next,isDone和getCurrItem，它们允许外部代码控制迭代过程。
改写compare方法，compare接收两个迭代器作为参数，并逐一比较这两个迭代器所指向的元素，如果任意两个迭代器对应的元素不相等，就抛出错误不相等，如果元素都相等且两个迭代器都达到了莫问，则弹出警告，显示相等。

<html><body><ul id="list"></ul><script>var Iterator = function (obj) {var current = 0;var next = function () {current += 1;};var isDone = function () {return current >= obj.length;};var getCurrItem = function () {return obj[current];};return {next: next,isDone: isDone,getCurrItem: getCurrItem,};};var compare = function (iterator1, iterator2) {while (!iterator1.isDone() && !iterator2.isDone()) {if (iterator1.getCurrItem() !== iterator2.getCurrItem()) {throw new Error("iterator1 和 iterator2 不相等");}iterator1.next();iterator2.next();}console.log("iterator1 和 iterator2 相等");};var iterator1 = Iterator([1, 2, 3]);var iterator2 = Iterator([1, 2, 3]);compare(iterator1, iterator2); // 输出：iterator1 和 iterator2 相等</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

迭代类数组对象和字面量对象

有时候迭代器需要迭代遍历数组也能迭代遍历对象的需求，其实就是在上面的方法中添加一个if判断，判断是否是数组和对象，通过for或者for in进行遍历即可。

<html><body><script>var each = function (obj, callback) {var value,i = 0,length = obj.length,isArray = Array.isArray.apply(obj);if (isArray) {// 迭代类数组for (; i < length; i++) {value = callback.call(obj[i], i, obj[i]);if (value === false) {break;}}} else {for (i in obj) {// 迭代 object 对象value = callback.call(obj[i], i, obj[i]);if (value === false) {break;}}}return obj;};each([1, 2, 3, 4, 5], function (i, v) {console.log(i, v);});console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");each({ a: 1, b: 2, c: 3, d: 4, e: 5 }, function (i, v) {console.log(i, v);});</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

倒序迭代器

倒序遍历数组输出，其实就是长度高到低判断：

<html><body><script>var reverseEach = function (ary, callback) {for (var l = ary.length - 1; l >= 0; l--) {callback(l, ary[l]);}};reverseEach([0, 1, 2], function (i, n) {console.log(n); // 分别输出：2, 1 ,0});</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

中止迭代器

上面代码中有这么一段，迭代器可以像普通for循环中的break一样，可以跳出循环方法，如果回调函数的执行结果返回false，则提前终止循环。

if (isArray) {// 迭代类数组for (; i < length; i++) {value = callback.call(obj[i], i, obj[i]);if (value === false) {break;}}
}

代码展示如下，如果i>2则跳出循环即可。return false。

<html><body><script>var each = function (obj, callback) {var value,i = 0,length = obj.length,isArray = Array.isArray.apply(obj);if (isArray) {// 迭代类数组for (; i < length; i++) {value = callback.call(obj[i], i, obj[i]);if (value === false) {break;}}} else {for (i in obj) {// 迭代 object 对象value = callback.call(obj[i], i, obj[i]);if (value === false) {break;}}}return obj;};each([1, 2, 3, 4, 5], function (i, v) {if (i > 2) {return false;}console.log("each", i, v);});</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

迭代器的应用举例

音乐播放器

场景一、假设我们正在开发一个音乐播放列表功能，需要实现一个可以逐首播放歌曲的播放器，并支持“下一首”、“重置”等功能。

有一个歌曲数组。
可以按顺序播放歌曲。
支持“下一首”、“当前歌曲”、“是否播放完毕”等操作。

使用外部迭代器实现：

<html><body><script>function PlaylistIterator(songs) {let index = 0;return {next() {return index < songs.length? { value: songs[index++], done: false }: { done: true };},current() {return songs[index];},reset() {index = 0;},hasNext() {return index < songs.length;},};}// 使用示例const songs = ["Song X", "Song Y", "Song Z"];const player = PlaylistIterator(songs);console.log(player.next().value); // Song Xconsole.log(player.next().value); // Song Yconsole.log(player.hasNext()); // trueconsole.log(player.next().value); // Song Zconsole.log(player.hasNext()); // falseplayer.reset(); // 从头开始console.log(player.next().value); // Song X（重新开始）</script></body>
</html>

深入理解JavaScript设计模式之迭代器设计模式

案例待输出更新。。。

总结

设计模式不是“炫技”，而是"沉淀"，希望通过阅读和学习《JavaScript设计模式》和实践中，在显示业务需求开发中写出更具有可维护性，可扩展性的代码。

致敬—— 《JavaScript设计模式》· 曾探

文章目录

深入理解JavaScript设计模式之迭代器模式

定义

官方翻译

白话翻译

实现jQuery中的each迭代器

实现数组迭代器

迭代器实现创建Dom元素

内部迭代器和外部迭代器

内部迭代器

外部迭代器

迭代类数组对象和字面量对象

倒序迭代器

中止迭代器

迭代器的应用举例

音乐播放器

案例待输出更新。。。

总结

相关文章：