当前位置: 首页 > news >正文

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

迭代器模式是一种行为设计模式,它允许我们按照特定的方式遍历集合对象,而无需暴露其内部实现。在前端开发中,迭代器模式可以帮助我们更好地管理和操作数据集合。

迭代器模式特性

  1. 封装集合对象的内部结构,使其对外部透明。
  2. 提供一种统一的遍历方式,无需关心集合对象的具体实现。
  3. 支持多种遍历方式,如正向、反向、跳跃等。

应用示例

1. 数组迭代器

 
class ArrayIterator {constructor(array) {this.array = array;this.index = 0;}hasNext() {return this.index < this.array.length;}next() {return this.array[this.index++];}
}const array = [1, 2, 3, 4, 5];
const iterator = new ArrayIterator(array);while (iterator.hasNext()) {console.log(iterator.next());
}

上述示例定义了一个名为 ArrayIterator 的类,该类用于迭代一个数组。这个类有两个方法:hasNext 和 next

  • hasNext 方法检查是否还有下一个元素。如果有,它返回 true;否则,返回 false
  • next 方法返回当前元素并将索引递增,从而准备访问下一个元素。

然后,代码创建了一个名为 array 的数组,接下来,它使用这个数组创建一个 ArrayIterator 实例。

最后,使用 while 循环和 hasNext 方法来检查是否还有下一个元素。如果有,它就使用 next 方法来获取该元素并将其打印到控制台。这个过程会一直持续到没有更多元素为止。

2. 对象迭代器

 
class ObjectIterator {constructor(object) {this.object = object;this.keys = Object.keys(object);this.index = 0;}hasNext() {return this.index < this.keys.length;}next() {const key = this.keys[this.index++];return { key, value: this.object[key] };}
}const object = { name: 'John', age: 25, gender: 'male' };
const iterator = new ObjectIterator(object);while (iterator.hasNext()) {const { key, value } = iterator.next();console.log(`${key}: ${value}`);
}

上述示例定义了一个名为 ObjectIterator 的类,该类用于迭代一个对象。这个类有三个属性:

  • object:传入的对象。
  • keys:对象的键名数组。
  • index:当前迭代到的键的索引。

它有两个方法:

  • hasNext:检查是否还有下一个键-值对。如果有,返回 true;否则,返回 false
  • next:返回当前迭代到的键和对应的值,并将索引递增,以便下一次迭代。

然后,创建了一个名为 object 的对象,其中包含三个属性:nameage 和 gender。接下来,它使用这个对象创建一个 ObjectIterator 实例。

最后,代码使用 while 循环和 hasNext 方法来检查是否还有下一个键-值对。如果有,它就使用 next 方法来获取该键-值对并将其打印到控制台。这个过程会一直持续到没有更多键-值对为止。

优缺点

优点
  1. 提供一种统一的遍历方式,简化代码逻辑。
  2. 封装集合对象的内部结构,提高代码的可维护性和可扩展性。
  3. 支持多种遍历方式,灵活性高。
缺点
  1. 增加了额外的类和方法,增加了代码复杂度。
  2. 对于简单的数据集合,使用迭代器模式可能会显得过于繁琐。

总结

迭代器模式是一种非常有用的设计模式,在前端开发中可以帮助我们更好地管理和操作数据集合。它通过封装集合对象的内部结构,并提供统一的遍历方式,使得代码更加简洁、可维护和可扩展。然而,在使用迭代器模式时需要权衡其优缺点,并根据具体情况进行选择。

相关文章:

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

迭代器模式是一种行为设计模式&#xff0c;它允许我们按照特定的方式遍历集合对象&#xff0c;而无需暴露其内部实现。在前端开发中&#xff0c;迭代器模式可以帮助我们更好地管理和操作数据集合。 迭代器模式特性 封装集合对象的内部结构&#xff0c;使其对外部透明。提供一…...

【Android知识笔记】图片专题(BitmapDrawable)

