前端 JS 经典:通用性函数封装思路

前言:设计通用性函数,我们需要考虑两个方面,一个是函数传参的可能性,如果可能性很多,我们可以将处理参数的方法暴露出去,让使用者去设计。为了调用的方便性,我们还可以做参数的归一化

举个例子:有一个 people 数组如下,现在需要开发者给这个数组按 sex 分组。man 的一组,woman 的一组。

const people = [{ name: "a", age: 1, sex: "man" },{ name: "b", age: 2, sex: "woman" },{ name: "c", age: 3, sex: "man" },{ name: "d", age: 4, sex: "man" },{ name: "e", age: 1, sex: "woman" },{ name: "f", age: 1, sex: "man" },{ name: "g", age: 1, sex: "man" },{ name: "h", age: 2, sex: "woman" },
];

1. 普通函数的封装

构建一个函数,传入两个参数,数组和决定分组的 key。

这样看着还挺好,但是有个问题,就是这个函数的局限性。我们只能确定我们第一个传入的是数组,但是我们不能确定数组里面的项是什么,这个函数就固定了传入的数组必须是对象数组,且第二个参数,必须是对象里的属性,这个函数才能生效。

const groupBy = (arr, key) => {let result = {};arr.forEach((item) => {const _key = item[key];if (result[_key]) {result[_key].push(item);} else {result[_key] = [item];}});return result;
};

2. 公共函数的封装

构建一个函数,功能和上面那个一样。

但是这个函数将第二个参数暴露给了开发人员,开发人员需要按照什么形式分组,都可以自己定义,而且我们也做了参数的归一化,如果第二个参数没有传回调函数,而是传的字符串,我们可以将这个字符串,在函数的内部转换成回调函数。就相当于开发者还是传入的回调函数。

const groupBy = (arr, callback) => {if (typeof callback === "string") {const keyName = callback;callback = (item) => item[keyName];}let result = {};arr.forEach((item, index) => {const _key = callback(item, index, arr);if (result[_key]) {result[_key].push(item);} else {result[_key] = [item];}});return result;
};

用公共函数,我们实现按 "性别-年龄" 的形式完成分组

groupBy(people, (item) => `${item.sex}-${item.age}`);

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

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

相关文章

web自动化(一)selenium安装环境搭建、DrissionPage安装

selenium 简介 selenium是企业广泛应用的web自动化框架 selenium 三大组件 selenium IDE 浏览器插件 实现脚本录制 webDriver 实现对浏览器进行各种操作 Grid 分布式执行 用例同时在多个浏览器执行,提高测试效率 问题:环境搭建复杂,浏览器版…

YOLOv8+SwanHub+作物检测:从可视化训练到Demo演示

1. 项目介绍 本项目旨在利用先进的YOLOv8深度学习模型对麦穗进行高效、准确的检测。我们采用了GlobalWheat数据集,该数据集包含丰富的麦穗图像,为模型的训练提供了有力的数据支持。通过该实验,实现高准确率的麦穗识别,为农业生产提…

Webpack: 如何借助预处理器、PostCSS 等构建现代 CSS 工程环境

概述 在开发 Web 应用时,我们通常需要编写大量 JavaScript 代码 —— 用于控制页面逻辑;编写大量 CSS 代码 —— 用于调整页面呈现形式。问题在于,CSS 语言在过去若干年中一直在追求样式表现力方面的提升,工程化能力薄弱&#xff…

Studio One 6.6.2中文破解版安装图文激活教程

Studio One 6.6.2中文破解版做为新生代音乐工作站,凭借更低的价格和完备的功能,获得了音乐人和直播行业工作者的青睐,尤其是对硬件声卡的适配支持更好,特别适合用来配合线上教学和电商带货。 最近网上出现不少关于StudioOne不能用…

html侧导航栏客服栏

ico 替换 ICO <html xmlns"http://www.w3.org/1999/xhtml"><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8"><title>返回顶部</title><script src"js/jquery-2.0.3.min.js"…

基于 ESP8266 和 MQ 气体传感器的微信告警系统设计与实现

接线: ESP8266MQ3vVCCGND GND A0 A0微信通知截图: 摘要:本文主要探讨了一种利用 ESP8266 微控制器与 MQ 气体传感器构建的气体检测微信告警系统。详细阐述了系统的硬件组成、软件设计以及与微信平台的交互机制。通过该系统,能够实时监测环境中的气…

VPS搭建论坛和社区网站有哪些优势?

想象一下&#xff1a;您已经建立了一个论坛。这是您的骄傲和喜悦——一个熙熙攘攘的在线多人广场&#xff0c;人们聚集在这里不仅可以聊天&#xff0c;还可以交流、分享和辩论。不过突然出现下面这些情况&#xff0c; 页面加载需要很长时间&#xff1b;光标不停旋转。会员流失…

【ai】tx2 nx: trition client安装nvidia-pyindex 一直失败

