如何在JavaScript中按指定字段对对象数组进行分组重组

没问题！我来帮你搞定这个数组分组的需求～你想要把相同title的项合并到同一个对象的values数组里，用JavaScript的reduce方法就能轻松实现，这是处理这类分组场景的常用方案。

完整代码示例 #

const input = [ 
  {title: 'head', value: 'a', amount: 10}, 
  {title: 'head', value: 'b', amount: 5}, 
  {title: 'body', value: 'c', amount: 20} 
];

const output = Object.values(input.reduce((acc, item) => {
  // 检查当前title是否已在累加器中存在
  if (!acc[item.title]) {
    // 不存在则创建新的分组对象
    acc[item.title] = {
      title: item.title,
      values: []
    };
  }
  // 将当前项的value和amount添加到对应分组的values数组中
  acc[item.title].values.push({
    value: item.value,
    amount: item.amount
  });
  return acc;
}, {}));

console.log(output);
// 输出结果就是你想要的结构：
// [
//   {title: 'head', values: [{value: 'a', amount: 10}, {value: 'b', amount: 5}]},
//   {title: 'body', values: [{value: 'c', amount: 20}]}
// ]

代码解释 #

• reduce方法：它会遍历input数组的每一项，通过一个“累加器”（acc）来逐步构建我们需要的分组结构。初始时累加器是一个空对象{}。
• 分组判断：对于每个数组项，我们先检查累加器里是否已经有以当前title为键的属性。如果没有，就创建一个包含title和空values数组的新对象；如果有，就直接复用已有的分组对象。
• 添加子项：把当前项的value和amount提取出来，组成新对象后推入对应分组的values数组。
• 转换为数组：最后用Object.values()把累加器对象的所有值提取出来，就得到了你需要的数组结构。

如果你的a、b、c是已经定义好的变量，直接替换掉代码里的字符串'a'、'b'、'c'就行啦～

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