如何处理JavaScript对象中的重复device键并合并action值？

当然需要创建新对象来处理啦！直接在原数组上修改不仅容易搞乱原始数据，用一个临时的映射对象来聚合重复device的action会更清晰高效，还能避免意外的副作用，是这类场景的常规做法。

具体实现代码 #

这里用Array.reduce()来完成聚合操作，逻辑清晰且性能不错：

const originalArray = [
  { device: 4323, action: 'CASH IN' },
  { device: 4325, action: 'ALTER DB' },
  { device: 4323, action: 'Order Pizza' }
];

const mergedArray = Object.values(
  originalArray.reduce((acc, item) => {
    // 检查当前device是否已经在累加器中存在
    if (acc[item.device]) {
      // 存在则追加action，用逗号分隔
      acc[item.device].action += ', ' + item.action;
    } else {
      // 不存在则创建新对象存入累加器（用展开运算符做浅拷贝，避免修改原对象）
      acc[item.device] = { ...item };
    }
    return acc;
  }, {}) // 初始化累加器为空对象
);

console.log(mergedArray);
// 输出：
// [
//   { device: 4323, action: 'CASH IN, Order Pizza' },
//   { device: 4325, action: 'ALTER DB' }
// ]

代码逻辑说明 #

1. reduce累加器：用一个空对象作为临时映射，键是device的数值，值是已经合并过action的对象
2. 遍历处理每一项：
   • 如果当前device已在映射中，就把当前action追加到已有字符串后面
   • 如果不存在，就把当前项的浅拷贝存入映射（用{...item}避免后续修改影响原数组）
3. 转换为目标数组：用Object.values()提取映射中的所有值，得到最终的聚合数组

额外优化提示 #

如果你的场景中可能出现重复的action（比如同一个device多次出现相同的action），可以用Set来自动去重：

const mergedArrayWithUniqueActions = Object.values(
  originalArray.reduce((acc, item) => {
    if (acc[item.device]) {
      // 用Set存储action，自动去重
      const actionSet = new Set(acc[item.device].action.split(', '));
      actionSet.add(item.action);
      acc[item.device].action = Array.from(actionSet).join(', ');
    } else {
      acc[item.device] = { ...item };
    }
    return acc;
  }, {})
);

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