系统版本的pip和python虚拟环境的pipyolov4-triton-tensorrt的master分支 官方client jetson:pip3 install --user nvidia-pyindex 不成功啊 这个是让nvidia-pyindex 拉取nvidia@tx2-nx:~$ pip3 install --user nvidia-pyindex Collecting nvidia-pyindexDownloading https://…

STL——常用算法(二)

一、常用拷贝和替换算法 1.copy #include <iostream> #include <vector> #include <algorithm> using namespace std; void printVector(int val) {cout << val << " "; } void test01() {vector<int>v1;for (int i 0; i <…

【仿真】UR机器人相机标定、立体标定、手眼标定、视觉追踪(双目)

实现在CoppeliaSim环境中进行手眼标定和目标追踪的一个例子。它主要涉及到机器人、机器视觉和控制算法的编程&#xff0c;使用了Python语言。接下来对该代码的主要类和方法进行解析&#xff1a; 1. 导入相关库 用于与CoppeliaSim模拟器通过ZeroMQ接口通信。包含Rotation类&…

SF-YOLOv5——基于改进的特征融合模式的轻量级小目标检测算法

概述 提出了一种改进的YOLOv5模型&#xff0c;名为Small-Fast-YOLOv5 (SF-YOLOv5)&#xff0c;专门用于小目标检测。通过合理裁剪大目标检测层的特征图输出&#xff0c;显著减少了模型所需的计算资源&#xff0c;使模型变得更加轻量级。 还提出了一种改进的特征融合方法&#…

CV每日论文--2024.6.24

1、Whiteboard-of-Thought: Thinking Step-by-Step Across Modalities 中文标题&#xff1a;思维白板&#xff1a;跨模式逐步思考 简介&#xff1a;这段话描述了一种利用思维白板提示来增强大型语言模型在视觉推理任务中的性能的方法。 人类在解决需要视觉思考的问题时,通常会…

英语口语练习评测的开发实现

英语口语评测是一个复杂的系统&#xff0c;需要综合考虑语音识别、语音评测、自然语言处理等多种技术。以下是一些常见的英语口语评测开发框架。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 基于语音识别的口语评测框架这种框架主要…

第28课 绘制原理图——绘制导线

概述 放置完元器件之后&#xff0c;接着就要用导线将元器件的管脚一个一个连起来了。 绘制导线的方法 点击快速工具条上的“线”命令&#xff0c;进入绘制导线的过程。 点击选择某个管脚或电源端口&#xff0c;作为导线的起始端。 再点击选择另一个管脚或电源端口&#xff0c…

React@16.x(40)路由v5.x(5)常见应用场景(2)- 实现类似 vue 的路由模式

目录 1&#xff0c;vue-router2&#xff0c;React 模拟实现 1&#xff0c;vue-router vue 的路由配置文件&#xff0c; // src/router/index.ts const routes [{path: "/news",children: [{ path: "", component: NewsView },{ path: "detail"…

瞄准Windows的新兴僵尸网络:Kraken

2021 年 10 月&#xff0c;ZeroFox Intelligence 披露了名为 Kraken 的僵尸网络。Kraken 通过 SmokeLoader 进行传播&#xff0c;每次更新攻击基础设施时都会扩大规模。尽管与 2008 年发现的 Kraken 僵尸网络同名&#xff0c;但二者并没有其他共同点。 功能 自从 2021 年 10 …

养殖自动化通风系统:未来畜牧业的智能守护者

在现代畜牧业中&#xff0c;养殖环境的控制对于动物的健康成长和养殖业者的成功至关重要。养殖自动化通风系统凭借其先进技术和精密设备&#xff0c;实现了对养殖场内环境条件的精准调控&#xff0c;显著提升了养殖效率和动物福利。本文将深入探讨养殖自动化通风系统的必要性、…

Talking Web

1. curl 1.1 http curl http://127.0.0.1:80 向目标主机端口发送http请求 1.2 httphead curl -H “Host: 18ed3df584cd48328b5839443aa7b42b” http://127.0.0.1:80 1.3 httppath curl http://127.0.0.1:80/853c64cd218f80d0a59665666fb2ab80 1.4 URL编码路径 &#xff0…

天天大爆推文玩法营销号软件下载地址

天天大爆推文玩法营销号软件下载地址 天天大爆推文玩法营销号是一种营销策略&#xff0c;通过在社交媒体上发布频繁的推文来吸引关注和增加品牌曝光度。以下是一些可以用于天天大爆推文玩法营销号的策略&#xff1a; 营销号工具使用教程&#xff1a;https://iimenvrieak.feis…

数据结构之前缀树

写在前面 源码 。 前缀树&#xff0c;又叫做trie树&#xff0c;字典树&#xff0c;是一种多叉的树&#xff0c;一般用于单词前缀匹配的相关场景中&#xff0c;比如&#xff1a; 本文看下使用Java如何来实现这种数据结构。 1&#xff1a;基本介绍 思想&#xff1a;空间换时…