如何按指定属性对对象数组分组并保留原对象属性

我有一个对象数组，希望按照其中某个属性进行分组，生成新的对象数组，保留原对象的所有属性，并新增一个属性将所有value属性合并为数组。以下是输入示例与期望输出：

输入

[
  {
    group_by_this_property: 1,
    value: 100,
    class: 'A',
  },
  {
    group_by_this_property: 1,
    value: 101,
    class: 'A',
  },
  {
    group_by_this_property: 1,
    value: 102,
    class: 'A',
  },
  {
    group_by_this_property: 2,
    value: 200,
    class: 'B',
  },
  {
    group_by_this_property: 2,
    value: 201,
    class: 'B',
  }
]

期望输出

[
  {
    group_by_this_property: 1,
    values: [100, 101, 102],
    class: 'A',
  },
  {
    group_by_this_property: 2,
    values: [200, 201],
    class: 'B',
  },
]

实现代码 #

const input = [/* 上述输入数组 */];

// 按指定属性分组并合并values
const groupedResult = input.reduce((acc, item) => {
  const groupKey = item.group_by_this_property;
  // 初始化分组
  if (!acc[groupKey]) {
    // 复制原对象属性，移除value，新增values数组
    acc[groupKey] = { ...item, values: [] };
    delete acc[groupKey].value;
  }
  // 收集当前item的value
  acc[groupKey].values.push(item.value);
  return acc;
}, {});

// 将分组对象转为数组
const output = Object.values(groupedResult);

console.log(output);

通用封装版本 #

如果需要支持任意分组属性，可以封装成可复用函数：

function groupByAndMergeValues(arr, groupProp) {
  return Object.values(arr.reduce((acc, item) => {
    const key = item[groupProp];
    if (!acc[key]) {
      acc[key] = { ...item, values: [] };
      delete acc[key].value;
    }
    acc[key].values.push(item.value);
    return acc;
  }, {}));
}

// 使用示例
const result = groupByAndMergeValues(input, 'group_by_this_property');

内容的提问来源于stack exchange，提问作者Komakino_1251