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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 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
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
js自带函数备忘 数组
2006/12/29 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Python collections模块实例讲解
2014/04/07 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
python实现中文文本分句的例子
2019/07/15 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
pytorch 共享参数的示例
2019/08/17 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python对验证码降噪的实现示例代码
2019/11/12 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
新大陆软件面试题
2016/11/24 面试题
会计专业自我鉴定
2014/02/10 职场文书
小学大队长竞选稿
2015/11/20 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python