JavaScript设计模型Iterator实例解析


Posted in Javascript onJanuary 22, 2020

这篇文章主要介绍了JavaScript设计模型Iterator实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Iterator Pattern是一个很重要也很简单的Pattern:迭代器!
我们可以提供一个统一入口的迭代器,Client只需要知道有哪些方法,或是有哪些Concrete Iterator,并不需要知道他们底层如何实作!现在就让我们来开始吧!

起手式

Iterator最主要的东西就是两个:hasNext、next。要让Client知道是否还有下一个,和切换到下一个!

定义Interface

interface IteratorInterface {
  index: number
  dataStorage: any
  hasNext(): boolean
  next(): any
  addItem(item: any): void
}

实作介面

下面的范例我将会使用Map、Array这两个常见的介面实作。

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)
  }
}

Client

我没有实作一个Client,所以我是直接new一个类别出来直接使用!

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就好,底层的实作不需要让他们知道!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
学习jQuey中的return false
Dec 18 Javascript
完美的js图片轮换效果
Feb 05 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
Vue开发环境跨域访问问题
Jan 22 #Javascript
vue中英文切换实例代码
Jan 21 #Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 #Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 #Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 #Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 #Javascript
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
You might like
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
关于js类的定义
2011/06/28 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python中pygame安装方法图文详解
2015/11/11 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
公务员的自我鉴定
2013/10/26 职场文书
学徒工职责
2014/03/06 职场文书
市级文明单位申报材料
2014/05/07 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
养成教育工作总结
2015/08/13 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS