在 JavaScript 中对一组对象进行分组

Shiv Yadav 2023年10月12日

JavaScript JavaScript Array

本文将演示在 JavaScript 中对对象数组进行分组的最有效方法。

在 JavaScript 中使用 `reduce()` 对对象数组进行分组

在 JavaScript 中对对象数组进行分组的最有效方法是使用 reduce() 函数。此方法执行每个数组元素的（指定）reducer 函数并生成单个输出值。

例子：

我们有一个包含名称和类别这两个属性的产品列表。

const products = [
  {name: 'Mathematics', category: 'Subject'},
  {name: 'Cow', category: 'Animal'},
  {name: 'Science', category: 'Subject'},
];

在上面的示例中，products 是一个对象数组。

接下来，我们需要执行一个简单的操作。使用产品列表，我们将按类别对产品进行分组。

const groupByCategory = {
  Subjects: [
    {name: 'Mathematics', category: 'Subjects'},
    {name: 'Science', category: 'Subjects'},
  ],
  Animals: [{name: 'Cow', category: 'Animals'}],
};

从产品数组中获取类似数组的 groupByCategory 的常用方法是使用适当的回调函数调用 array.reduce() 方法。

const groupByCategory = products.reduce((group, product) => {
  const {category} = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});

输出：

"{
    'Subject': [
        {
            'name': 'Mathematics',
            'category': 'Subject'
        },
        {
            'name': 'Science',
            'category': 'Subject'
        }
    ],
    'Animal': [
        {
            'name': 'Cow',
            'category': 'Animal'
        }
    ]
}"

见演示

products.reduce() 函数将数组缩减为按类别分组的产品对象。

array.groupBy（回调）接受使用三个参数调用的回调函数：当前数组元素、索引和数组本身。回调必须返回一个字符串（你要向其添加功能的组名）。

const groupedObject = array.groupBy((item, index, array) => {
  ...return groupNameAsString;
});

作者： Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

在 JavaScript 中使用 reduce() 对对象数组进行分组

相关文章 - JavaScript Array

在 JavaScript 中使用 `reduce()` 对对象数组进行分组