js中关于数组去重的几个常见方法?

本文链接：https://blog.youkuaiyun.com/weixin_47188575/article/details/121640804

本文探讨了JavaScript中常见的数组去重方法，包括使用新数组、ES6的Set特性以及filter方法，并针对这些方法在处理对象去重时的局限性进行了分析。作者指出，由于JavaScript比较元素基于引用，导致对象无法有效去重。为解决这一问题，作者提出使用哈希表建立映射关系来实现基于内容的去重，从而达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于数组去重已经是js中老生常谈的问题了,对于常见的去重方法以及不同,作为小白做一下一些自己的理解:

1. 最常见的建立新数组的方法

这个方法主要使用到的是indexOf/includes的方法

let arr = [1, 2, 3, 3, 2, 4, 6, 'a', 'c', 'a', { name1: '鲨鱼辣椒' }, { name1: '鲨鱼辣椒' }]
function unique1(arr) {
  arr.forEach((value) => {
    if (newArr.indexOf(value) == -1) {
      newArr.push(value)
    }
  })
  return newArr
}
console.log(unique1(arr))//[ 1, 2, 3, 4, 6, 'a', 'c', { name1: '鲨鱼辣椒' }, { name1: '鲨鱼辣椒' } ]

function unique2(arr) {
  arr.forEach((value) => {
    if (!newArr.includes(value)) {
      newArr.push(value)
    }
  })
  return newArr
}
console.log(unique2(arr))//[ 1, 2, 3, 4, 6, 'a', 'c', { name1: '鲨鱼辣椒' }, { name1: '鲨鱼辣椒' } ]

2. 使用到ES6的新特性set

function unique(arr) {
  return [...new Set(arr)]
}
console.log(unique(arr))//[ 1, 2, 3, 4, 6, 'a', 'c', { name1: '鲨鱼辣椒' }, { name1: '鲨鱼辣椒' } ]

function unique(arr) {
  return Array.from(new Set(arr))
}
console.log(unique(arr))//[ 1, 2, 3, 4, 6, 'a', 'c', { name1: '鲨鱼辣椒' }, { name1: '鲨鱼辣椒' } ]

3. filter的方法

function unique4(arr) {
  return arr.filter((value, index) => {
    return arr.indexOf(value, 0) === index;
  })
}
console.log(unique4(arr))//[ 1, 2, 3, 4, 6, 'a', 'c', { name1: '鲨鱼辣椒' }, { name1: '鲨鱼辣椒' } ]

这个indexOf的功能用于记载元素出现在数组中的位置,当元素如果是第一次出现那么位置就等于索引号,当第二次出现的时候元素记载的位置还是第一次记载的,因此不会等于当前的索引号

但是明显的看到了对于简单的数据类型而言实现了去重的效果,而对于对象而言,没有实现去重,为此我觉得有两个可能:

1. indexOf/includes方法是判断元素的地址,两个对象的内存地址不相同,因此得到了保留

2. 这个方法没有办法实现深度的判断

console.log({name1:'鲨鱼辣椒'}==={name1:'鲨鱼辣椒'});//false

至此说明了内存地址不相同,说明前面几种方法都是比较元素的地址,并不是比较元素的内容,而我们在实现去重的时候更想要的结果是单纯比较元素,因此我使用了建立哈希表的方法

4. 建立哈希表

function unique3(arr) {
  let hashtable = {}
  let newArr1 = []
  arr.forEach((value) => {
    if (!hashtable[value]) {
      hashtable[value] = 1
      newArr1.push(value)
    }
  })
  return newArr1
}
console.log(unique3(arr))//[ 1, 2, 3, 4, 6, 'a', 'c', { name1: '鲨鱼辣椒' } ]

这个方法实现了单纯的对元素的内容进行对比实现去重.