JavaScript数组去重的七种方法及特殊数据类型处理详解

 更新时间:2025年05月22日 11:32:50   作者:WAKEUP369  
这篇文章主要介绍了数组去重的必要性及七种常见方法,涵盖ES6 Set、filter、循环等技术,并提及处理对象与NaN等特殊数据的注意事项,需要的朋友可以参考下

一、为什么需要数组去重?

在数据处理场景中,重复元素会导致:

  • 统计结果失真
  • 渲染性能下降(如列表重复渲染)
  • 接口重复提交风险
  • 存储空间浪费

通过去重操作可提升数据纯净度,优化应用性能。以下 7 种常见实现方案。

二、去重方法

1. ES6 Set

function removeDuplicatesWithSet(arr) {
  return [...new Set(arr)];
}

原理

利用 Set 数据结构自动去重的特性,通过扩展运算符快速转换回数组

2. filter + indexOf

function removeDuplicatesWithFilter(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

原理

通过 indexOf 检查元素首次出现位置,过滤非首次出现的元素

3. ** for 循环法**

function removeDuplicatesWithFor(arr) {
  const uniqueArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (uniqueArray.indexOf(arr[i]) === -1) {
      uniqueArray.push(arr[i]);
    }
  }
  return uniqueArray;
}

4. 双重 for 循环法

function removeDuplicatesWithDoubleFor(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

5. indexOf 首现检测法

function removeDuplicatesWithIndexOf(arr) {
  const uniqueArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) === i) {
      uniqueArray.push(arr[i]);
    }
  }
  return uniqueArray;
}

原理

利用 indexOf 返回首个匹配索引的特性

6. includes 检测法

function removeDuplicatesWithIncludes(arr) {
  const uniqueArray = [];
  for (let item of arr) {
    if (!uniqueArray.includes(item)) {
      uniqueArray.push(item);
    }
  }
  return uniqueArray;
}

7. reduce 累积法

function removeDuplicatesWithReduce(arr) {
  return arr.reduce((acc, curr) => {
    return acc.includes(curr) ? acc : [...acc, curr];
  }, []);
}

三、特殊数据类型处理

  • 对象去重
// 根据特定属性去重
const uniqueByKey = (arr, key) => {
  const seen = new Set();
  return arr.filter(item => 
    seen.has(item[key]) ? false : seen.add(item[key])
};
  • NaN 处理
  • indexOf 无法检测 NaN(返回 -1)
  • includes 可识别 NaN

以上就是JavaScript数组去重的七种方法及特殊数据类型处理详解的详细内容,更多关于JavaScript数组去重及特殊数据处理的资料请关注脚本之家其它相关文章!

相关文章

  • TypeScript学习笔记之类型窄化篇

    TypeScript学习笔记之类型窄化篇

    目前用TypeScript的人越来越多,尤其是一些大厂,大的项目,github上面很多开源项目也都是ts语法编译的,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型窄化的相关资料,需要的朋友可以参考下
    2021-09-09
  • JavaScript统计数组中相同的数量的方法总结

    JavaScript统计数组中相同的数量的方法总结

    在JavaScript中,我们经常需要对数组中对象的属性进行统计。在本文中,我们将介绍如何使用JavaScript来实现这一功能,文中有详细的代码示例,需要的朋友可以借鉴参考
    2023-05-05
  • 利用uniapp+vue3+js适配微信隐私协议开发指南

    利用uniapp+vue3+js适配微信隐私协议开发指南

    这篇文章主要给大家介绍了关于利用uniapp+vue3+js适配微信隐私协议开发指南的相关资料,适配最新微信小程序隐私协议开发指南,兼容uniapp版本,需要的朋友可以参考下
    2023-12-12
  • js+HTML5基于过滤器从摄像头中捕获视频的方法

    js+HTML5基于过滤器从摄像头中捕获视频的方法

    这篇文章主要介绍了js+HTML5基于过滤器从摄像头中捕获视频的方法,涉及javascript基于html5元素操作多媒体的使用技巧,需要的朋友可以参考下
    2015-06-06
  • js+audio实现音乐播放器

    js+audio实现音乐播放器

    这篇文章主要为大家详细介绍了js+audio实现音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 浅析JS中对函数function的理解(基础篇)

    浅析JS中对函数function的理解(基础篇)

    我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法。下面给大家谈下对JS中函数function的理解,一起看看吧
    2016-10-10
  • location.href 在IE6中不跳转的解决方法与推荐使用代码

    location.href 在IE6中不跳转的解决方法与推荐使用代码

    在js中,我们经常使用location.href来实现页面的跳转,为了方便我们写成函数。下面就分别说明下,下面的一些代码的实现问题。
    2010-07-07
  • js仿微信语音播放实现思路

    js仿微信语音播放实现思路

    这篇文章主要为大家详细介绍了js仿微信语音播放的实现思路,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS实现拖动示例代码

    JS实现拖动示例代码

    JS实现拖动的方法有很多,在本文将为大家介绍下使用getBoundingClientRect()方法是如何实现的,感兴趣的朋友不要错过
    2013-11-11
  • JavaScript Ajax实现异步通信

    JavaScript Ajax实现异步通信

    这篇文章主要为大家详细介绍了JavaScript Ajax实现异步通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论