迹忆客 专注技术分享

本文将演示在 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;
});