javascript设计模式之迭代器模式

 更新时间:2020年01月30日 09:35:47   作者:一期一会  
这篇文章主要为大家详细介绍了javascript设计模式之迭代器模式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

迭代器模式分为内部迭代器和外部迭代器,内部迭代器就是在函数内部定义好迭代的规则,它完全接手整个迭代的过程,外部只需一次初始调用。

内部迭代器

以下自行实现的类似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中的this绑定介绍

    Javascript中的this绑定介绍

    在Javascript里,函数被调用的时候,除了接受声明是定义的形式参数,每一个函数还接受两个附加的参数:this和arguments。
    2011-09-09
  • js+html制作简单日历的方法

    js+html制作简单日历的方法

    这篇文章主要为大家详细介绍了js html制作简单日历的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JavaScript通过元素索引号删除数组中对应元素的方法

    JavaScript通过元素索引号删除数组中对应元素的方法

    这篇文章主要介绍了JavaScript通过元素索引号删除数组中对应元素的方法,涉及javascript操作数组的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • 谈谈JavaScript令人迷惑的==与+

    谈谈JavaScript令人迷惑的==与+

    这篇文章主要介绍了JavaScript中==与+的使用方法,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-08-08
  • JS交换变量的方法

    JS交换变量的方法

    这篇文章主要介绍了JS交换变量的方法,实例分析了javascript通过自定义函数实现变量交换的使用技巧,需要的朋友可以参考下
    2015-01-01
  • JS中如何让异步执行的方法同步执行

    JS中如何让异步执行的方法同步执行

    在写js的时候,很多时候都会遇到异步转同步的问题,下面这篇文章主要给大家介绍了关于JS中如何让异步执行的方法同步执行的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • js作用域和作用域链及预解析

    js作用域和作用域链及预解析

    这篇文章主要介绍了js作用域和作用域链及预解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 理解javascript函数式编程中的闭包(closure)

    理解javascript函数式编程中的闭包(closure)

    这篇文章主要帮助大家理解javascript函数式编程中的闭包(closure)概念,通俗地讲, JavaScript 中每个的函数都是一个闭包,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • requireJS模块化实现返回顶部功能的方法详解

    requireJS模块化实现返回顶部功能的方法详解

    这篇文章主要介绍了requireJS模块化实现返回顶部功能的方法,结合实例形式详细分析了requireJS的使用步骤及返回顶部功能的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • JS性能优化实现方法及优点进行

    JS性能优化实现方法及优点进行

    这篇文章主要介绍了JS性能优化实现方法及优点进行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08

最新评论