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

文章目录

  • 前言
  • 介绍
  • 实现接口
  • 优缺点
  • 应用场景
  • 后言

前言

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

优缺点

优点:

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

缺点:

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

应用场景

需要遍历不同类型集合对象的场景:如果系统需要统一遍历不同类型的集合对象,迭代器模式可以提供一个统一的遍历接口。
需要隐藏集合内部结构的场景:当希望遍历集合对象而又不暴露其内部结构时,可以使用迭代器模式。
支持逆向遍历的场景:如果需要对集合进行逆向遍历,迭代器模式提供了灵活的解决方案。

后言

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137832.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centerOS下docker 搭建IotDB集群

一、准备3台机器&#xff0c;IP地址依次为IP1&#xff0c;IP2&#xff0c;IP3&#xff0c;找一个目录下建立文件夹如下&#xff1a; ./data/confignode ./logs/confignode ./data/datanode ./logs/datanode二、在当前目录下建立docker-compose.yml文件&#xff0c;3台都要 1、…

比较PID控制和神经网络控制在机器人臂上的应用

机器人臂是自动化领域中常见的机器人形式&#xff0c;其精确控制对于实现复杂任务具有重要意义。在机器人臂的控制中&#xff0c;PID控制和神经网络控制是两种常用的控制方法。本文将比较PID控制和神经网络控制在机器人臂控制方面的应用&#xff0c;包括控制原理、优缺点以及在…

Angular 由一个bug说起之一:List / Grid的性能问题

在angular中&#xff0c;MatTable构建简单&#xff0c;使用范围广。但某些时候会出现卡顿 卡顿情景&#xff1a; 1&#xff1a;一次性请求太多的数据 2&#xff1a;一次性渲染太多数据&#xff0c;这会花费CPU很多时间 3&#xff1a;行内嵌套复杂的元素 4&#xff1a;使用过多的…

【Docker】Docker 网络

引言 Docker是一个开源的应用容器引擎&#xff0c;它允许开发者将应用及其依赖打包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器或Windows机器上&#xff0c;也可以实现虚拟化。Docker的主要优势之一是其网络功能&#xff0c;而网络功能的核心就是网络驱动…

HTTP协议详解-下(Tomcat)

如何构造 HTTP 请求 对于 GET 请求 地址栏直接输入点击收藏夹html 里的 link script img a…form 标签 通过 form 标签构造GET请求 <body><!-- 表单标签, 允许用户和服务器之间交互数据 --><!-- 提交的数据报以键值对的结果来组织 --><form action&quo…

jQuery 网页属性操作

jQuery提供了一些方法&#xff0c;例如 attr() 、 html() 、 text() 和 val() &#xff0c;它们充当了HTML文档中内容的获取器和设置器。 jQuery – 获取内容 jQuery提供了 html() 和 text() 方法来提取匹配的HTML元素的内容。以下是这两种方法的语法&#xff1a; $(selector…

18 Linux 阻塞和非阻塞 IO

一、阻塞和非阻塞 IO 1. 阻塞和非阻塞简介 这里的 IO 指 Input/Output&#xff08;输入/输出&#xff09;&#xff0c;是应用程序对驱动设备的输入/输出操作。当应用程序对设备驱动进行操作的时候&#xff0c;如果不能获取到设备资源&#xff0c;那么阻塞式 IO 就会将对应应用…

Zynq-Linux移植学习笔记之65- 国产ZYNQ在linux下usleep时间精度不准问题解决

1、背景介绍 采用复旦微的ZYNQ&#xff0c;跑linux操作系统&#xff0c;在应用程序中使用usleep进行延时时&#xff0c;发现存在10ms以下采用usleep试验都为10ms的情况 2、解决办法 使能设备树中的PS TTC设备&#xff0c;默认不是打开的 timere0024000 {compatible "s…

一题三解(暴力、二分查找算法、单指针):鸡蛋掉落

涉及知识点 暴力、二分查找算法、单指针 题目 给你 k 枚相同的鸡蛋&#xff0c;并可以使用一栋从第 1 层到第 n 层共有 n 层楼的建筑。 已知存在楼层 f &#xff0c;满足 0 < f < n &#xff0c;任何从 高于 f 的楼层落下的鸡蛋都会碎&#xff0c;从 f 楼层或比它低的…

GEE ——errors & debuggings (2023GEE峰会总结)

