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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
星际争霸任务指南——神族
2020/03/04 星际争霸
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
基于php 随机数的深入理解
2013/06/05 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python中的yield使用方法
2014/02/11 Python
Python中针对函数处理的特殊方法
2014/03/06 Python
python字典的常用操作方法小结
2016/05/16 Python
解读! Python在人工智能中的作用
2017/11/14 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python看某个模块的版本方法
2018/10/16 Python
Python 解析简单的XML数据
2020/07/24 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
《十六年前的回忆》教学反思
2014/02/14 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
核心价值观演讲稿
2014/05/13 职场文书
合同补充协议书
2016/03/24 职场文书