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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
详解Vite的新体验
Feb 22 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
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php数组指针操作详解
2017/02/14 PHP
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Vue动态获取width的方法
2018/08/22 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
tornado 多进程模式解析
2018/01/15 Python
python实现Decorator模式实例代码
2018/02/09 Python
python中scikit-learn机器代码实例
2018/08/05 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python路径的写法及目录的获取方式
2019/12/26 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
pandas数据拼接的实现示例
2020/04/16 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
前台文员的岗位职责
2013/11/14 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
物理教育专业求职信
2014/06/25 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
刮痧观后感
2015/06/05 职场文书
九年级语文教学反思
2016/03/03 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server