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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php取得字符串首字母的方法
2015/03/25 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
python的sorted用法详解
2019/06/25 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
自我评价格式
2014/01/06 职场文书
毕业生找工作求职信
2014/08/05 职场文书
2015年清明节活动总结
2015/02/09 职场文书
个人培训总结
2015/03/05 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
公司董事任命书
2015/09/21 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android