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中的call实现继承
Jan 22 Javascript
asp 取文本框名称代码
Dec 02 Javascript
jquery对表单操作2
Apr 06 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python线程创建和终止实例代码
2018/01/20 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Python如何在bool函数中取值
2020/09/21 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
班组长工作职责
2013/12/25 职场文书
小区消防演习方案
2014/02/21 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书