前言
在前端开发中，我们经常会遇到需要对数组进行分组的场景，例如将一组商品按照品类分组，或者将一组用户数据按照性别分组等等。这时候，npm 上的 group-on 这个包就是一个很好的选择。
在本文中，我们将详细介绍如何使用 group-on 这个 npm 包，在深入学习它的原理的同时，让大家清楚地知道如何使用它来优化开发效率。
安装 group-on 包
使用 npm 命令可以轻松安装 group-on 包：
npm install group-on
此时，group-on 就已经安装完成了。
如何使用 group-on 进行数组分组
group-on 提供了非常方便的 API，能够涵盖各种数组分组需求。
groupOn
首先，我们来看一下 groupOn 方法。它接受两个参数：
- 需要进行分组的数组
- 分组依据的字段名称
例如，我们有一个订单数组，需要按照订单号进行分组：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - - - -------- ---- ------ --- -- - -------- ---- ------ --- -- - -------- ---- ------ --- -- - -------- ---- ------ --- -- - ----- --- - --------------- ---------- ----------------
输出结果为：
-- -------------------- ---- -------
-
---- -
- ---------- ---- -------- --- --
- ---------- ---- -------- --- -
--
---- -
- ---------- ---- -------- --- -
--
---- -
- ---------- ---- -------- --- -
-
-groupBy
groupOn 是一种分组方式，但是当你想根据一个字段的值来对数据进行分类时，更好的方法是 groupBy。groupBy 方法接受两个参数：
- 需要进行分组的数组
- 每个数组项将要进行分组的字段名，可以传递一个函数用于映射每个项
例如，我们有一个用户数组，需要按照每个用户的城市进行分组：
-- -------------------- ---- ------- ----- ------- - --------------------------- ----- ----- - - - --- -- ----- ------ ----- ---------- -- - --- -- ----- ------- ----- ---------- -- - --- -- ----- ------- ----- --------- -- - --- -- ----- ------- ----- --------- -- - ----- --- - -------------- ------- ----------------
输出结果为：
-- -------------------- ---- -------
-
----------- -
- ----- -- ------- ------ ------- ---------- --
- ----- -- ------- ------- ------- ---------- -
--
---------- -
- ----- -- ------- ------- ------- --------- --
- ----- -- ------- ------- ------- --------- -
-
-groupByValues
有时候，我们需要按照某个字段的值进行分组，而不是按照字段名进行分组。此时，可以使用 groupByValues 方法，它接受两个参数：
- 需要进行分组的数组
- 一个函数，用于映射每个项的值
例如，我们有一个学生成绩数组，需要将大于 60 分的学生成绩分为一组，小于 60 分的学生成绩分为一组：
const groupByValues = require('group-on/groupByValues')
const scores = [70, 80, 50, 90, 40, 60]
const res = groupByValues(scores, (score) => score >= 60 ? '及格' : '不及格')
console.log(res)输出结果为：
{
"及格": [70, 80, 90, 60],
"不及格": [50, 40]
}group-on 源码解析
group-on 的实现并不复杂，但是对于理解 JavaScript 中一些基础的操作，例如 reduce、Map 等，有很好的帮助作用。
我们可以看一下 groupOn 的源码实现：
-- -------------------- ---- -------
-------- ------------ ------ -
------ ---------------- ----- -- -
----- --- - -----------
-- ----------- -
-------- - --
-
-------------------
------ ---
-- ---
-
-------------- - -------可以看到，groupOn 方法的关键操作是使用 reduce 对数组进行了处理。以数组为例，我们可以使用 reduce 来将其变为其他类型，例如：计算所有元素的和、将所有元素转换成字符串、将所有元素按照一定的规则进行分组等等。
在上述代码中，reduce 的初始值为 {}，每个数组项都会执行一次回调函数。回调函数第一个参数 acc 初始为 {}，每次执行回调函数时都会传递 acc 和当前数组项 item 作为参数，执行回调函数内部的逻辑后，将最终结果返回给下一次执行回调函数时的 acc。
其中，对于对重复的 key，我们需要将对应的 item 放到数组中。这时候，就需要用到上面提到的 Map 对象。
因此，在 reduce 函数中的逻辑就简单了：
- 首先，获取数组项中指定属性的值作为 key。
- 如果当前 key 在 acc 对象中不存在，就将该 key 对应的属性值初始化为一个空数组。
- 将当前数组项 item 添加到 acc 对象中的 key 属性值所对应的数组中。
结语
group-on 这个 npm 包是一个非常实用的工具，不仅可以帮助我们轻松地完成数组分组的任务，而且还可以通过源码解析的方式来帮助我们深入理解 JavaScript 中的一些基础知识。
希望这篇文章对大家有所启发，同时也帮助大家更好地理解如何使用 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfdc7