自己封装的reduce、map、foreach、filter、bind等方法

自己封装一些方法

  • reduce 方法
  • map 方法
  • forEach方法
  • filter方法的封装
  • bind方法的封装

reduce 方法

在这个自定义的 reduce 方法中,我们遵循了原生 reduce 方法的工作原理。我们接受三个参数:数组 arr,回调函数 callback 和初始值 initialValue(可选)。

在循环中,我们检查累加器(accumulator)是否已经定义,如果是,则调用回调函数 callback,并传入累加器的值、当前元素的值、当前索引和原始数组作为参数,并将回调函数的返回值赋值给累加器。如果累加器未定义,则将当前元素的值赋给累加器。

最后,我们返回累加器的值作为 reduce 方法的结果。

function myReduce(arr, callback, initialValue) {let accumulator = initialValue === undefined ? undefined : initialValue;for (let i = 0; i < arr.length; i++) {if (accumulator !== undefined) {accumulator = callback(accumulator, arr[i], i, arr);} else {accumulator = arr[i];}}return accumulator;
}
// 使用自定义的 reduce 方法
const numbers = [1, 2, 3, 4, 5];
const sum = myReduce(numbers, (accumulator, currentValue) => accumulator + currentValue, 0);console.log(sum); // 输出 15

map 方法

map 函数是用于对数组中的每个元素执行指定的操作,并返回一个新的数组。

我们封装自己的map方法首先定义了一个名为 myMap 的方法。myMap 方法接受一个回调函数作为参数,并在每个数组元素上调用该回调函数,并将结果放入一个新的数组 newArray 中。回调函数接受三个参数:当前元素、当前元素的索引和被操作的原始数组。

Array.prototype.myMap = function(callback) {const newArray = [];for (let i = 0; i < this.length; i++) {newArray.push(callback(this[i], i, this));}return newArray;
};
// 使用自定义的 map 方法const numbers = [1, 2, 3, 4, 5];const doubled = numbers.myMap(function(number) {return number * 2;
});console.log(doubled);  // 输出 [2, 4, 6, 8, 10]

forEach方法

在这个自定义的 forEach 方法中,我们接受两个参数:数组 arr 和回调函数 callback。

在循环中,我们遍历数组的每个元素,并在每次循环中调用回调函数 callback,并传入当前元素的值、当前索引和原始数组作为参数。

function myForEach(arr, callback) {for (let i = 0; i < arr.length; i++) {callback(arr[i], i, arr);}
}

// 使用自定义的 forEach 方法
const numbers = [1, 2, 3, 4, 5];myForEach(numbers, (value, index) => {console.log(`Index: ${index}, Value: ${value}`);
});

filter方法的封装

在这个自定义的 filter 方法中,我们接受两个参数:数组 arr 和回调函数 callback。

在循环中,我们遍历数组的每个元素,并在每次循环中调用回调函数 callback,并传入当前元素的值、当前索引和原始数组作为参数。如果回调函数返回 true,则将当前元素添加到一个新的数组 filteredArray 中。

最后,我们返回新的数组 filteredArray 作为 filter 方法的结果。

function myFilter(arr, callback) {const filteredArray = [];for (let i = 0; i < arr.length; i++) {if (callback(arr[i], i, arr)) {filteredArray.push(arr[i]);}}return filteredArray;
}
// 使用自定义的 filter 方法
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = myFilter(numbers, (value) => value % 2 === 0);console.log(evenNumbers); // 输出 [2, 4]

bind方法的封装

在 myBind 方法中,我们传入 context 作为上下文,以及一系列参数 …args。

在返回的函数内部,我们将原始函数 fn 应用到指定的上下文 context 上,并将参数合并为一个新的数组 […args, …innerArgs]。

最后,我们返回这个新函数作为 bind 方法的结果。

