JavaScript Object.groupBy() 方法

Web 开发者在大多数时候都使用 JavaScript，这是一种动态且适应性强的编程语言，用于创建动态和智能的 UI。数据控制是其众多特性之一，根据特定标准对组件进行分组是数据控制中的一项常见活动。这时使用 groupBy 过程就很有用。尽管一些其他语言（如 pandas 中的 Python groupby）提供了内置的 groupBy() 方法，但 JavaScript 本身并不提供。

groupBy() 方法简介

数据分组是将数据项根据共同特征组织成组或类别的过程。这在多种情况下都很有用，例如按类别对项目进行分组、按日期安排事件或根据成绩对学生列表进行分类。虽然 JavaScript 本身没有 groupBy() 函数，但开发者通常会使用 Lodash 等不同库，其中有一个有用的 _.groupBy 方法，或者使用 reduce() 和 forEach() 等策略。本文将探讨在 JavaScript 中实现 groupBy() 方法的各种方法，并提供示例和对其操作的解释。

代码示例

示例 1：为学生分配成绩

设想有一个学生对象的数组，每个对象都有一个姓名和分配给他们的成绩。这些学生应该按成绩分组。

代码

输出

 
{
    A: [
        { name: 'Alice', grade: 'A' },
        { name: 'Charlie', grade: 'A' }
    ],
    B: [
        { name: 'Bob', grade: 'B' },
        { name: 'Eve', grade: 'B' }
    ],
    C: [
        { name: 'David', grade: 'C' }
    ]
}   

在本例中，学生按其成绩进行分组，生成一个对象，其中值是具有该成绩的学生数组，键是成绩。

示例 2：按类别对产品进行分组

假设我们有一个产品对象的数组，每个对象都有一个类别和名称。这些产品应该按其类别进行组织。

代码

输出

 
{
    Fruit: [
        { name: 'Apple', category: 'Fruit' },
        { name: 'Banana', category: 'Fruit' }
    ],
    Vegetable: [
        { name: 'Carrot', category: 'Vegetable' },
        { name: 'Broccoli', category: 'Vegetable' }
    ],
    Meat: [
        { name: 'Chicken', category: 'Meat' }
    ]
}   

由于产品在此处根据其类别进行组织，因此很容易查看每个类别中的每个项目。

示例 3：按日期对事件进行分组

假设我们有一个包含标题和日期的事件对象的数组。这些事件应该按其日期进行分组。

代码

输出

 
{
    "2024-06-10": [
        { title: 'Meeting', date: '2024-06-10' },
        { title: 'Webinar', date: '2024-06-10' }
    ],
    "2024-06-12": [
        { title: 'Conference', date: '2024-06-12' }
    ],
    "2024-06-14": [
        { title: 'Workshop', date: '2024-06-14' }
    ]
}   

结论

分组数据是数据控制中的一项基本活动；尽管 JavaScript 有一个本地的 groupBy() 方法，但使用 Lodash 等实用工具库或 reduce() 方法可以成功完成此操作。本文提供了按成绩对学生、按类别对产品、按日期对事件进行分组的有用示例，并解释了如何开发自定义 groupBy() 函数。