JS数组去重5种方法全解析

本篇文章给大家分享《JS数组去重的5种方法对比详解》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

数组去重的常见方法有：1. 使用Set，通过将数组转为Set再转回数组实现去重，优点是代码简洁但兼容性差；2. 利用indexOf判断元素是否已存在，优点兼容性好但效率低；3. 使用includes替代indexOf，更易读但兼容性不如indexOf；4. 借助对象属性名唯一性，效率高但无法区分数字和字符串类型的数字；5. filter结合indexOf，代码简洁但效率较低；对于对象元素去重，可通过序列化对象作为键存入Set实现；处理NaN时需特殊判断，因NaN不等于自身。性能上Set和对象属性方式通常更快，具体选择取决于数组大小、元素类型及兼容需求。

数组去重，简单来说，就是把数组里重复的元素去掉，只保留一个。方法有很多，但哪种最适合你，还得看具体情况。

解决方案

实现数组去重的方法五花八门，各有优劣。下面我列举几种常见的，并稍加点评：

1. Set大法： 这是ES6引入的新玩具，Set最大的特点就是元素唯一。所以，把数组转成Set，再转回来，就去重了。

   

   const arr = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArr = [...new Set(arr)];
   console.log(uniqueArr); // [1, 2, 3, 4, 5]

   优点： 简洁明了，代码量少。 缺点： 兼容性问题，老版本浏览器可能不支持。

2. indexOf： 遍历数组，利用indexOf判断元素是否已存在。

   const arr = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArr = [];
   for (let i = 0; i < arr.length; i++) {
     if (uniqueArr.indexOf(arr[i]) === -1) {
       uniqueArr.push(arr[i]);
     }
   }
   console.log(uniqueArr); // [1, 2, 3, 4, 5]

   优点： 兼容性好，几乎所有浏览器都支持。 缺点： 效率相对较低，每次都要遍历uniqueArr。

3. includes： 和indexOf类似，但更简洁。

   const arr = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArr = [];
   for (let i = 0; i < arr.length; i++) {
     if (!uniqueArr.includes(arr[i])) {
       uniqueArr.push(arr[i]);
     }
   }
   console.log(uniqueArr); // [1, 2, 3, 4, 5]

   优点： 比indexOf更易读。 缺点： 兼容性不如indexOf。

4. 对象属性： 利用对象的属性名唯一性。

   const arr = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArr = [];
   const obj = {};
   for (let i = 0; i < arr.length; i++) {
     if (!obj[arr[i]]) {
       obj[arr[i]] = true;
       uniqueArr.push(arr[i]);
     }
   }
   console.log(uniqueArr); // [1, 2, 3, 4, 5]

   优点： 效率较高。 缺点： 无法区分数字和字符串类型的数字，例如1和"1"会被认为是同一个。

5. filter + indexOf： 结合filter和indexOf。

   const arr = [1, 2, 2, 3, 4, 4, 5];
   const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
   console.log(uniqueArr); // [1, 2, 3, 4, 5]

   优点： 代码简洁。 缺点： 效率相对较低，每次indexOf都要遍历数组。

数组元素是对象时，如何去重？

当数组元素是对象时，上面的方法就行不通了。因为对象是引用类型，即使属性值相同，它们在内存中的地址也不同，所以indexOf、includes等方法无法正确判断。

这时，你需要自定义比较函数。例如：

const arr = [{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 1, name: 'a' }];
const uniqueArr = [];
const seen = new Set();

for (const obj of arr) {
  const key = JSON.stringify(obj); // 将对象转换为字符串作为键
  if (!seen.has(key)) {
    uniqueArr.push(obj);
    seen.add(key);
  }
}

console.log(uniqueArr); // [{ id: 1, name: 'a' }, { id: 2, name: 'b' }]

这个方法先把对象序列化成字符串，然后利用Set的唯一性进行判断。当然，你也可以根据实际情况，自定义更复杂的比较逻辑。

考虑性能：哪种方法最快？

性能方面，通常来说，Set和对象属性的方式效率较高，indexOf和includes相对较低。但是，具体情况还要看数组的大小和元素的类型。

如果数组很大，且元素类型简单，Set可能是最好的选择。如果数组较小，或者需要兼容老版本浏览器，indexOf或includes也可以考虑。

如何处理NaN的去重？

NaN是一个特殊的值，它和自身不相等（NaN !== NaN）。所以，使用indexOf、includes等方法无法正确去重NaN。

对于这种情况，可以特殊处理：

const arr = [1, 2, NaN, NaN, 3];
const uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    if (Number.isNaN(arr[i])) {
      if (!uniqueArr.some(isNaN)) {
        uniqueArr.push(arr[i]);
      }
    } else {
      uniqueArr.push(arr[i]);
    }
  }
}
console.log(uniqueArr); // [1, 2, NaN, 3]

这段代码首先判断元素是否为NaN，如果是，则再判断uniqueArr中是否已经存在NaN，如果不存在，才添加进去。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~