前端设计模式之【迭代器模式】

简介: 前端设计模式之【迭代器模式】

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端设计模式

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

介绍

迭代器模式是一种行为设计模式,它允许你在不暴露集合内部结构的情况下遍历集合中的元素。这种模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。


迭代器模式主要包括两个角色:迭代器(Iterator)和可迭代对象(Iterable)。迭代器是负责定义访问和遍历元素的接口,而可迭代对象则是具体的集合或容器,它提供了创建迭代器的方法,并且可以被迭代器按照一定规则遍历其中的元素。


通过迭代器模式,我们可以将对集合元素的操作与集合本身分离开来,使得遍历方式可以独立于集合进行变化。这样一来,无论是数组、链表还是其他类型的集合,都可以通过相同的迭代器接口进行遍历,从而提高了代码的可重用性和灵活性。

实现接口

一个迭代器通常需要实现以下接口:


  • hasNext():判断迭代是否结束,返回Boolean
  • next():查找并返回下一个元素
    为Javascript的数组实现一个迭代器可以这么写:


const item = [1, 'red', false, 3.14];
function Iterator(items) {
  this.items = items;
  this.index = 0;
}
Iterator.prototype = {
  hasNext: function () {
    return this.index < this.items.length;
  },
  next: function () {
    return this.items[this.index++];
  }
}


验证一下迭代器是否工作:


const iterator = new Iterator(item);
while(iterator.hasNext()){
  console.log(iterator.next());
}
//输出:1, red, false, 3.14


ES6提供了更简单的迭代循环语法 for…of,使用该语法的前提是操作对象需要实现 可迭代协议(The iterable protocol),简单说就是该对象有个Key为 Symbol.iterator 的方法,该方法返回一个iterator对象。


比如我们实现一个 Range 类用于在某个数字区间进行迭代:


function Range(start, end) {
  return {
    [Symbol.iterator]: function () {
      return {
        next() {
          if (start < end) {
            return { value: start++, done: false };
          }
          return { done: true, value: end };
        }
      }
    }
  }
}


验证一下:


for (num of Range(1, 5)) {
  console.log(num);
}
// 输出:1, 2, 3, 4


优缺点

优点:

  • 分离集合对象与遍历行为:迭代器模式能够将集合对象与遍历行为分离,使得可以独立地改变集合对象的遍历方式。
  • 统一遍历接口:迭代器模式提供了统一的遍历接口,使得客户端代码可以以相同的方式访问不同类型的集合对象。
  • 支持逆向遍历:一些迭代器模式的实现还支持逆向遍历,这使得对集合元素的访问更加灵活。
  • 支持延迟加载:有些情况下,集合对象可能包含大量的元素,而并不是每次都需要遍历所有元素,迭代器模式可以支持延迟加载,只在需要时才获取元素,从而节省资源。

缺点:

  • 增加了复杂度:在一些简单的应用场景下,使用迭代器模式可能会增加代码的复杂度,使得代码难以理解。
  • 内存占用:在某些语言或环境中,迭代器可能会占用额外的内存空间。

应用场景


需要遍历不同类型集合对象的场景:如果系统需要统一遍历不同类型的集合对象,迭代器模式可以提供一个统一的遍历接口。

需要隐藏集合内部结构的场景:当希望遍历集合对象而又不暴露其内部结构时,可以使用迭代器模式。

支持逆向遍历的场景:如果需要对集合进行逆向遍历,迭代器模式提供了灵活的解决方案。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
打赏
0
0
0
0
21
分享
相关文章
精进前端开发:深入探讨前端设计模式
精进前端开发:深入探讨前端设计模式
88 0
前端设计模式之【工厂模式】
前端设计模式之【工厂模式】
81 0
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
150 11
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
92 0
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
78 1
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践
条件判断的模式问题之为什么不建议在前端日常业务开发中使用OOP的责任链模式实践
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    24
  • 3
    详解智能编码在前端研发的创新应用
    17
  • 4
    巧用通义灵码,提升前端研发效率
    16
  • 5
    智能编码在前端研发的创新应用
    12
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    10
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    28
  • 8
    VSCode AI提效工具,通义灵码前端开发体验
    71
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    13