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 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
countup.js实现数字动态叠加效果
Oct 17 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
通过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
第六节 访问属性和方法 [6]
2006/10/09 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python使用PyFetion来发送短信的例子
2014/04/22 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
我就是这样学习Python中的列表
2019/06/02 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
python开根号实例讲解
2020/08/30 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
仓库管理专业个人自我评价范文
2013/11/11 职场文书
预备党员承诺书
2014/03/25 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
投标单位介绍信
2015/05/05 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
鉴史问廉观后感
2015/06/10 职场文书
关于远足的感想
2015/08/10 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python