前端 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 分布式执行 用例同时在多个浏览器执行,提高测试效率 问题:环境搭建复杂,浏览器版…

OpenCV银行卡识别思路解析

银行卡识别(Card Recognition)通常是一个涉及图像处理和机器学习(特别是深度学习)的复杂任务。这个任务通常包括多个步骤,如图像预处理、特征提取、字符分割和识别等。由于深度学习在图像识别领域取得了显著进展&#…

探索Scala并发编程之巅:高效并行处理的艺术

标题:探索Scala并发编程之巅:高效并行处理的艺术 引言 在现代软件开发中,随着多核处理器的普及,编写能够充分利用硬件能力的并发程序变得至关重要。Scala,这门结合了面向对象和函数式编程特性的语言,提供…

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

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

IPv4的不同IP地址段用途介绍

目录标题 [Q&A] IP地址中/16或者/24的意义IP地址分类IP地址段用途介绍参考 [Q&A] IP地址中/16或者/24的意义 /16表示前16位是网络地址,后16位是主机地址。/24表示前24位是网络地址,后8位是主机地址。 IP地址分类 网络地址网络地址网络数主机数…

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 <…

midspore打卡第五天之DDPM原理一

#### Diffusion 前向过程 所谓前向过程&#xff0c;即向图片上加噪声的过程。虽然这个步骤无法做到图片生成&#xff0c;但这是理解diffusion model以及构建训练样本至关重要的一步。 首先我们需要一个可控的损失函数&#xff0c;并运用神经网络对其进行优化。 设 $q(x_0)$ 是…

【面试题】MyBatis面试题

目录 简述MyBatis是什么&#xff0c;它解决了什么问题&#xff1f;MyBatis中Mapper.xml文件的作用是什么&#xff1f;#{}和${}在动态SQL中的区别是什么&#xff1f;如何在MyBatis中处理一对一和一对多的关联映射&#xff1f;MyBatis的工作原理是什么&#xff1f;如何进行MyBati…

图论:图的表示方法

图 2. 图的表示 2.1 邻接矩阵 邻接矩阵 是一种编程语言中用二维数组表示图的方法&#xff0c;更适用于节点数量够的多的 稠密图(边数接近顶点数的平方) class Node{int id;//节点的id&#xff0c;用于寻址Object obj;//存储的内容vector<Edge>edges;//表示与节点的出…

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

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

想一次卸载一堆应用程序吗?这里有你想认识的一个应用程序

序言 Windows不允许你批量卸载应用程序。但默认的Windows卸载管理器并不是从电脑中删除应用程序的唯一方法。如果你经常希望一次卸载多个项目,这样你就不必等待按顺序执行,我们为你提供了该工具。 默认Windows卸载程序无法执行的所有操作 在Windows上卸载应用程序可能会一…

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;欢迎交流合作。 基于语音识别的口语评测框架这种框架主要…