欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js设计模式:什么是迭代器模式?js迭代器模式的介绍

程序员文章站 2022-04-01 13:53:58
...
本篇文章给大家带来的内容是关于js设计模式:什么是迭代器模式?js迭代器模式的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是迭代器模式?

定义:提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。

主要解决:不同的方式来遍历整个整合对象。

何时使用:遍历一个聚合对象。

如何解决:把在元素之间游走的责任交给迭代器,而不是聚合对象。

关键代码:定义接口:done, next。

迭代器模式优点: 1、它支持以不同的方式遍历一个聚合对象。 2、迭代器简化了聚合类。 3、在同一个聚合上可以有多个遍历。 4、在迭代器模式中,增加新的聚合类和迭代器类都很方便,无须修改原有代码。

迭代器模式缺点:由于迭代器模式将存储数据和遍历数据的职责分离,增加新的聚合类需要对应增加新的迭代器类,类的个数成对增加,这在一定程度上增加了系统的复杂性。

迭代器模式使用场景: 1、访问一个聚合对象的内容而无须暴露它的内部表示。 2、需要为聚合对象提供多种遍历方式。 3、为遍历不同的聚合结构提供一个统一的接口。

注意事项:迭代器模式就是分离了集合对象的遍历行为,抽象出一个迭代器来负责,这样既可以做到不暴露集合的内部结构,又可让外部代码透明地访问集合内部的数据。

实现一个内部的迭代器

function each(arr, fn) {    
for (let i = 0; i < arr.length; i++) {
        fn(i, arr[i])
    }
}

each([1, 2, 3], function(i, n) {
    console.log(i) // 0 1 2
    console.log(n) // 1 2 3})

可以看出内部迭代器在调用的时候非常简单,使用者不用关心迭代器内部实现的细节,但这也是内部迭代器的缺点。比如要比较两数组是否相等,只能在其回调函数中作文章了,代码如下:

const compare = function(arr1, arr2) {
    each(arr1, function(i, n) {        
    if (arr2[i] !== n) {
            console.log('两数组不等')            
            return
        }
    })
    console.log('两数组相等')
}

const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3]
compare(arr1, arr2) // 两数组相等

实现一个外部的迭代器

const iterator = function(arr) {
  let current = 0
  const next = function() {
    current = current + 1
  }
  const done = function() {
    return current >= arr.length
  }
  const value = function() {
    return arr[current]
  }
  return {
    next,
    done,
    value,
  }
}

const arr1 = [1, 2 ,3]
const arr2 = [1, 2, 3]
const iterator1 = iterator(arr1)
const iterator2 = iterator(arr2)

const compare = function(iterator1, iterator2) {
  while (!iterator1.done() && !iterator2.done()) {
    if (iterator1.value() !== iterator2.value()) {
      console.log('两数组不等')
      return
    }
    iterator1.next() // 外部迭代器将遍历的权利转移到外部
    iterator2.next()
  }
  console.log('两数组相等')
}

compare(iterator1, iterator2)

相关推荐:

js设计模式:什么是代理模式 ?js代理模式的介绍

js设计模式:什么是策略模式?js策略模式的介绍

以上就是js设计模式:什么是迭代器模式?js迭代器模式的介绍的详细内容,更多请关注其它相关文章!

相关标签: js设计模式