JavaScript 对象数组去重的几种方法

部分内容由大模型生成

根据对象的某个属性（如 id）对对象数组去重的几种方法。

Map

const arr = [
  { id: 'a', name: 'Object A' },
  { id: 'b', name: 'Object B' },
  { id: 'c', name: 'Object C' },
  { id: 'a', name: 'Object A (重复)' },
  { id: 'd', name: 'Object D' },
  { id: 'b', name: 'Object B (重复)' }
];

const unique = [...new Map(arr.map(item => [item.id, item])).values()]

console.log(unique)
// 输出: 
// [
//   {id: 'a', name: 'Object A (重复)'}
//   {id: 'b', name: 'Object B (重复)'}
//   {id: 'c', name: 'Object C'}
//   {id: 'd', name: 'Object D'}
// ]

Map 的键（key）唯一，map(item => [item.id, item]) 把每个对象用 id 当键，后面的重复项会覆盖。最后用 .values() 得到去重后的对象数组。

此方法会保留最后一个出现的 id 对应的对象。

filter & findIndex

const unique = arr.filter((item, index, self) =>
  index === self.findIndex(t => t.id === item.id)
)
// 输出: 
// [
//   {id: 'a', name: 'Object A'}
//   {id: 'b', name: 'Object B'}
//   {id: 'c', name: 'Object C'}
//   {id: 'd', name: 'Object D'}
// ]

findIndex 找到数组中首个 id 相同的元素位置，只有第一个匹配项会被保留。

reduce & some

const unique = arr.reduce((acc, cur) => {
  if (!acc.some(item => item.id === cur.id)) {
    acc.push(cur)
  }
  return acc
}, [])
// 输出: 
// [
//   {id: 'a', name: 'Object A'}
//   {id: 'b', name: 'Object B'}
//   {id: 'c', name: 'Object C'}
//   {id: 'd', name: 'Object D'}
// ]

累积构建一个新数组，遇到重复的 id 不再添加。

filter & Set

const seen = new Set()
const unique = arr.filter(item => !seen.has(item.id) && seen.add(item.id))
// 输出: 
// [
//   {id: 'a', name: 'Object A'}
//   {id: 'b', name: 'Object B'}
//   {id: 'c', name: 'Object C'}
//   {id: 'd', name: 'Object D'}
// ]

利用 Set 记录已出现的 id，第一次出现才添加。