JavaScript：如何对对象数组按type字段去重并保留首次出现元素

实现方案 #

你可以通过以下几种常见方式实现按type字段去重、保留首次出现元素的需求：

方法1：Set + filter（最简洁，时间复杂度O(n)）

通过Set存储已出现的type标识，遍历数组时判断是否已存在，不存在则保留并标记为已出现：

const data = [ 
  { "name": "Apple", "type": "Fruit"}, 
  { "name": "Cabbage", "type": "Vegetable"} , 
  { "name": "Orange", "type": "Fruit"} 
]

const existedType = new Set()
const filteredData = data.filter(item => {
  if (!existedType.has(item.type)) {
    existedType.add(item.type)
    return true
  }
  return false
})

// 输出结果
console.log(filteredData)
/*
[
  { name: 'Apple', type: 'Fruit' },
  { name: 'Cabbage', type: 'Vegetable' }
]
*/

方法2：reduce实现（适合链式处理场景）

const filteredData = data.reduce((res, current) => {
  // 检查当前type是否已经在结果数组中存在
  const isExist = res.some(item => item.type === current.type)
  if (!isExist) res.push(current)
  return res
}, [])

注意：该方法每次遍历都要检索结果数组，时间复杂度为O(n²)，大数据量场景下推荐使用方法1。

方法3：普通for循环（兼容性最好，适配低版本JS环境）

const existedType = {}
const filteredData = []
for (let i = 0; i < data.length; i++) {
  const item = data[i]
  if (!existedType[item.type]) {
    existedType[item.type] = true
    filteredData.push(item)
  }
}

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