【日常记录】【JS】对一个数组，按照某个字段的值，进行分组

1. 前言

在开发中，经常会遇到一组数据，要按照某个字段进行分组，这个时候会有很多种方法，可以使用 forEach、reduce、等其他方法

reduce 方法

function groupBy(arr, key) {
    return arr.reduce((acc, obj) => {
        const groupKey = obj[key];
        if (!acc[groupKey]) {
            acc[groupKey] = [];
        }
        acc[groupKey].push(obj);
        return acc;
    }, {});
}

// 示例用法
const people = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 25 }
];

const groupedByAge = groupBy(people, 'age');
console.log(groupedByAge);

forEach

function groupBy(arr, key) {
    const groups = {};
    arr.forEach(obj => {
        const groupKey = obj[key];
        if (!groups[groupKey]) {
            groups[groupKey] = [];
        }
        groups[groupKey].push(obj);
    });
    return groups;
}

// 示例用法
const people = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 25 }
];

const groupedByAge = groupBy(people, 'age');
console.log(groupedByAge);

其实都是一个逻辑，先定义一个对象，然后看看这个 key 在对象里面是否存在，存在的话，直接push，不存在 赋值一个新的数组

但一般项目中都会引入 lodash 这个库

2. lodash 的分组

安装方式

1. 用前面提到的浏览器插件，直接任意一个网页的控制台安装 【日常记录】【插件】浏览器上的扩展 Console Importer
2. 新建html 文件，通过 cdn 引入
3. npm i 或者 yarn 、pnpm 等

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

lodash 的 分组方法封装的更好

3. Object.groupBy()

js 自己也有了分组的方法：Object.groupBy()

静态方法根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。

参数

• items：即将进行元素分组的可迭代对象，如数组
• callbackFn：对可迭代对象中的每个元素执行的函数。它应该返回一个值，可以被强制转换成属性键（字符串或 symbol），用于指示当前元素所属的分组。
  • element：数组中当前正在处理的元素
  • index：正在处理的元素数组中的索引

返回值

一个带有所有分组属性的 null 原型对象，每个属性都分配了一个包含相关组元素的数组。

示例

const inventory = [
  { name: "芦笋", type: "蔬菜", quantity: 5 },
  { name: "香蕉", type: "水果", quantity: 0 },
  { name: "山羊", type: "肉", quantity: 23 },
  { name: "樱桃", type: "水果", quantity: 5 },
  { name: "鱼", type: "肉", quantity: 22 },
];

Object.groupBy(inventory, ({ type }) => type);

/* 结果是：
{
  蔬菜: [
    { name: "芦笋", type: "蔬菜", quantity: 5 },
  ],
  水果: [
    { name: "香蕉", type: "水果", quantity: 0 },
    { name: "樱桃", type: "水果", quantity: 5 }
  ],
  肉: [
    { name: "山羊", type: "肉", quantity: 23 },
    { name: "鱼", type: "肉", quantity: 22 }
  ]
}
*/

需要注意的是：这是一项实验性技术。

参考链接

• 【日常记录】【插件】浏览器上的扩展 Console Importer
• Object.groupBy MDN