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 相关文章推荐
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
vue-loader教程介绍
Jun 14 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
JS实现数组去重的11种方法总结
Apr 04 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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python lxml模块安装教程
2015/06/02 Python
Django自定义分页效果
2017/06/27 Python
selenium+python环境配置教程详解
2019/05/28 Python
python中的global关键字的使用方法
2019/08/20 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python configparser模块应用过程解析
2020/08/14 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
单位实习鉴定评语
2015/01/04 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
golang为什么要统一错误处理
2022/04/03 Golang
Python 视频画质增强
2022/04/28 Python