JS数组对象去重

原创

wx5864b4ab50c8a 2022-06-26 00:53:44 博主文章分类：ES6 ©著作权

©著作权归作者所有：来自51CTO博客作者wx5864b4ab50c8a的原创作品，请联系作者获取转载授权，否则将追究法律责任

先看看数组对象格式：

const cars = [
  {
    sin: 1011,
    name: '挖土机'
  }, {
    sin: 1013,
    name: '搅拌车'
  }, {
    sin: 1012,
    name: '抓地车'
  }, {
    sin: 1011,
    name: '挖土机2号'
  }
]

一般思路：

const newArr = []
cars.forEach(item => {
  let count = 0
  newArr.forEach(_item => {
    if (_item.sin === item.sin) {
      count++
    }
  })
  if (count === 0) {
    newArr.push(item)
  }
})

新思路：

const newArr = cars.filter((element, index, self) => {
  return self.findIndex(x => x.sin === element.sin) === index
})

乍一看有点懵，其实也是两次循环，只不过第二次循环的findIndex 只要匹配上了就停止往下找，减少查找次数
还有一个好处是不需要定义多余的变量，上面虽然简洁但不直观，我们换种写法：

const newArr = cars.filter((element, index, self) => {
  const i = self.findIndex(x => x.sin === element.sin)
  return i === index
})

数组cars(self) 本身中是否有sin 值等于当前在匹配的element.sin ，如果有则返回匹配成功的第一个元素的索引即上面代码中的i ，如果没有则i=-1
如果i 等于当前filter 循环的index ，则表明当前element.sin 是首次出现，如果不等则表明当前element.sin 在这次filter 循环之前出现过

如何只使用一次循环就可以去重呢

带着这个想法，于是我们有了第三种解决方案：

const obj = {}
const newArr = cars.reduce((cur, next) => {
  obj[next.sin] ? null : obj[next.sin] = true && cur.push(next)
  return cur
}, [])

Array.prototype.reduce()
reduce() 方法对数组中的每个元素按序执行一个由您提供的reducer 函数，每一次运行reducer会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
这里初始是个空数组，借助一个对象来存储属性，我们都知道对象属性名肯定是唯一的，那我们这里就可以把sin 值当对象的属性名，因为sin 值也是唯一的
判断obj[next.sin] 是否存在，存在则啥也不做，不存在时则给obj[next.sin] 赋值为true 并且push 进cur 数组中
最后再返回cur 数组，等reduce 循环执行结束，得到的即为去重后的数组对象