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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 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 adodb连接不同数据库
2009/03/19 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP对象实例化单例方法
2017/01/19 PHP
php实现简单四则运算器
2020/11/29 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
拖动时防止选中
2017/02/03 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
Python装饰器用法实例分析
2019/01/14 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python tornado使用流生成图片的例子
2019/11/18 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书