【十月打卡】第73天 前端常用的7种设计模式(9)

迭代器模式

什么是迭代器模式

普通for循环示例

const arr = [1, 2, 3, 4];
const len = arr.length;
for(let i = 0; i < arr.length; i++){
  console.log(arr[i])
}

普通for循环可以用来遍历有序数据，但是存在一些问题。

• 需要知道数据的内部结构
• 遍历的时候需要获取长度，需要手动获取数据的元素

迭代器也可以用来遍历有序数据结构，和普通for循环不同的是：

• 迭代器不需要知道数据的内部结构
• 迭代器不需要手动获取元素
• 使用者和目标数据分离，符合高内聚低耦合

所以，对于一些不知道长度，无法手动获取元素的有序数据结构，可以使用迭代器来遍历。

简单的迭代器forEach

const arr=[1, 2, 3]
arr.forEach( item => {
	console.log(item)
})

代码示例和UML类图

代码示例：

class DataIterator {
  private _data: number[];
  private _index = 0;
  constructor(container: Container) {
    this._data = container.data;
  }

  next(): number | null {
    if (this.hasNext()) {
      return this._data[this._index++];
    }
    return null;
  }

  hasNext(): boolean {
    if (this._index >= this._data.length) return false;
    return true;
  }
}

class Container {
  data: number[] = [1, 2, 3, 4];

  getIterator(): DataIterator  {
    return new DataIterator(this);
  }
}

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

UML类图：