如何用Angular/JavaScript按ID合并数组元素？能否使用array.reduce()？

需求说明 #

合并数组元素以避免重复值，当元素id相同时，将name字段用“OR”拼接。

输入数组 #

const array = [
  {id: 1, name:'abc'},
  {id: 1, name:'xyz'},
  {id: 2, name:'text1'},
  {id: 2, name:'text2'}
];

期望输出 #

const result = [
  {id: 1, name:'abc OR xyz'},
  {id: 2, name:'text1 OR text2'}
];

实现方案 #

1. 使用array.reduce()实现（更简洁，推荐） #

reduce()天生适合这类聚合场景，不用额外写循环控制逻辑：

const mergedArray = array.reduce((acc, current) => {
  // 查找累加器中是否已有相同id的元素
  const existingItem = acc.find(item => item.id === current.id);
  if (existingItem) {
    // 已有则拼接name字段
    existingItem.name += ` OR ${current.name}`;
  } else {
    // 没有则浅拷贝当前元素后加入累加器，避免修改原数组
    acc.push({...current});
  }
  return acc;
}, []); // 初始值传入空数组作为累加器

2. 使用for循环实现 #

要是更习惯传统循环写法，用对象做映射也能实现：

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

for (const item of array) {
  if (map[item.id]) {
    map[item.id].name += ` OR ${item.name}`;
  } else {
    map[item.id] = {...item};
    mergedArray.push(map[item.id]);
  }
}

关于Angular中的使用 #

Angular项目里直接用上述代码就行，不管是组件类还是服务中都能正常运行。如果是TypeScript环境，只需给数组和对象加上类型定义即可，比如：

interface Item {
  id: number;
  name: string;
}

const array: Item[] = [/* 输入数组内容 */];
// 后续逻辑和JS版本一致，类型会自动推导

注：两种方案都不会修改原数组，通过浅拷贝生成新对象，避免产生副作用。

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