Function.prototype.myBind = function (context, ...args) {const fn = this; // 保存原始函数return function (...innerArgs) {return fn.apply(context, [...args, ...innerArgs]);};
};
// 使用自定义的 myBind 方法
const person = {name: 'John',greet(message) {console.log(`${this.name} says ${message}`);},
};const greetFunc = person.greet.myBind(person, 'Hello');
greetFunc('world'); // 输出 "John says Hello world"

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

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

相关文章

【GO语言基础】前言

系列文章目录 【Go语言学习】ide安装与配置 【GO语言基础】前言 【GO语言基础】变量常量 【GO语言基础】数据类型 文章目录 系列文章目录一、基础知识包和函数函数声明语法简洁性 括号成对出现GO常用DOS命令命名规则项目目录结构注释 总结 一、基础知识 包和函数 //声明本代…

Python中使用item()方法遍历字典的例子

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 这篇文章主要介绍了Python中使用item()方法遍历字典的例子, for…in这种是Python中最常用的遍历字典的方法了,需要的朋友可以参考下 Python字典的遍历方法有好几种&#xff0c;其中一种是for…in&#xff0c;这个我就…

记录docker 部署nessus

1、开启容器 docker run -itd --nameramisec_nessus -p 8834:8834 ramisec/nessus 2、登录 &#xff1a;注意是https https://ip8843 3、修改admin密码 #进入容器 docker exec -it ramisec_nessus /bin/bash#列出用户名 /opt/nessus/sbin/nessuscli lsuser#修改密码&a…

Swift使用编解码库Codable

Codable 是 Swift 引入的全新的编解码库&#xff0c;使开发者更方便的解析JSON 或 plist 文件。支持枚举、结构体和类。 Codable协议定义 Codable代表一个同时符合 Decodable 和 Encodable 协议的类型&#xff0c;即可解码且可编码的类型。 typealias Codable Decodable &a…

python模块之 aiomysql 异步mysql

mysql安装教程 mysql语法大全 python 模块pymysql模块&#xff0c;连接mysql数据库 一、介绍 aiomysql 是一个基于 asyncio 的异步 MySQL 客户端库&#xff0c;用于在 Python 中与 MySQL 数据库进行交互。它提供了异步的数据库连接和查询操作&#xff0c;适用于异步编程环境 …

计算机网络(一):基础篇

文章目录 1. TCP/IP网络模型有哪几层并做简要介绍&#xff1f;2. 键入网址到网页显示&#xff0c;期间发生了什么&#xff1f;3. 介绍一下域名解析的工作流程&#xff1f;4. MAC发送方和接收方如何确认&#xff1f;5. 路由器和交换机的区别&#xff1f;6. Linux系统是如何收发网…

sqlserver union和union all 的区别

1.首先在数据库编辑1-40数字&#xff1b; 2.查询Num<30的数据&#xff0c;查询Num>20 and Num<40的数据&#xff0c;使用union all合并&#xff1b; 发现30-20的数字重复了&#xff0c;可见union all 不去重&#xff1b; 3.查询Num<30的数据&#xff0c;查询Num…

表的内连接和外连接

表的连接是SQL中的一种操作&#xff0c;用于将两个或多个表中的数据按照某个条件进行关联。 内连接 使用内连接将两个表(Table1 和 Table2)进行连接&#xff1a; select * from Table1 inner join Table2 on Table1.id Table2.id;举例&#xff1a; -- 用普通的写法 select…

idea右边找不到maven窗口(Idea_最右侧常用栏中没有Maven选项)

方案一&#xff1a; 首先idea自带了maven控件&#xff0c;不像Eclipse还需要下载控件&#xff0c;如果你以前有maven在右边&#xff0c;出于某种原因&#xff0c;消失找不到 了&#xff0c;你可以试试我写的方法。 方法1.你点击一下你idea界面最左下角的那个小框&#xff0c…

Promise 解决 Vue 中父子组件的加载问题!

前言 关于Promie我这里就不多解释了&#xff0c;不懂得可以看看官方文档。下面文章重点介绍项目中遇到的问题解决方法。 需求 组件b初始化某个用到的库&#xff0c;只有在初始化完成后才能调用其API&#xff0c;不然会报错。a页面负责调用。 // a.vue <template><d…

