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的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
javascript工具库代码
Mar 29 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
layui使用数据表格实现购物车功能
Jul 26 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程序的方法
2009/03/09 PHP
php简单分页类实现方法
2015/02/26 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
jquery操作select大全
2014/04/25 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
python简单文本处理的方法
2015/07/10 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python中的取模运算方法
2018/11/10 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
20行python代码实现人脸识别
2019/05/05 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
微型企业创业投资计划书
2014/01/10 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
计算机毕业生求职信
2014/06/10 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
话题作文之诚信
2019/11/28 职场文书