数组去重

菜鸟哔哔

js 数组去重是前端开发中经常使用的功能，很多时候我都是上网搜一些现成的代码使用，往往效果实现了，其中原理并不是很了解。是时候了解一下原理部分了，知其然之前所以然！搜索的时候会看到类似于“7 种/9 种/12 种/15 种”这样的标题，其实我的目的很简单，掌握 2~3 种简单，高效的方法，并了解其优缺点即可，剩下的方法知道能用即可。根据数组类型的不同，使用适合的方法，我的日常开发使中一般很少用到去除 NaN，undefined，null，故不在讨论范围内，有兴趣的小伙伴可以自行研究。

1. 非对象数组

例子：

let arr = [1, 3, 6, 7, 7, 4, 1, 3, 7, '1', '张三', '李四', '张三', '1']
let newArr = [...new Set(arr)]
console.log(newArr) //[1,3,6,7,4,'1','张三','李四']

快速使用：

let newArr = [...new Set(arr)]

newArr 为去重后的数组，arr 为旧数组

2. 数组对象

例子：

let arr = [
  { name: 'zhangsan', age: 6, score: 68 },
  { name: 'lisi', age: 7, score: 78 },
  { name: 'zhangsan', age: 6, score: 68 },
  { name: 'lisi', age: 8, score: 78 },
  { name: 'zhaoliu', age: 6, score: 56 },
  { name: 'zhangsan', age: 7, score: 56 }
]
let obj = {}
let newArr = arr.reduce((p, c) => {
  obj[c.name] ? '' : (obj[c.name] = true && p.push(c))
  return p
}, [])
console.log(newArr)
//[({ name: 'zhangsan', age: 6, score: 68 }, { name: 'lisi', age: 7, score: 78 }, { name: 'zhaoliu', age: 6, score: 56 })]

快速使用

let obj = {}
let newArr = arr.reduce((p, c) => {
  obj[c.name] ? '' : (obj[c.name] = true && p.push(c))
  return p
}, [])

newArr 为去重后的数组，arr 为旧数组，name 是筛选的条件，可以替换为自己需要的 key。

方法二

function uniqueArr(arr) {
  const result = []
  const map = new Map()
  for (let i = arr.length - 1; i >= 0; i--) {
    const cur = arr[i]
    if (!map.has(cur.name)) {
      result.unshift(cur)
      map.set(cur.name, true)
    }
  }
  return result
}

实现思路:

1. 从数组末尾开始遍历，保证保留最后一个 name 对应的对象。
2. 使用 Map 存储已经遍历过的 name 字段的值，防止重复添加。
3. 如果当前元素的 name 字段已经出现过，则跳过该元素，否则将当前元素添加到结果数组中。
   注：因为上面的函数是保留最后一个 name 对应的对象，因此这里的结果是按原数组最后一项出现的 name 字段进行去重的。如果要按第一次出现的 name 字段进行去重，可以把循环方式修改为从头到尾遍历数组，将 unshift 方法改为 push 方法即可。