如何使用JavaScript过滤对象数组重复label并按分隔符合并对应ID

核心思路 #

使用临时映射对象存储每个label对应的id集合，遍历原数组完成同label的id归集后，再转换为目标格式数组，时间复杂度为O(n)，效率较高。

代码实现 #

const originalArr = [ 
  {id: 1, label: "Hello"}, 
  {id: 2, label: "World"}, 
  {id: 3, label: "Hello"}, 
  {id: 4, label: "Sunshine"}, 
  {id: 5, label: "Hello"} 
];

// 1. 归集同label的所有id
const labelIdMap = {};
originalArr.forEach(item => {
  // 首次遇到该label时初始化空数组存储id
  if (!labelIdMap[item.label]) {
    labelIdMap[item.label] = [];
  }
  labelIdMap[item.label].push(item.id);
});

// 2. 转换为目标结构数组
const result = Object.entries(labelIdMap).map(([label, idList]) => ({
  id: idList.join('~'),
  label: label
}));

console.log(result);
/* 输出结果：
[
  { id: '1~3~5', label: 'Hello' },
  { id: '2', label: 'World' },
  { id: '4', label: 'Sunshine' }
]
*/

简洁版实现（reduce写法） #

如果习惯用reduce做归集，可以用更简短的写法，逻辑完全一致：

const result = Object.entries(
  originalArr.reduce((acc, cur) => {
    acc[cur.label] = acc[cur.label] ? [...acc[cur.label], cur.id] : [cur.id];
    return acc;
  }, {})
).map(([label, ids]) => ({ id: ids.join('~'), label }));

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