lodash 的 _.groupBy 函数是怎么实现的?

说在前面

🎈lodash的_.groupBy函数可以将一个数组按照给定的函数分组,返回一个新对象。该函数接收两个参数:第一个参数是要进行分组的数组,第二个参数是用于分组的函数。该函数会对数组中的每个元素进行处理,返回一个值作为分组依据。最终返回的对象中,每个键代表一组,对应的值则是符合该组的元素组成的数组。

.groupBy函数的主要作用是方便对数组中的元素进行分类或分组,并且在分组后可以方便地对每个组内的元素进行处理,比如统计数量、求平均值等。同时,由于lodash库已经封装了大量的常用函数,使用.groupBy函数也能够减少我们自己编写代码的工作量,提高开发效率。

目标

编写一段可应用于所有数组的代码,使任何数组调用 array. groupBy(fn) 方法时,它返回对该数组 分组后 的结果。

数组 分组 是一个对象,其中的每个键都是 fn(arr[i]) 的输出的一个数组,该数组中含有原数组中具有该键的所有项。

提供的回调函数 fn 将接受数组中的项并返回一个字符串类型的键。

每个值列表的顺序应该与元素在数组中出现的顺序相同。任何顺序的键都是可以接受的。

示例 1:

输入:
array = [{"id":"1"},{"id":"1"},{"id":"2"}
], 
fn = function (item) { return item.id; 
}
输出:
{ "1": [{"id": "1"}, {"id": "1"}],   "2": [{"id": "2"}] 
}
解释:
输出来自函数 array.groupBy(fn)。
分组选择方法是从数组中的每个项中获取 "id" 。
有两个 "id" 为 1 的对象。所以将这两个对象都放在第一个数组中。
有一个 "id" 为 2 的对象。所以该对象被放到第二个数组中。

示例 2:

输入:
array = [[1, 2, 3],[1, 3, 5],[1, 5, 9]
]
fn = function (list) { return String(list[0]); 
}
输出:
{ "1": [[1, 2, 3], [1, 3, 5], [1, 5, 9]] 
}
解释:
数组可以是任何类型的。在本例中,分组选择方法是将键定义为数组中的第一个元素。
所有数组的第一个元素都是1,所以它们被组合在一起。
{"1": [[1, 2, 3], [1, 3, 5], [1, 5, 9]]
}

示例 3:

输出:
array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
fn = function (n) { return String(n > 5);
}
输入:
{"true": [6, 7, 8, 9, 10],"false": [1, 2, 3, 4, 5]
}
解释:
分组选择方法是根据每个数字是否大于 5 来分割数组。

提示:

  • 0 <= array.length <= 105
  • fn 返回一个字符串

思路分析

定义一个名为groupBy的方法,通过扩展Array原型来实现。该方法接受一个函数fn作为参数,并返回一个对象。该对象的键是将数组中的元素通过fn函数处理后得到的结果,值是符合该键的元素组成的数组。

具体地说,代码首先创建一个空对象map。然后使用forEach方法遍历调用groupBy方法的数组,对于每个元素,通过fn函数获取一个键key。然后从map对象中取出键为key的值,如果不存在则初始化为空数组。将当前元素添加到该数组中,然后再将更新后的数组赋值给map对象的键key。

最后,返回map对象,该对象包含了按照fn函数分组后的结果。

完整代码

/*** @param {Function} fn* @return {Object}*/
Array.prototype.groupBy = function(fn) {// 检查参数类型if (typeof fn !== 'function') {throw new TypeError('The parameter must be a function.');}const map = {};this.forEach(item => {const key = fn(item);const val = map[key] || [];val.push(item);map[key] = val;});return map;};/*** [1,2,3].groupBy(String) // {"1":[1],"2":[2],"3":[3]}*/

公众号

关注公众号『前端也能这么有趣』,获取更多有趣内容。

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

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

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

相关文章

物联网孢子捕捉分析仪在农田起到什么作用

TH-BZ03随着科技的飞速发展&#xff0c;物联网技术在农业领域的应用越来越广泛。其中&#xff0c;物联网孢子捕捉分析仪作为一种先进的设备&#xff0c;在农田中发挥着不可或缺的作用。本文将详细介绍物联网孢子捕捉分析仪在农田中的作用。 一、实时监测与预警 物联网孢子捕捉分…

【webrtc】GCC 7: call模块创建的ReceiveSideCongestionController

webrtc 代码学习&#xff08;三十二&#xff09; video RTT 作用笔记 从call模块说起 call模块创建的时候&#xff0c;会创建 src\call\call.h 线程&#xff1a; 统计 const std::unique_ptr<CallStats> call_stats_;SendDelayStats &#xff1a; 发送延迟统计 const…

WebGL中开发VR(虚拟现实)应用

WebGL&#xff08;Web Graphics Library&#xff09;是一种用于在浏览器中渲染交互式3D和2D图形的JavaScript API。要在WebGL中开发VR&#xff08;虚拟现实&#xff09;应用程序&#xff0c;您可以遵循以下一般步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&a…

手把手带你死磕ORBSLAM3源代码(五十一) FrameDrawer.cc DrawTextInfo

目录 一.前言 二.代码 2.1完整代码 2.2 cv::Mat::zeros介绍 2.3 cv::putText介绍 2.4 cv::Point介绍

word vba自动化排版-设置标题模板样式、标题、正文、图表、页面、上下标等设置、删除空白行、删除分页符分节符、删除空格等

word vba自动化排版-设置标题模板样式、标题、正文、图表、页面、上下标等设置、删除空白行、删除分页符分节符、删除空格等 目录 1.前提 2.思路 3.word中设置 4.效果图 5.经验教训 6.直接上代码 1.前提 需求&#xff1a;工作中涉及自动识别大量的文字报告&#xff08;o…

实验笔记之——基于TUM-RGBD数据集的SplaTAM测试

之前博客对SplaTAM进行了配置&#xff0c;并对其源码进行解读。 学习笔记之——3D Gaussian SLAM&#xff0c;SplaTAM配置&#xff08;Linux&#xff09;与源码解读-CSDN博客SplaTAM全称是《SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM》&#xff0c;…

NAT配置

IPV4地址中在A/B/C三的单播地址中&#xff0c;还存在私有ip 与公有的区分&#xff1b; 公有&#xff1a;具有全球唯一性&#xff0c;可以在互联网中通讯&#xff0c;需要付费使用 私有&#xff1a;具有本地唯一性&#xff0c;不能在互联网中通信&#xff0c;无需付费使用 私…

在红墙下的冬日幻想:Pygame库实现下雪动画

在红墙下的冬日幻想&#xff1a;借助Pygame库实现下雪动画 寒风轻拂着故宫红墙&#xff0c;我静静地思念着你。这个冬天&#xff0c;借助 Python 的 Pygame 库&#xff0c;我为你呈现一场梦幻般的下雪动画&#xff0c;让雪花在故宫红墙的映衬下在屏幕上翩翩起舞。 准备 首先…

【C++】:STL序列式容器list源码剖析

一、list概述 总的来说&#xff1a;环形双向链表 特点&#xff1a; 底层是使用链表实现的&#xff0c;支持双向顺序访问 在list中任何位置进行插入和删除的速度都很快 不支持随机访问&#xff0c;为了访问一个元素&#xff0c;必须遍历整个容器 与其他容器相比&#xff0c;额外…

【AI预测】破晓未来教育市场:如何精准定位、精选师资并启动高潜力培训项目

在当前全球化和技术快速迭代的背景下&#xff0c;各行业正面临巨大的人才缺口和新的发展机遇。 全球化浪潮&#xff0c;各行业如同搭乘上了一列高速列车&#xff0c;不断深入探索并广泛应用AI技术以提升产业效率、创新服务模式。在智能制造领域&#xff0c;工业4.0时代犹如给…

理解pytorch系列:transpose是怎么实现的

在PyTorch中&#xff0c;transpose()是一种操作&#xff0c;它交换张量中两个指定维度的位置。实现这一点的关键在于不实际移动数据&#xff0c;而是通过改变张量的元数据&#xff08;包括步长&#xff08;stride&#xff09;和尺寸&#xff08;size&#xff09;&#xff09;来…

【leetcode】消失的数字

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家刷题&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 1.暴力求解法2.采用异或的方法&#xff08;同单身狗问题&#xff09;3.先求和再减去数组元素 点击查看…

react的redux和router的使用案例讲解

react的redux和router的使用案例讲解 安装依赖&#xff1a; 首先&#xff0c;你需要安装一些必要的依赖项。使用以下命令安装Redux、React Redux和React Router&#xff1a; npm install redux react-redux react-router-dom配置Redux Store&#xff1a; 创建一个Redux store来…

Linux grep命令(grep指令)grep --help各选项介绍(待更)

文章目录 grep --help英文中文 使用示例-E, --extended-regexp&#xff1a;此选项表示模式为扩展正则表达式。-F, --fixed-strings&#xff1a;此选项表示模式被视为固定字符串而不是正则表达式。-G, --basic-regexp&#xff1a;此选项表示模式为基础正则表达式。这是默认的模式…

Rust之旅 - Rust概念、Windows安装、环境配置

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列专栏目录 [Java项目…

【C++初阶】第二站:类与对象(上) -- 上部分

前言: C学习的第二站&#xff1a;类和对象(上)文章的上半部分,知识点:面向过程和面向对象初步认识、类的引入、类的定义、类的访问限定符及封装、类的作用域、类的实例化. 目录 面向过程和面向对象初步认识 类的引入 类的定义 类的访问限定符及封装 访问限定符 封装 类的…

深入理解Linux文件系统

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;晴る—ヨルシカ 0:20━━━━━━️&#x1f49f;──────── 4:30 &#x1f504; ◀️ ⏸ ▶️ ☰ &…

防火墙技术

防火墙&#xff08;英语&#xff1a;Firewall&#xff09;技术是通过有机结合各类用于安全管理与筛选的软件和硬件设备&#xff0c;帮助计算机网络于其内、外网之间构建一道相对隔绝的保护屏障&#xff0c;以保护用户资料与信息安全性的一种技术。 防火墙技术的功能主要在于及…

springboot log4j配置xml实例说明

提供样本配置代码 xml <?xml version"1.0" encoding"UTF-8"?> <!--日志级别以及优先级排序: OFF > FATAL > ERROR > WARN > INFO > DEBUG > TRACE > ALL --> <!-- status log4j2内部日志级别 --> <configurat…

ARP协议及ARP欺骗

ARP英文全称是Address Resolution Protocol&#xff0c;中文称为地址解析协议&#xff0c;是根据IP地址获取物理地址的一个TCP/IP协议。 ARP欺骗全称为ARP spoofing&#xff0c;又称ARP毒化 (ARPpoisoning&#xff0c;网上上多译为ARP病毒)或ARP攻击&#xff0c;是针对以太网地…