JS数组对象去重

先看看数组对象格式：

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 循环执行结束，得到的即为去重后的数组对象

写在最后：对比以上三种方法，肯定还是循环越少越好，巧用reduce对代码性能肯定是有提升的，希望能帮到有需要的同学。