当前位置：
  1. 首页
  2. 前端开发
  3. JavaScript
  4. 正文

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

JavaScript 27

本文将演示在 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;
});
上一篇 在 JavaScript 中压缩两个数组
下一篇 在 JavaScript 中对整数数组进行排序

相关文章