如何计算一张图片的占用内存大小? 注意是占用内存,不是文件大小可以运行时获取重要的是能直接掌握计算方法基础知识 Android 屏幕像素密度分类: (其实还有一种 ldpi = 120,不过这个已经绝种了,所以最低的只需关心mdpi即可) 上表中的比例为:m : h : xh : xxh: xxxh = …...

前端工程化知识系列(10)

目录 91. 了解前端工程化中的容器化和云部署概念&#xff0c;以及如何使用Docker和Kubernetes等工具来实现它们&#xff1f;92. 你如何管理前端项目的文档和知识共享&#xff0c;以确保团队成员都能理解和使用前端工程化工具和流程&#xff1f;93. 了解前端开发中的大规模和跨团…...

大数据flink篇之三-flink运行环境安装(一)单机Standalone安装

一、安装包下载地址 https://archive.apache.org/dist/flink/flink-1.15.0/ 二、安装配置流程 前提基础&#xff1a;Centos环境&#xff08;建议7以上&#xff09; 安装命令&#xff1a; 解压&#xff1a;tar -zxvf flink-xxxx.tar.gz 修改配置conf/flink-conf.yaml&#xff1…...

Redisson使用延时队列

延时队列 在开发中&#xff0c;有时需要使用延时队列。 比如&#xff0c;订单15分钟内未支付自动取消。 jdk延时队列 如果使用 jdk自带的延时队列&#xff0c;那么服务器挂了或者重启时&#xff0c;延时队列里的数据就会失效&#xff0c;可用性比较差。 Redisson延时队列 …...

基于php 进行每半小时钉钉预警

前言 业务场景&#xff1a;监控当前业务当出现并发情况时技术人员可以可以及时处理 使用技术栈&#xff1a; laravelredis 半小时触发一次报警信息实现思路 1、xshell脚本 具体参数就不详细解释了&#xff0c;想要详细了解可以自行百度 curl -H "Content-Type:appl…...

5.Python-使用XMLHttpRequest对象来发送Ajax请求

题记 使用XMLHttpRequest对象来发送Ajax请求&#xff0c;以下是一个简单的实例和操作过程。 安装flask模块 pip install flask 安装mysql.connector模块 pip install mysql-connector-python 编写app.py文件 app.py文件如下&#xff1a; from flask import Flask, reque…...

八皇后问题的解析与实现

问题描述 八皇后问题是一个古老而又著名的问题。 时间退回到1848年,国际西洋棋棋手马克斯贝瑟尔提出了这样的一个问题: 在88格的国际象棋上摆放八个皇后,使其不能互相攻击,即任意两个皇后都不能处于同一行、同一列或同一斜线上,问一共有多少种摆法。 如何找到这所有的…...

论文浅尝 | 深度神经网络的模型压缩

笔记整理&#xff1a;闵德海&#xff0c;东南大学硕士&#xff0c;研究方向为知识图谱 链接&#xff1a;https://arxiv.org/abs/1412.6550 动机 提高神经网络的深度通常可以提高网络性能&#xff0c;但它也使基于梯度的训练更加困难&#xff0c;因为更深的网络往往更加强的非线…...

进阶JAVA篇- DateTimeFormatter 类与 Period 类、Duration类的常用API(八)

目录 1.0 DateTimeFormatter 类的说明 1.1 如何创建格式化器的对象呢&#xff1f; 1.2 DateTimeFormatter 类中的 format&#xff08;LocalDateTime ldt&#xff09; 实例方法 2.0 Period 类的说明 2.1 Period 类中的 between(localDate1,localDate2) 静态方法来创建对象。 3.…...

1.1 Windows驱动开发:配置驱动开发环境

在进行驱动开发之前&#xff0c;您需要先安装适当的开发环境和工具。首先&#xff0c;您需要安装Windows驱动开发工具包&#xff08;WDK&#xff09;&#xff0c;这是一组驱动开发所需的工具、库、示例和文档。然后&#xff0c;您需要安装Visual Studio开发环境&#xff0c;以便…...

