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 相关文章推荐
JS常见问题整理(持续更新)
Aug 06 Javascript
js实现的map方法示例代码
Jan 13 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
PHP实现递归的三种方法
2020/07/04 PHP
Jquery 扩展方法
2010/05/06 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
小学科学教学反思
2014/01/26 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
师德师风事迹材料
2014/12/20 职场文书
付款承诺函范文
2015/01/21 职场文书
助学感谢信范文
2015/01/21 职场文书
地陪导游欢迎词
2015/01/26 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js