JavaScript对象数组去重：如何保留重复id的首个元素

你写的Map去重逻辑默认会用后遍历到的同key值覆盖之前的存储值，所以最后拿到的永远是每个id最后一次出现的条目，和你要保留首次出现项的需求刚好反过来。

两种可直接运行的实现方式，输出结果完全匹配预期：

• 写法1（推荐，无额外反转开销）：遍历的时候只存第一次出现的id，后续同id项直接跳过，从根源避免覆盖

const uniqueMap = new Map();
for (const item of data) {
  if (!uniqueMap.has(item.id)) {
    uniqueMap.set(item.id, item);
  }
}
const uniqueArray = [...uniqueMap.values()];

• 写法2（适配原有一行式写法）：先把数组浅拷贝后反转，让同id的首次出现项排在遍历顺序的最后，去重完成后再反转回原顺序即可

const uniqueArray = [...new Map(
  [...data].reverse().map(item => [item.id, item])
).values()].reverse();

注意：这里必须用[...data]做浅拷贝，否则reverse()会直接修改原始数组，产生非预期的副作用。

两种写法执行后得到的去重数组如下，和预期结果完全一致：

[
  { id: '10000844', text_id: '10000844-01' },
  { id: '12000844', text_id: '12000844-03' },
  { id: '12000814', text_id: '12000844-07' },
  { id: '12002812', text_id: '12000844-07' }
]

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