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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
javascript 常见功能汇总
Jun 11 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
js中创建对象的几种方式
Feb 05 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
ReactRouter的实现方法
Jan 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程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
vue实现循环切换动画
2018/10/17 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中的sort()方法使用基础教程
2017/01/08 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
简历里的自我评价范文
2014/02/24 职场文书
大家访活动实施方案
2014/03/10 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
个人政治思想总结
2015/03/05 职场文书
聘用合同范本
2015/09/21 职场文书
导游词幽默开场白
2019/06/26 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang