继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

康遇
关注TA
已关注
手记 76
粉丝 3
获赞 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类图:
图片描述

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP