在前端开发中，经常会遇到需要按照某个属性对数组进行分组的场景，通常需要通过遍历数组来实现，代码复杂且效率低下。现在，我们可以使用 npm 包 array-groupby 来方便地实现数组分组功能，大大提高代码的可读性和效率。
安装
先确保已安装 npm，然后运行以下命令进行安装：
npm install array-groupby
使用方法
使用 array-groupby，可以轻松地对数组进行分组，无需自己编写复杂的代码。
例如我们有以下数组：
const arr = [
{ name: 'alice', age: 18 },
{ name: 'bob', age: 20 },
{ name: 'cindy', age: 18 },
{ name: 'david', age: 20 }
]我们可以通过以下代码来对数组按照 age 属性进行分组：
const groupby = require('array-groupby')
const groupedArr = groupby(arr, 'age')
console.log(groupedArr)输出结果为：
-- -------------------- ---- -------
-
--- -
- ----- -------- ---- -- --
- ----- -------- ---- -- -
--
--- -
- ----- ------ ---- -- --
- ----- -------- ---- -- -
-
-可以看到，数组已经按照 age 属性进行了分组，并且结果是一个对象，对象的键是 age 值，值是对应的元素数组。
参数说明
groupby 函数有两个参数：
- 第一个参数是需要分组的数组。
- 第二个参数是用于分组的属性，可以是一个属性名称的字符串或者一个返回属性名称的函数。
例如：
// 使用字符串作为分组属性 groupby(arr, 'age') // 使用函数作为分组属性 groupby(arr, item => item.age)
源码解析
了解源码可以更深入地理解 array-groupby 的工作原理。
array-groupby 的源码非常简单，只有十几行，核心代码如下：
module.exports = function (arr, property) {
return arr.reduce(function(memo, x) {
if (!memo[x[property]]) { memo[x[property]] = []; }
memo[x[property]].push(x)
return memo;
}, {})
};可以看到，其实 array-groupby 就是使用了 reduce 方法来实现分组，代码中可以分为四部分：
- 首先初始化一个空对象 memo，用来存储分组结果。
- 对于数组 arr 中的每一个元素 x，判断其对于的属性值是否已存在于 memo 对象中。
- 如果不存在，则通过 memo[x[property]] = [] 将该属性值对应的数组初始化为空数组。
- 然后将元素 x 加入到对应的数组中，通过 memo[x[property]].push(x) 实现。
总结
使用 array-groupby 可以轻松地实现数组分组功能，代码简单易用。同时，了解源码可以深入掌握其工作原理，为后续开发提供参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71740