JavaScript设计模式-迭代者模式(18)

简介: JavaScript设计模式-迭代者模式(18)

迭代器设计模式是指提供一个方法去访问一个有序复杂数据,这些数据在内部有可能会用复杂的结构进行存储,我们可以通过方法进行访问这种数据的内部的每一个元素,使用该数据无需知道是如何拿到的,只要能够进行操作即可

迭代器设计模式在生活中的运用


在生活中我们可以用收音机来表示迭代器设计模式,用户搜索到广播电台,然后从某个广播电台开始,通过向前向后的按钮进行控制遍历收听所有的广播频道,我们也可以以音乐播放器为例子,通过音乐播放器的上一首下一首按钮进行控制播放浏览的音乐,它们也可以说是提供了一个迭代器接口,进行遍历每一个频道或歌曲

迭代器设计模式在业务上的应用


迭代器设计模式在业务中分为内部迭代器和外部迭代器

内部迭代器


内部迭代器我们常见的是数组的forEach方法,内部迭代器一般都有自己的规则,我们需要按照他们特定的要求进行使用,缺点也显而易见,由于迭代规则已经约定好了,我们必须按照他们所约定的规则进行使用,所以我们如果出现某些特性需求,内部迭代器则无法满足

let arr = [{ name: "前端" }, { name: '后端' }, { name: '运维' }];
//通过forEach方法对数据进行迭代,forEach方法接收一个回调函数,该回调函数中接收三个参数,第一个是当前的循环的每一项,第二个是当前索引,第三个是当前迭代的总数组,这就是内部迭代器的规则
        arr.forEach(function(res,index,arr){
            console.log(res.name);
        })

外部迭代器


外部迭代器必须显式的进行迭代,增加了调用的复杂度同时也相对的增加了迭代器的灵活性,可以手动的进行操控迭代过程以及迭代顺序,将迭代相关的数据暴露出来进行处理后返回


我们来手写一个外部迭代器方法,里面拥有一个标记index参数,用于获取下一次数据,拥有一个next方法,该方法会进行对index标记进行自增后然后返回一个对象,对象中拥有俩个参数value是代表着当前标记下的数据,done是当前数据是否还能继续

往下调用next方法的标记,最后在返回一个全新的处理过后的数据,通过调用next方法可以看到当前的项的数据

const arr = [{name:"javaScript"}, {name:"Go"},{name:"Node.js"}];
        function Iterator(data) {
            let index = 0;
            function next(){
                index++;
                return {
                    value: data[index],
                    done: data.length == index
                }
            };
            return {
                next
            }
        }

使用外部迭代器

const iter = Iterator(arr);
        console.log(iter.next());
        console.log(iter.next());
        console.log(iter.next());
复制代码

迭代器设计模式能够可以让我们更方便的且有规矩的进行访问复合数据的每一项,也可以通过迭代器进行完成一些流线式操作


坚持努力,无惧未来!

相关文章
|
3月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式(Template Pattern)是一种行为型设计模式,父类定义固定流程和步骤顺序,子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景,如组装汽车、包装礼物等。举例来说,公司年会节目征集时,蜘蛛侠定义了歌曲的四个步骤:前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑,子类实现个性化行为,从而减少重复代码。模板模式还支持钩子方法,允许跳过某些步骤,增加灵活性。
183 11
|
1月前
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
173 44
|
13天前
|
设计模式 Java 关系型数据库
设计模式:工厂方法模式(Factory Method)
工厂方法模式是一种创建型设计模式,通过将对象的创建延迟到子类实现解耦。其核心是抽象工厂声明工厂方法返回抽象产品,具体工厂重写该方法返回具体产品实例。适用于动态扩展产品类型、复杂创建逻辑和框架设计等场景,如日志记录器、数据库连接池等。优点包括符合开闭原则、解耦客户端与具体产品;缺点是可能增加类数量和复杂度。典型应用如Java集合框架、Spring BeanFactory等。
|
4月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
|
2月前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展(配置工厂)
该设计通过配置文件和反射机制动态选择具体工厂,减少硬编码依赖,提升系统灵活性和扩展性。配置文件解耦、反射创建对象,新增产品族无需修改客户端代码。示例中,`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象,客户端调用时只需指定名称即可获取对应产品实例。
93 40
|
1月前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
28 8
|
2月前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式,通过工厂类根据传入参数创建不同类型的对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
70 19
|
2月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
123 33
|
2月前
|
设计模式 Java
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式(Builder Pattern)是一种创建型设计模式,用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程,定制对象的组成部分,而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性;缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
64 12
|
2月前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式,通过一个工厂类根据传入参数创建不同类型的产品对象,也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好;缺点是扩展性差,增加新产品时需修改工厂类代码,违反开闭原则。
59 15

热门文章

最新文章