javascript设计模式之迭代器模式


Posted in Javascript onJanuary 30, 2020

迭代器模式分为内部迭代器和外部迭代器,内部迭代器就是在函数内部定义好迭代的规则,它完全接手整个迭代的过程,外部只需一次初始调用。

内部迭代器

以下自行实现的类似jquery中$.each()的each()函数就是内部迭代器

//实现一个jq的$.each()迭代器

var arr = [1, 2, 3, 4, 5, 6, 7, 8]

var each = function(arr, callback){
  for(var i=0; i<arr.length; i++){
    callback.call(null, i, arr[i])  //把下标和元素当作参数传递给callback参数
  }
}

each(arr, function(i, n){
  console.log(i, n);
})

//类似于jquery的 $.each(arr, function(i,n){})

内部迭代器在调用时非常方便,但是有一个缺点,就是无法同时迭代两个目标值,比如上述each函数就无法同时迭代两个数组。

对两个数组做相等性判断时,如果不改迭代器内部方法实现,只能通过each的回调函数进行实现,虽然能实现,但不是很优雅。

//对两个数组做相等性判断时,如果不改迭代器内部方法实现,只能通过each的回调函数进行实现,虽然能实现,但不是很优雅。
let compare = function (ary1, ary2) {
  if(ary1.length !== ary2.length){
    throw new Error('ar1和ary2长度不相等。')
  }

  each(ary1, function (i, n) {
    if(n !== ary2[i] ){
      throw new Error('ary1和ary2不相等。')
    }
  })

  console.log('ary1和ary2相等!');
}

compare([1,2,3], [1,2, 3])

外部迭代器

外部迭代器必须显示请求迭代下一个元素,虽然这样做会增加调用的复杂度,但也会增强迭代的操作灵活性,程序可以手工控制迭代的过程和顺序。

外部迭代器示例代码1:

let Iterator = function (obj) {
  let current = 0;

  let next = function () {
    current += 1
  }

  let isNotDone = function () {
    return current <= obj.length
  }

  let getCurrentItem = function () {
    return obj[current];
  }

  return {
    next,
    isNotDone,
    getCurrentItem
  }
}

//外部迭代器通过next方法进行手工迭代
let arr = ['a', true, false, '10', 88, 741]
let iterator1 = Iterator(arr)
console.log(iterator1.getCurrentItem()); // a
iterator1.next() 
console.log(iterator1.getCurrentItem()); // true
iterator1.next() 
console.log(iterator1.getCurrentItem()); // false
iterator1.next() 
console.log(iterator1.getCurrentItem()); // '10'


//改写compare函数
let compare = function (iterator1, iterator2) {
  while(iterator1.isNotDone() && iterator2.isNotDone()){
    if(iterator1.getCurrentItem() !== iterator2.getCurrentItem()){
      throw new Error('iterator1和iterator2不相等。')
    }
    iterator1.next()
    iterator2.next()
  }

  console.log('iterator1和iterator2相等。');
}

let iterator1 = Iterator([1, 2, 3, 4])
let iterator2 = Iterator([1, 2, 3, 4, 5])

compare(iterator1, iterator2)  //iterator1和iterator2不相等。

外部迭代器示例代码2:

let Iterator = function (array) {
  let nextIndex = 0;

  return {
    next: function () {
      return nextIndex < array.length ?
          {value: array[nextIndex++], done: false}:
          {done: true};
    }
  }
}

let it = Iterator(['a', 3, 10])
console.log(it.next().value);  //a
console.log(it.next().value);  //3
console.log(it.next().value);  //10  迭代到这步已经把所有值都迭代完成
console.log(it.next().done);  //true

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
vue实现员工信息录入功能
Jun 11 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 #Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 #Javascript
vue引用外部JS的两种种方法
Jan 28 #Javascript
Java Varargs 可变参数用法详解
Jan 28 #Javascript
关于引入vue.js 文件的知识点总结
Jan 28 #Javascript
JS简单表单验证功能完整示例
Jan 26 #Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 #Javascript
You might like
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
js定义类的方法示例【ES5与ES6】
2019/07/30 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
Python通过命令开启http.server服务器的方法
2017/11/04 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
解读python如何实现决策树算法
2018/10/11 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
如何利用Python写个坦克大战
2020/11/18 Python
企业演讲稿范文
2013/12/28 职场文书
英语教学随笔感言
2014/02/20 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
【2·13】一图读懂中国无线电发展
2022/02/18 无线电