Jetpack:009-kotlin中的lambda、匿名函数和闭包

文章目录 1. 概念介绍2. 使用方法2.1 函数类型的变量2.2 高阶函数 3. 内容总结4.经验分享 我们在上一章回中介绍了Jetpack中Icon和Imamg相关的内容&#xff0c;本章回中主要介绍Kotlin中的 lambda、匿名函数和闭包。闲话休提&#xff0c;让我们一起Talk Android Jetpack吧&…...

openGauss指定schema下全部表结构备份与恢复

本次测试针对openGauss版本为2.0.5 gs_dump指定schema下全部表结构信息备份 gs_dump database_name -U username -p port -F c -s -n schema_name -f schema.sqldatabase_name&#xff1a;数据库名&#xff0c;要备份的数据库名称 username&#xff1a;用户名&#xff0c;数据…...

干货:如何在前端统计用户访问来源?

在前端统计用户访问来源是一个常见的需求&#xff0c;通过获取访问来源信息&#xff0c;我们可以了解用户是通过直接访问、搜索引擎、外部链接等途径进入我们的网站或应用。下面是一个详细的介绍&#xff0c;包括方法和实现步骤。 一、获取HTTP Referer HTTP Referer是HTTP请…...

李宏毅生成式AI课程笔记(持续更新

01 ChatGPT在做的事情 02 预训练&#xff08;Pre-train&#xff09; ChatGPT G-Generative P-Pre-trained T-Transformer GPT3 ----> InstructGPT&#xff08;经过预训练的GPT3&#xff09; 生成式学习的两种策略 我们在使用ChatGPT的时候会注意到&#xff0c;网站上…...

nodejs+vue+elementui酒店客房服务系统mysql带商家

视图层其实质就是vue页面&#xff0c;通过编写vue页面从而展示在浏览器中&#xff0c;编写完成的vue页面要能够和控制器类进行交互&#xff0c;从而使得用户在点击网页进行操作时能够正常。 简单的说 Node.js 就是运行在服务端的 JavaScript。 前端技术&#xff1a;nodejsvueel…...

【网络协议】聊聊网络分层

常用的网络协议 首先我们输入www.taobao.com&#xff0c;会先经过DNS进行域名解析&#xff0c;转换为59.82.122.115的公网IP地址。然后就会发起请求&#xff0c;一般来说非加密的使用http&#xff0c;加密的使用https。上面是在应用层做的处理&#xff0c;那么接下来就是到传输…...

[开源]基于Vue+ElementUI+G2Plot+Echarts的仪表盘设计器

一、开源项目简介 基于SpringBoot、MyBatisPlus、ElementUI、G2Plot、Echarts等技术栈的仪表盘设计器&#xff0c;具备仪表盘目录管理、仪表盘设计、仪表盘预览能力&#xff0c;支持MySQL、Oracle、PostgreSQL、MSSQL、JSON等数据集接入&#xff0c;对于复杂数据处理还可以使用…...

html设置前端加载动画

主体思路参考&#xff1a; 前端实现页面加载动画_边城仔的博客-CSDN博客 JS图片显示与隐藏案例_js控制图片显示隐藏-CSDN博客 1、编写load.css /* 显示加载场景 */ .loadBackGround{position: absolute;top: 0px;text-align: center;width: 100%;height: 100vh;background-c…...

【git的使用方法】——上传文件到gitlab仓库

先进入到你克隆下来的仓库的目录里面 比如&#xff1a;我的仓库名字为zhuox 然后将需要上传推送的文件拷贝到你的克隆仓库下 这里的话我需要拷贝的项目是t3 输入命令ls&#xff0c;就可以查看该文件目录下的所有文件信息 然后输入git add 文件名 我这边输入的是 &#x…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...