JavaScript Iterator 迭代器模式详解与实现
本文深入解析 JavaScript 中的 Iterator 迭代器模式,通过 TypeScript 示例展示如何定义统一的迭代接口。文章详细介绍了 hasNext 和 next 核心方法,并分别基于 Array 和 Map 数据结构实现具体迭代器,最终演示客户端如何无需关心底层实现即可统一遍历数据,帮助开发者理解该设计模式的实际应用。
Iterator 模式概述
本文主要解析 JavaScript 中的 Iterator(迭代器)设计模式,通过详细的代码示例进行说明,旨在为读者的学习或工作提供具有参考价值的技术内容。
Iterator Pattern(迭代器模式)是一种基础且重要的设计模式。其核心在于提供一个统一的访问入口,使得客户端(Client)仅需了解迭代器的公开方法或具体的 Concrete Iterator 类型,而无需知晓其底层的具体实现逻辑。接下来我们将展开具体讨论。
核心方法定义
基础实现要素
Iterator 模式的核心组件包含两个关键方法:hasNext 和 next。前者用于判断集合中是否还存在下一个元素,后者用于将指针移动至下一个元素并返回当前值,从而允许客户端感知迭代状态并推进遍历过程。
接口与具体实现
接口定义规范
interface IteratorInterface {
index: number
dataStorage: any
hasNext(): boolean
next(): any
addItem(item: any): void
}
接下来,我们将基于常见的 Array(数组)和 Map(映射)两种数据结构来实现上述接口。
class iterator1 implements IteratorInterface {
index: number
dataStorage: any[]
constructor() {
this.index = 0
this.dataStorage = []
}
hasNext(): boolean {
return this.dataStorage.length > this.index
}
next(): any {
return this.dataStorage[this.index ++]
}
addItem(item: any): void {
this.dataStorage.push(item)
}
}
// map
class iterator2 implements IteratorInterface {
index: number
dataStorage: Map<number, any>
constructor() {
this.index = 0
this.dataStorage = new Map<number, any>()
}
hasNext(): boolean {
return this.dataStorage.get(this.index) != undefined
}
next(): any {
return this.dataStorage.get(this.index ++)
}
addItem(item: any): void {
this.dataStorage.set(this.dataStorage.size, item)
}
}
客户端调用示例
具体实现代码
const i = new iterator1()
i.addItem(123)
i.addItem(456)
i.addItem('dolphin')
while(i.hasNext()){
console.log(i.next())
}
console.log(`====================`)
const i2 = new iterator2()
i2.addItem(123)
i2.addItem(456)
i2.addItem('dolphin')
while(i2.hasNext()){
console.log(i2.next())
}
结果分析与总结
会发现 Iterator 1号 2号的结果都是一样的!他们都只需要让Client知道有hasNext、next就好,底层的实作不需要让他们知道!
为了简化演示,此处未单独封装 Client 类,而是直接实例化具体迭代器类进行调用。
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
