JavaScript Iterator 迭代器模式详解与实现

作者:代码拾荒时间:2026-10-23 14:45:02浏览:319

本文深入解析 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 类,而是直接实例化具体迭代器类进行调用。

作者最新文章