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函数
Nov 20 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 Javascript
js实现有趣的倒计时效果
Jan 19 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 常用算法和时间复杂度
2013/07/01 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
javascript引导程序
2008/10/26 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
怎样写演讲稿
2014/01/04 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
白岩松演讲
2014/05/21 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
比赛主持人开场白
2015/05/29 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL