【前端设计模式】迭代器模式

120 阅读1分钟

迭代器模式的作用

遍历访问被封装有序集合。

  • 可使用for...of遍历
  • 数组操作:解构、扩展运算符、Array.from
  • 用于创建Map和Set
  • 用于Promise.all Promise.race
  • 用于yield*

JavaScript中,[Symbol.iterator]用于迭代

普通的for循环不是迭代器,这是由于普通for循环需要了解被迭代对象细节才能进行遍历,不符合高内聚低耦合的设计原则。

标准迭代器模式

未命名文件(11).png

class DataIterator {
  private data: number[]
  private index = 0

  constructor(container: DataContainer) {
    this.data = container.data
  }

  next(): number | null {
    if(this.hasNext()) {
      return this.data[this.index++]
    }
  }

  hasNext(): boolean {
    if(this.index >= this.data.length) return false
    return true
  }
}

class DataContainer {
  data: number[] = [1, 2, 3, 4, 5]
  getIterator() {
    return new DataIterator(this)
  }
}

const container = new DataContainer()
const iterator = container.getIterator()
while(iterator.hasNext()) {
  console.log(iterator.next())
}

迭代器模式的应用

使用迭代器深度优先遍历DOM树

// Generator生成器,生成器返回迭代器
function* traverse(elemList: Element[]): any {
  for(const elem of elemList) {
    yield elem
    const children = Array.from(elem.children)
    if(children.length) {
      // yield*后跟迭代器
      yield* traverse(children)
    }
  }
}