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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
给网站上的广告“加速”显示的方法
Apr 08 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
jQuery常用选择器详解
Jul 17 jQuery
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
Vue实现简单的拖拽效果
Aug 25 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利用cookie实现访问次数统计代码
2011/05/19 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
js 调用父窗口的具体实现代码
2013/07/15 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
js实现移动端轮播图
2020/12/21 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python调用windows api锁定计算机示例
2014/04/17 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python实现多人聊天室
2020/03/31 Python
详解Python 解压缩文件
2019/04/09 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
创先争优演讲稿
2014/09/15 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python