如何基于field属性合并JavaScript对象数组并聚合value值？

嘿，我来帮你搞定这个数组合并的需求！先明确一下你的需求：

原始数组是这样的：

var array = [ 
  { category: 'Input', field: 0, value: '17' }, 
  { category: 'Input', field: 0, value: '5' }, 
  { category: 'Input', field: 0, value: '8' }, 
  { category: 'Input', field: 5, value: '1' }, 
  { category: 'Input', field: 5, value: '4' }, 
  { category: 'Input', field: 0, value: '1' } 
];

我们需要把相同field值的对象合并，把对应的value聚合成数组，最终得到：

[ 
  { category: 'Input', field: 0, value: ['17', '5', '8', '1'] }, 
  { category: 'Input', field: 5, value: ['1', '4'] } 
]

下面给你两种实用的实现方案：

方案一：使用Array.reduce()（简洁直观） #

reduce是处理数组聚合场景的利器，代码简洁易懂，适合大多数常规场景：

const mergedArray = array.reduce((acc, current) => {
  // 在累加器中查找已有相同field的对象
  const existingItem = acc.find(item => item.field === current.field);
  
  if (existingItem) {
    // 找到则追加value到数组
    existingItem.value.push(current.value);
  } else {
    // 没找到则创建新对象，将value转为数组后加入累加器
    acc.push({
      ...current,
      value: [current.value]
    });
  }
  
  return acc;
}, []); // 初始化累加器为空数组

console.log(mergedArray);

代码解释： #

• acc是我们的"累加容器"，用来逐步存储合并后的结果；current是当前遍历到的原数组元素。
• 每次遍历先检查容器里有没有和当前元素field一致的项：有就追加value，没有就新建一个带数组value的对象加进去。
• 最后返回累加容器，就是我们要的结果。

方案二：使用映射对象优化性能（适合大数据量） #

如果你的数组元素特别多，方案一里的find方法会因为重复遍历累加器导致性能下降。这时候可以用一个临时对象做映射，把查找时间降到O(1)：

const fieldMap = {};
const mergedArray = [];

array.forEach(item => {
  const fieldKey = item.field;
  if (!fieldMap[fieldKey]) {
    // 映射中无记录时，创建新对象并同步加入数组和映射
    fieldMap[fieldKey] = {
      ...item,
      value: [item.value]
    };
    mergedArray.push(fieldMap[fieldKey]);
  } else {
    // 已有记录直接追加value
    fieldMap[fieldKey].value.push(item.value);
  }
});

console.log(mergedArray);

代码解释： #

• 用fieldMap存储每个field对应的合并后对象，通过field值直接访问，避免了重复遍历。
• 遍历原数组时，要么新建对象并存入映射和结果数组，要么直接在映射的对象里追加value，效率更高。

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