简介&#xff1a; 在gee中有三种错误&#xff0c;一种就是系统错误&#xff0c;也就是我们看到的会在JavaScript code editor中出现的错误&#xff0c;也就是在程序还没有启动之前就会提示的错误&#xff0c;而客户端错误则主要是会提示一些在代码过程中的错误&#xff0c;比如…

远程电脑未连接显示器时分辨率太小的问题处理

背景&#xff1a;单位电脑显示器坏了&#xff0c;使用笔记本通过向日葵远程连接&#xff0c;发现分辨率只有800*600并且不能修改&#xff0c;网上找了好久找到了处理方法这里记录一下&#xff0c;主要用到的是一个虚拟显示器软件usbmmidd_v2 1)下载usbmmidd_v2 2&#xff09;…

asp.net core mvc之模型绑定、特性约束模型绑定、模型验证(服务器/客户端/远程)

一、不用模型绑定 数据类型都是string 1、UserController.cs public class UserController : Controller {public IActionResult Register(){return View();}[HttpPost]public IActionResult DoRegister(){//不用模型绑定 以前的方法取表单数据或Url的参数//数据类型都是s…

openssl+SM2开发实例一(含源码)

一、SM2算法介绍 SM2&#xff08;国密算法2&#xff09; 是中国国家密码管理局&#xff08;CNCA&#xff09;颁布的椭圆曲线密码算法标准&#xff0c;属于非对称加密算法。它基于椭圆曲线离散对数问题&#xff0c;提供了安全可靠的数字签名、密钥交换和公钥加密等功能。SM2被设…

软件测试项目实战经验附视频以及源码【商城项目,app项目,电商项目,银行项目,医药项目,金融项目】(web+app+h5+小程序)

前言&#xff1a; ​​大家好&#xff0c;我是阿里测试君。 最近很多小伙伴都在面试&#xff0c;但是对于自己的项目经验比较缺少。阿里测试君再度出马&#xff0c;给大家找了一个非常适合练手的软件测试项目&#xff0c;此项目涵盖web端、app端、h5端、小程序端&#xff0c;…

Anaconda Powershell Prompt和Anaconda Prompt的区别

先说结论&#xff1a;主要功能应该一样。区别在于powershell支持的命令更多。比如查询路径的命令pwd和列表命令ls。 Anaconda PowerShell Prompt和Anaconda Prompt是Anaconda发行版中两个不同的命令提示符工具。 Anaconda Prompt是Anaconda发布的默认命令提示符工具&#xff0…

FFMPEG库实现mp4/flv文件(H264+AAC)的封装与分离

ffmepeg 4.4&#xff08;亲测可用&#xff09; 一、使用FFMPEG库封装264视频和acc音频数据到 mp4/flv 文件中 封装流程 1.使用avformat_open_input分别打开视频和音频文件&#xff0c;初始化其AVFormatContext&#xff0c;使用avformat_find_stream_info获取编码器基本信息 2.使…

【链接装载与库】 Linux共享库的组织

Linux共享库的组织 由于动态链接的诸多优点&#xff0c;大量的程序开始使用动态链接机制&#xff0c;导致系统里面存在数量 极为庞大的共享对象。如果没有很好的方法将这些共享对象组织起来&#xff0c;整个系统中的共享对象文件则会散落在各个目录下&#xff0c;给长期的维护…

react之Component存在的2个问题

问题 只要执行setState()&#xff0c;即使不改变状态数据&#xff0c;组件也会重新render()只当前组件重新render()&#xff0c;就会自动重新render子组件 原因 Component中的shouldComponentUpdate()总是返回true 思路 只有当组件的state或props数据发生改变时才重新rend…

听GPT 讲Rust源代码--library/core/src

题图来自 The first unofficial game jam for Rust lang![1] File: rust/library/core/src/hint.rs rust/library/core/src/hint.rs文件的作用是提供了一些用于提示编译器进行优化的函数。 在Rust中&#xff0c;编译器通常会根据代码的语义进行自动的优化&#xff0c;以提高程序…

React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass less】(十三)

文件目录 Proxying in Development http-proxy-middleware fetch_get fetch 是否成功 axios 全局处理 antd UI库 更改主题 使用css module的情况下修改第三方库的样式 支持sass & less Proxying in Development 在开发模式下&#xff0c;如果客户端所在服务器跟后…