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 学习技巧
Feb 17 Javascript
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
javascript页面倒计时实例
Jul 25 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
详解Vue.js 响应接口
Jul 04 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Django中FilePathField字段的用法
2020/05/21 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
学生手册家长评语
2014/02/10 职场文书
遗嘱格式范本
2015/08/07 职场文书
高中运动会广播稿
2015/08/19 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL