JavaScript设计模型Iterator实例解析

这篇文章主要介绍了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就好，底层的实作不需要让他们知道！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Java Iterator接口遍历单列集合迭代器原理详解

    Java Iterator接口遍历单列集合迭代器原理详解

    这篇文章主要介绍了Java Iterator接口遍历单列集合迭代器原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Iterator接口概述 在程序开发中,经常需要遍历集合中的所有元素.针对这种需求,JDK专门提供了一个接口java.util.Iterator . Iterator 接口也是Java集合中的一员,但它与 Collection . Map 接口有所不同,Collection 接口与 Map 接口主要用于存储元素,而 Iter

  • 如何实现java Iterator迭代器功能

    如何实现java Iterator迭代器功能

    这篇文章主要介绍了如何实现java Iterator迭代器功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天躺在床上忽然想到一个问题,迭代器的代码是如何实现的? 于是乎不由自主的爬起来敲两行代码. List<String> list=new ArrayList<>(2); list.add("java"); list.add("C#"); Iterator<String>

  • PHP设计模式之迭代器（Iterator）模式入门与应用详解

    PHP设计模式之迭代器（Iterator）模式入门与应用详解

    本文实例讲述了PHP设计模式之迭代器(Iterator)模式.分享给大家供大家参考,具体如下: 迭代器有时又称光标(cursor)是程式设计的软件设计模式,可在容器物件(container,例如list或vector)上遍访的接口,设计人员无需关心容器物件的内容,现在呢,各种语言实作Iterator的方式皆不尽同,有些面向对象语言像Java, C#, Python, Delphi都已将Iterator的特性内建语言当中,完美的跟语言整合,我们称之隐式迭代器(implicit iterator),

  • JSP中c:foreach遍历和s:iterator遍历异同实例分析

    本文实例分析了JSP中c:foreach遍历和s:iterator遍历的异同.分享给大家供大家参考.具体如下: ①jstl c:foreach 首先我们来看一个普通的servlet: import com.xy.entity.Board; import com.xy.entity.Topic; import com.xy.entity.User; public class ToMainAction extends HttpServlet { private IBoarderDao boardDa

  • 小议JavaScript中Generator和Iterator的使用

    一说到 Generator,大家就会扯上异步之类是话题.这显然是被一些奇奇怪怪的东西带坏了.与 Generator 关系密切的应该是 Iterator 才对,拿 Generator 来处理异步也许是一些 C# 程序员才会想的事.当然这种用法确实有一套完整的东西,只是我个人不喜欢而已. 非要把 Generator 和异步联系上,唯一的点就是 next 的调用时机.因为 next 可以异步地调用,所以 Generator 才得以被异步地滥用. 但我觉得 next 这个方法虽然可以异步调用,但正确的使

  • 深入解读JavaScript中的Iterator和for-of循环

    深入解读JavaScript中的Iterator和for-of循环

    如何遍历一个数组的元素?在 20 年前,当 JavaScript 出现时,你也许会这样做: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 自从 ES5 开始,你可以使用内置的 forEach 方法:

  • Python迭代器iterator生成器generator使用解析

    1. 迭代 根据记录的前面的元素的位置信息 去访问后续的元素的过程 -遍历 迭代 2. 可迭代对象 iterable 如何判断可迭代对象的3种方式 能够被迭代访问的对象 for in 常用可迭代对象-list tuple str from collections import Iterable isinstance(obj, Iterable) 3. 可迭代对象 可迭代对象通过__iter__方法提供一个 可以遍历对象中数据的工具-迭代器 iter(可迭代对象) 可以获取可迭代对象的迭代器 通过

  • JavaScript实现Iterator模式实例分析

    本文实例讲述了JavaScript实现Iterator模式的方法.分享给大家供大家参考.具体分析如下: 经常在网上看到有不少JS设计模式的示例.这里写一下JavaScript实现Iterator模式的方法,记录在此,仅作备忘: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • Java集合使用 Iterator 删除元素

    这篇文章主要介绍了Java集合使用 Iterator 删除元素,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 针对常见的数据集合,比如 ArrayList 列表,对其进行遍历,删除其中符合条件的某个元素,使用 iterator 迭代器进行迭代,代码如下: public class PracticeController { public static void main(String[] args) { List<String> list =

  • JavaScript设计模型Iterator实例解析

    这篇文章主要介绍了JavaScript设计模型Iterator实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Iterator Pattern是一个很重要也很简单的Pattern:迭代器! 我们可以提供一个统一入口的迭代器,Client只需要知道有哪些方法,或是有哪些Concrete Iterator,并不需要知道他们底层如何实作!现在就让我们来开始吧! 起手式 Iterator最主要的东西就是两个:hasNext.next.要让Cli

  • JavaScript对象属性操作实例解析

    这篇文章主要介绍了JavaScript对象属性操作实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在js对象中,我们可以对对象属性进行操作. 上图的要点为:for-in会把原型链上的可枚举属性也列出来. 上图的要点为:可以使用逻辑运算符&&进行层层查找对象是否为undefined,从而在赋值过程中不报错. 上图的要点为: 1.delete不存在的属性,依旧返回true. 2.Object.getOwnPropertyDescrip

  • Javascript类型转换的规则实例解析

    类型转换可以分为隐式转换和显式转换,所谓隐式转换即程序在运行时进行的自动转换,显式转换则是人为的对类型进行强制转换.Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改变.请看示 例: var n = 10; n = "hello CSSer!"; n = {}; 上面的示例中,首先声明n变量并初始化其值为10(整数类型),接着将字符串"hello CSSer!"赋值给n,接着再赋一个对象给它,最

  • Mysql数据库设计三范式实例解析

    三范式 1NF:字段不可分; 2NF:有主键,非主键字段依赖主键; 3NF:非主键字段不能相互依赖; 解释: 1NF:原子性 字段不可再分,否则就不是关系数据库; 2NF:唯一性 一个表只说明一个事物; 3NF:每列都与主键有直接关系,不存在传递依赖; 第一范式(1NF) 即表的列的具有原子性,不可再分解,即列的信息,不能分解, 只要数据库是关系型数据库(mysql/oracle/db2/informix/sysbase/sql server),就自动的满足1NF.数据库表的每一列都是不可分割的

  • Javascript地址引用代码实例解析

    javascript地址引用 代码如下 var a = new Object(); a.price = 173; var b = a; b.price = 170; //b更改了属性值,a的属性值一起会被改变 alert(a.price); //输出170 var a =3 var b = a; b=4; alert(a); //输出170 可以看出object 是引用 学过c++的人知道 是地址 所以跟PHP不一样 PHP前面是要加&代表地址 ps补充下 复制对象 不修改原来对象属性的方法 v

  • JavaScript oncopy事件用法实例解析

    作用:当用户拷贝添加了oncopy事件的元素时触发 使用方式:直接在HTML标签中添加该事件,通过JavaScript为指定元素添加该事件 提示:如果想要禁止复制某个元素的内容,可以在该事件的函数中添加return: false;,禁止浏览器的默认行为 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onco

  • JavaScript代码简化技巧实例解析

    函数式编程可以使您的代码更简单.简单意味着代码易于阅读和理解,可测试和可维护. 在本文中,我描述了一些函数式编程(FP)技巧,您可以使用它们来简化代码,从而使代码更好. 摆脱临时变量和不变性原则 函数式编程倾向于不变性,这种不变性原则意味着在初始化变量之后不会更改它们的值.同样,创建对象或字符串后,您也无需对其进行突变. 如果使用JavaScript编程,则所有变量定义都应使用 const.对于正在阅读您的代码的任何人,常量定义都可以让您高枕无忧:它保证永远不会重新分配变量,因为重新分配是不可能

  • JavaScript 反射和属性赋值实例解析

    这篇文章主要介绍了JavaScript 反射和属性赋值实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Java和.NET都有着比较完善的反射机制,用来处理未知的对象并获取它们的属性和方法.JavaScript虽然没有完善的反射体系,但在编程的时候还是可以通过代码设计来实现类似反射的基本功能. function Antzone(){ this.webName="蚂蚁部落"; this.age=6; } Antzone.proto

  • JavaScript正则表达式校验与递归函数实际应用实例解析

    JS递归函数(菲波那切数列) 实例解析: 一组数字:0 1 1 2 3 5 8 13 0 1 2 3 4 5 6 7 sl(0)=0; sl(1)=1; sl(2)=sl(0)+sl(1); sl(3)=sl(1)+sl(2); function sl(i){ if(i==0){ return 0; }else if(i==1){ return 1; }else{ return sl(i-1)+sl(i-2); } } 正则表达式检验 //校验是否全由数字组成 function isDigit(

  • javascript事件模型实例分析

    本文实例讲述了javascript事件模型的用法.分享给大家供大家参考.具体分析如下: 一.事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反 DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递 二.事件对象 在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件

随机推荐