拆开JavaScript迭代器模式内部黑盒子

目录
  • 一、内部迭代器
  • 二、外部迭代器
  • 总结：

一、内部迭代器

迭代器模式，指的是提供一种方法顺序访问一个聚合对象或者数组中的各种元素，而又不暴露该对象的内部表示。

内部迭代器是自动的，将回调函数传入迭代器进行执行，访问到每一个元素都会执行传入迭代器中的回调函数。

模拟内部迭代器如下：

// 定义数组原型上的mapFn内部迭代器
Array.prototype.mapFn = function (callback) {
    let arr = this;
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
        newArr[i] = callback(arr[i], i, arr)
    }
    return newArr
}
// 定义原始数组
var arr = [1, 2, 3, 4, 5];
// 定义回调函数
var callback = val => val * 2;
// 执行数组的mapFn方法调用回调函数callback
var newArr = arr.mapFn(callback);
// 打印返回值
console.log(newArr)

callback函数可以传入三个参数，第一个参数表示当前的值，第二个参数表示当前索引，第三个参数表示正在操作的数组。返回值为新数组。

当前例子中，callback指的是val => val * 2,通过数组的mapFn方法执行callback函数，返回值为新的数组newArr。

在实际的使用中，Array.prototype.mapFn的内部实现是看不到的，就像我们看不到数组的操作map和forEach一样，这里如果将Array.prototype.mapFn作为黑盒子。就有如下的流程：

二、外部迭代器

外部迭代器是非自动的，提供了next方法，需要手动的去执行next()以进行下一个元素的访问。

// 定义迭代器生成函数
function makeIterator(array) {
    var nextIndex = 0;
    return {
        next: function () {
            return nextIndex < array.length ? {
                value: array[nextIndex++],
                done: false
            } : {
                value: undefined,
                done: true
            };
        }
    };
}
// 产生迭代器
var it = makeIterator(['a', 'b']);
// 通过迭代器暴露出来的next方法，外部调用迭代器
console.log(it.next()) // { "value": "a", "done": false }
console.log(it.next()) // { "value": "b", "done": false }
console.log(it.next()) // { "value": undefined, "done": true }

makeIterator返回next方法，每一次执行都会执行下一个迭代。done是否迭代结束，value是当前迭代获取到的值。如果done为true，对应的value就是undefined。

在实际的使用中，makeIterator的内部实现是看不到的，这里如果将makeIterator作为黑盒子。就有如下的流程：

总结：

目前JavaScript已经内置了多种内部迭代器，比如forEach、map、filter和reduce等，内部执行回调函数function(value, index, currentArr){ xxxx }对每个访问到的元素进行处理。通过generate和yield配合使用也可以产生外部迭代器，通过next()方法进行下一步的执行。

以上就是拆开JavaScript迭代器模式内部黑盒子的详细内容，更多关于JavaScript迭代器模式内部黑盒子的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS判断元素是否在可视区域技巧详解

    目录 前言 实现方式 offsetTop.scrollTop 注意 getBoundingClientRect 前言 在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如: 图片的懒加载 列表的无限滚动 计算广告元素的曝光情况 可点击链接的预加载 实现方式 判断一个元素是否在可视区域,我们常用的有offsetTop.scrollTop和getBoundingClientRect offsetTop.scrollTop

  • JavaScript基础之Array forEach使用示例

    目录 前言 尝试一下 forEach实现 对象模仿数组 forEach跳出循环体? 前言 forEach() 方法对数组的每个元素执行一次给定的函数. 回调函数中传递三个参数: 第一个参数,就是当前正在遍历的元素 第二个参数,就是当前正在遍历的元素的索引 第三个参数,就是正在遍历的数组 尝试一下 var list = ["云层上的光", "初心", "栾树"]; list.forEach(function(item, index, array){

  • JavaScript开发简单易懂的Svelte实现原理详解

    目录 Demo1 create_fragment SvelteComponent 可以改变状态的Demo Svelte问世很久了,一直想写一篇好懂的原理分析文章,拖了这么久终于写了. Demo1 首先来看编译时,考虑如下App组件代码: <h1>{count}</h1> <script> let count = 0; </script> 这段代码经由编译器编译后产生如下代码,包括三部分: create_fragment方法 count的声明语句 class

  • Svelte调试模式js级别差异和细化后的体积差异详解

    目录 js级别的差异 ecma ast差异 细化后的体积差异 调试模式 on:事件名 svelte:options setContext js级别的差异 主要来自两个方面:hook系统(不考虑类)和ecma-ast差异hook系统. 钩子系统的api更多地用于纯函数组件注入状态和生命周期.在这两个方面,Svelte提供的解决方案是不同的. 由于预运行编译,Svelte编译器扫描所有与UI相关的状态并注入黑魔法,使得状态的使用与变量声明和赋值一样简单. 基本上,开发人员不需要太在意所谓的副作用:因

  • JavaScript面试数组index和对象key问题详解

    JavaScript面试数组index和对象key问题详解

    目录 面试题一: 1.数组赋值 2.数组取值 面试题二: 1.对象赋值 2.对象取值 总结 面试题一: var arr = [1, 2, 3, 4] 复制代码 问:arr[1] = ?; arr['1'] = ? 答:arr[1] = 2; arr['1'] = 2 这里可以再分为两个问题: 1.数组赋值 var arr = [1, 2, 3, 4] arr[1] = 10; // 数字场景 arr['10'] = 1; // 字符串场景 arr['a'] = 1; // 字符串场景 arr[t

  • 一看就懂的JavaScript适配器模式图解及使用示例

    目录 引言 总结 引言 适配器模式是用来解决两个软件实体之间不兼容的问题的设计模式. 举个两实体不匹配例子: 假如这两块要契合在一起,怎么办? 对喽,咱们先给A实体造个适配器,如下: 再把A实体往右推一下: 通过适配器,咱们就把A实体和B实体结合到了一起了. 完美,再看适配器在代码中的例子. 场景为:有个实体A,需要将实体A传入实体B中,实体B返回其name对应的数据,包含名称.地址和年龄. // 实体A var instanceA = [{ name: '张三', address: '北京',

  • 拆开JavaScript迭代器模式内部黑盒子

    目录 一.内部迭代器 二.外部迭代器 总结: 一.内部迭代器 迭代器模式,指的是提供一种方法顺序访问一个聚合对象或者数组中的各种元素,而又不暴露该对象的内部表示. 内部迭代器是自动的,将回调函数传入迭代器进行执行,访问到每一个元素都会执行传入迭代器中的回调函数. 模拟内部迭代器如下: // 定义数组原型上的mapFn内部迭代器 Array.prototype.mapFn = function (callback) { let arr = this; let newArr = [] for (le

  • 学习JavaScript设计模式之迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. JavaScript中的Array.prototype.forEach 一.jQuery中的迭代器 $.each([1, 2, 3], function(i, n) { console.log("当前下标为:"+ i + " 当前元素为:"+ n ); }); 二.实现自己的迭代器 var each = function(ary, callback) { for(var i

  • javascript设计模式 – 迭代器模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 迭代器模式原理与用法.分享给大家供大家参考,具体如下: 介绍:迭代器模式是一种使用频率非常高的设计模式,通过引入迭代器,可以将数据的遍历功能从聚合对象中分离出来.迭代器模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示. 定义:提供一种方法来访问聚合对象,而不用暴露这个对象的内部表示,其别名为游标(Cursor).迭代器模式是一种对象行为型模式. 场景:我们做一个百家姓的迭代器 示例: function NameRepository(){

  • 深入理解JavaScript系列（35）：设计模式之迭代器模式详解

    介绍 迭代器模式(Iterator):提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示. 迭代器的几个特点是: 1.访问一个聚合对象的内容而无需暴露它的内部表示. 2.为遍历不同的集合结构提供一个统一的接口,从而支持同样的算法在不同的集合结构上进行操作. 3.遍历的同时更改迭代器所在的集合结构可能会导致问题(比如C#的foreach里不允许修改item). 正文 一般的迭代,我们至少要有2个方法,hasNext()和Next(),这样才做做到遍历所有对象,我们先给出一个例子: 复

  • javascript设计模式之迭代器模式

    迭代器模式分为内部迭代器和外部迭代器,内部迭代器就是在函数内部定义好迭代的规则,它完全接手整个迭代的过程,外部只需一次初始调用. 内部迭代器 以下自行实现的类似jquery中$.each()的each()函数就是内部迭代器 //实现一个jq的$.each()迭代器 var arr = [1, 2, 3, 4, 5, 6, 7, 8] var each = function(arr, callback){ for(var i=0; i<arr.length; i++){ callback.call

  • JavaScript迭代器的含义及用法

    什么是迭代器 迭代器就是为实现对不同集合进行统一遍历操作的一种机制,只要给需要遍历的数据结构部署Iterator接口,通过调用该接口,或者使用消耗该接口的API实现遍历操作. 迭代器模式 在接触迭代器之前,一起先了解什么是迭代器模式,回想一下我们生活中的事例.我们在参观景区需要买门票的时候,售票员需要做的事情,他会对排队购票的每一个人依次进行售票,对普通成人,对学生,对儿童都依次售票.售票员需要按照一定的规则,一定顺序把参观人员一个不落的售完票,其实这个过程就是遍历,对应的就是计算机设计模式中的

  • 设计模式中的迭代器模式在Cocoa Touch框架中的使用

    基本理解 迭代器模式(Iterrator):提供一个方法顺序访问一个聚合对象中的各个元素,而又不暴露该元素的内部表示. 当你访问一个聚合对象,而且不管这些对象是什么都需要遍历的时候,你就应该考虑用迭代器模式. 你需要对聚集有多种方式遍历时,可以考虑用迭代器模式. 迭代器模式就是分离了集合对象的遍历行为,抽象出一个迭代器类来负责,这样既可以做到不暴露集合的内部结构,又可让外部代码透明地访问集合内部的数据. 迭代器定义了一个用于访问集合元素并记录当前元素的接口. 不同的迭代器可以执行不同的迭代策略.

  • iOS App设计模式开发中对迭代器模式的使用示例

    iOS App设计模式开发中对迭代器模式的使用示例

    何为迭代器模式? 迭代器提供了一种顺序访问集合对象中元素的方法,而无需暴漏结构的底层表示和细节.遍历集合中元素的职能从集合本身转移到迭代器对象.迭代器定义了一个用于访问集合元素并记录当前元素的接口.不同的迭代器可以执行不同的策略. 例子 说了这么多,下面给大家展示一下类关系图. 上图中Client的右边是迭代器,左边是具体迭代的类型,在迭代器内部对具体需要迭代的类型进行了引用,还算不难理解吧,呵呵.其实,看起来是为了对具体类型进行解耦.好啦,下面给出具体的代码实现,简单的模拟了迭代器模式. 注意

  • Java设计模式之迭代器模式_动力节点Java学院整理

    Java设计模式之迭代器模式_动力节点Java学院整理

    定义:提供一种方法访问一个容器对象中各个元素,而又不暴露该对象的内部细节. 类型:行为类模式 类图: 如果要问Java中使用最多的一种模式,答案不是单例模式,也不是工厂模式,更不是策略模式,而是迭代器模式,先来看一段代码吧: public static void print(Collection coll){ Iterator it = coll.iterator(); while(it.hasNext()){ String str = (String)it.next(); System.out

  • PHP设计模式之迭代器模式的深入解析

    PHP设计模式之迭代器模式的深入解析

    迭代器(Iterator)模式,它在一个很常见的过程上提供了一个抽象:位于对象图不明部分的一组对象(或标量)集合上的迭代.迭代有几种不同的具体执行方法:在数组属性,集合对象,数组,甚至一个查询结果集之上迭代. 在对象的世界里,迭代器模式要维持类似数组的功能,看作是一个非侵入性对象刻面(facet),Client类往往分离自真实对象实现,指iterator接口.只要有可能,我们可以给迭代器传送一个引用,代替将来可能发生变化的具体或抽象类.参与者:◆客户端(Client):引用迭代器模式的方法在一组

随机推荐