动态表单设计

动态表单设计 背景方案讨论基于上面分析&#xff0c;对比调研&#xff0c;自定义动态表单数据模型表单详解&#xff08;一&#xff09; 表单模板&#xff1a;jim_dynamic_form&#xff08;二&#xff09;表单数据类型&#xff1a;jim_form_data_type&#xff08;三&#xff09;…

element ui el-table分页多选功能

selection-change&#xff1a;当选择项发生变化时会触发该事件&#xff08;当分页切换时&#xff0c;选中的数据都会自动清空&#xff09; 一、在el-table中添加 :row-key“id” <el-table :data"tableData" border style"width: 95%" selection-change…

【Linux】编辑器 vim

1、vim的基本概念 vi/vim【一款文本编辑器】vim【一款多模式编辑器】vi/vim 的区别简单点来说&#xff0c;它们都是多模式编辑器&#xff0c;不同的是 vim 是 vi 的升级版本&#xff0c;它不仅兼容vi的所有指令&#xff0c;而且还有一些新的特性在里面。例如语法加亮&#xff0…

redis-win10安装和解决清缓存报错“Error: Protocol error, got “H“ as reply type byte”

win10安装 https://github.com/microsoftarchive/redis/releases 下载最新的zip&#xff0c;解压&#xff0c;把路径加到Path里&#xff0c;每次直接在cmd里 redis-server.exeError: Protocol error, got “H” as reply type byte 这个报错是因为我端口写错了。。无语 D:…

分享一个python实验室设备预约管理系统 实验室设备维修系统源码 lw 调试

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…

DAY08_MyBatisPlus——入门案例标准数据层开发CRUD-Lombok-分页功能DQL编程控制DML编程控制乐观锁快速开发-代码生成器

目录 一 MyBatisPlus简介1. 入门案例问题导入1.1 SpringBoot整合MyBatisPlus入门程序①&#xff1a;创建新模块&#xff0c;选择Spring初始化&#xff0c;并配置模块相关基础信息②&#xff1a;选择当前模块需要使用的技术集&#xff08;仅保留JDBC&#xff09;③&#xff1a;手…

《VulnHub》DarkHole:1

VulnHub 1&#xff1a;靶场信息2&#xff1a;打靶2.1&#xff1a;情报收集&威胁建模2.2&#xff1a;漏洞分析&渗透攻击 3&#xff1a;总结3.1&#xff1a;命令&工具3.1.1&#xff1a;Nmap 3.2&#xff1a;关键技术 VulnHub 打靶记录。官网&#xff1a;https://www.…

Android -BLE 蓝牙模块开发

Android-Ble蓝牙开发Demo示例–扫描,连接,发送和接收数据,分包解包(附源码) - 简书前言 万物互联的物联网时代的已经来临&#xff0c;ble蓝牙开发在其中扮演着举重若轻的角色。最近刚好闲一点&#xff0c;抽时间梳理下这块的知识点。 涉及ble蓝牙通讯的客户端(开启、扫描、连接…

Web framework-Gin(二)

目录 一、Gin 1、Ajax 2、文件上传 2.1、form表单中文件上传(单个文件) 2.2、form表单中文件上传(多个文件) 2.3、ajax上传单个文件 2.4、ajax上传多个文件 3、模板语法 4、数据绑定 5、路由组 6、中间件 一、Gin 1、Ajax AJAX 即“Asynchronous Javascript And XM…

时序分解 | MATLAB实现ICEEMDAN+SE改进的自适应经验模态分解+样本熵重构分量

时序分解 | MATLAB实现ICEEMDANSE改进的自适应经验模态分解样本熵重构分量 目录 时序分解 | MATLAB实现ICEEMDANSE改进的自适应经验模态分解样本熵重构分量效果一览基本介绍程序设计参考资料 效果一览 基本介绍 ICEEMDANSE改进的自适应经验模态分解样本熵重构分量 包括频谱图 避…