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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
javascript基础知识讲解
Jan 11 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
Seajs源码详解分析
Apr 02 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 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
第八节 访问方式 [8]
2006/10/09 PHP
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
php 保留字列表
2012/10/04 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
js实现随机8位验证码
2020/07/24 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
python线程、进程和协程详解
2016/07/19 Python
python matlibplot绘制3D图形
2018/07/02 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python yield和Generator函数用法详解
2020/02/10 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
园艺师求职信
2014/03/10 职场文书
党性分析材料格式
2014/12/19 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
2022年显卡天梯图(6月更新)
2022/06/17 数码科技