JS设计模式(4)迭代器模式
什么是迭代器模式?
定义:提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。
主要解决:不同的方式来遍历整个整合对象。
何时使用:遍历一个聚合对象。
如何解决:把在元素之间游走的责任交给迭代器,而不是聚合对象。
关键代码:定义接口:done, next。
优点: 1、它支持以不同的方式遍历一个聚合对象。 2、迭代器简化了聚合类。 3、在同一个聚合上可以有多个遍历。 4、在迭代器模式中,增加新的聚合类和迭代器类都很方便,无须修改原有代码。
缺点:由于迭代器模式将存储数据和遍历数据的职责分离,增加新的聚合类需要对应增加新的迭代器类,类的个数成对增加,这在一定程度上增加了系统的复杂性。
使用场景: 1、访问一个聚合对象的内容而无须暴露它的内部表示。 2、需要为聚合对象提供多种遍历方式。 3、为遍历不同的聚合结构提供一个统一的接口。
注意事项:迭代器模式就是分离了集合对象的遍历行为,抽象出一个迭代器来负责,这样既可以做到不暴露集合的内部结构,又可让外部代码透明地访问集合内部的数据。
实现一个内部的迭代器
function each(arr, fn) {
for (let i = 0; i < arr.length; i++) {
fn(i, arr[i])
}
} each([1, 2, 3], function(i, n) {
console.log(i) // 0 1 2
console.log(n) // 1 2 3
})
可以看出内部迭代器在调用的时候非常简单,使用者不用关心迭代器内部实现的细节,但这也是内部迭代器的缺点。比如要比较两数组是否相等,只能在其回调函数中作文章了,代码如下:
const compare = function(arr1, arr2) {
each(arr1, function(i, n) {
if (arr2[i] !== n) {
console.log('两数组不等')
return
}
})
console.log('两数组相等')
} const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3]
compare(arr1, arr2) // 两数组相等
实现一个外部的迭代器
const iterator = function(arr) {
let current = 0
const next = function() {
current = current + 1
}
const done = function() {
return current >= arr.length
}
const value = function() {
return arr[current]
}
return {
next,
done,
value,
}
} const arr1 = [1, 2 ,3]
const arr2 = [1, 2, 3]
const iterator1 = iterator(arr1)
const iterator2 = iterator(arr2) const compare = function(iterator1, iterator2) {
while (!iterator1.done() && !iterator2.done()) {
if (iterator1.value() !== iterator2.value()) {
console.log('两数组不等')
return
}
iterator1.next() // 外部迭代器将遍历的权利转移到外部
iterator2.next()
}
console.log('两数组相等')
} compare(iterator1, iterator2)
JS设计模式(4)迭代器模式的更多相关文章
- js设计模式——4.迭代器模式
js设计模式——4.迭代器模式 代码演示 /*js设计模式——迭代器模式*/ class Iterator { constructor(container) { this.list = contain ...
- js设计模式总结-迭代器模式
迭代器模式 要解决的问题 迭代器要解决的问题很简单很单纯,就是进行遍历操作. 实现原理 基本所有语言都实现了迭代器,javascript也不例外,如Array.prototype.forEach,fo ...
- 浅谈js设计模式之迭代器模式
迭代器模式无非就是循环访问聚合对象中的各个元素.比如 jQuery中的 $.each 函数,其中回调函数中的参数 i 为当前索引, n 为当前元素,代码如下: $.each([1, 2, 3], fu ...
- JS设计模式——5.单体模式
JS设计模式——5.单体模式 http://www.cnblogs.com/JChen666/p/3610585.html 单体模式的优势 用了这么久的单体模式,竟全然不知!用它具体有哪些好处呢? ...
- 乐在其中设计模式(C#) - 迭代器模式(Iterator Pattern)
原文:乐在其中设计模式(C#) - 迭代器模式(Iterator Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 迭代器模式(Iterator Pattern) 作者:weba ...
- Python进阶:设计模式之迭代器模式
在软件开发领域中,人们经常会用到这一个概念——“设计模式”(design pattern),它是一种针对软件设计的共性问题而提出的解决方案.在一本圣经级的书籍<设计模式:可复用面向对象软件的基础 ...
- 设计模式学习--迭代器模式(Iterator Pattern)和组合模式(Composite Pattern)
设计模式学习--迭代器模式(Iterator Pattern) 概述 ——————————————————————————————————————————————————— 迭代器模式提供一种方法顺序 ...
- js设计模式——7.备忘录模式
js设计模式——7.备忘录模式 /*js设计模式——备忘录模式*/ // 备忘类 class Memento { constructor(content) { this.content = conte ...
- js设计模式——6.模板方法模式与职责链模式
js设计模式——6.模板方法模式与职责链模式 职责链模式
- js设计模式——5.状态模式
js设计模式——5.状态模式 代码演示 /*js设计模式——状态模式*/ // 状态(红灯,黄灯,绿灯) class State { constructor(color) { this.color = ...
随机推荐
- hdu 4486 Pen Counts
Pen Counts Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- react-create-app
github地址 配置文档 环境变量 λ yarn add classnames lodash @material-ui/core react-router-dom mobx mobx-react r ...
- IOS系统下虚拟键盘遮挡文本框问题的解决
最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框 经过高人指点,这个问题终于解决 ...
- MUI - 复选框、单选框、使用js获取选择值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- juqery 点击张三触发李四的方法 trigger(); 和 被选元素前插入指定的内容的方法 brfore();
$('.zc_fabu_img_1').on('click',function(){ $("#upImg img").trigger("click"); }) ...
- c++求最小公倍数和最小公约数
方法一:辗转相除法(欧几里得 Euclidean) 用“较大数”除以“较小数”,再用较小数除以第一余数,再用第一余数除以第二余数: 反复直到余数为零为止. #include<iostream&g ...
- post方式接口测试(一)_新建测试用例
第一种方式:拷贝别人的 第二种方式:自己创建 二.打开浏览器(此处chrome),F12打开开发模式,输入网址登录,此时可获取到登录的 Request URL 二.打开postman,进入自己的Col ...
- oracle日期格式化
TO_CHAR(t.CAMERA_CREAT_TIME, 'YYYY-MM-DD HH24:MI:SS') as point_registerdate,TO_CHAR(t.CAMERA_MODIFY_ ...
- javaweb(3)之JSP&EL&JSTL
JSP(Java Server Page) 介绍 什么是 JSP ? 从用户角度看,JSP 就是一个网页. 从开发者角度看,它其实就是一个继承了 Servlet 的 java 类,所以可以直接说 JS ...
- [py]使用字典get方法做数据统计
s = "aabbccc" d = {} for i in s: if i in d: d[i] += 1 else: d[i] = 0 for i in s: d[i] = d. ...