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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
jQuery each()小议
Mar 18 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
vuex与组件联合使用的方法
May 10 Javascript
JavaScript原型式继承实现方法
Nov 06 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图片裁剪函数(保持图像不变形)
2014/05/04 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
PHP MYSQL简易交互式站点开发
2016/12/27 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
python对html代码进行escape编码的方法
2015/05/04 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
英国名牌男装店:Standout
2021/02/17 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
路政管理求职信
2014/06/18 职场文书
安全标兵事迹材料
2014/08/17 职场文书
影视广告专业求职信
2014/09/02 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
给老婆的检讨书
2015/01/27 职场文书
个人求职自荐信范文
2015/03/06 职场文书
护士求职自荐信
2015/03/25 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android