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中System.Timers.Timer的使用方法
Mar 20 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
vue使用canvas实现移动端手写签名
Sep 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
php分页函数
2006/07/08 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
Javascript之文件操作
2007/03/07 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
工作的心得体会
2013/12/31 职场文书
求职信需要的五点内容
2014/02/01 职场文书
就业表自我评价分享
2014/02/06 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
品质保证书格式
2015/02/28 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android
MySQL数据库 任意ip连接方法
2022/05/20 MySQL