js如何实现数组去重 数组去重的5种经典方法对比

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

js如何实现数组去重 数组去重的5种经典方法对比

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

js如何实现数组去重 数组去重的5种经典方法对比

解决方案

js如何实现数组去重 数组去重的5种经典方法对比

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

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

js如何实现数组去重 数组去重的5种经典方法对比

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

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

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

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

对象属性: 利用对象的属性名唯一性。

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"会被认为是同一个。

filter + indexOf: 结合filterindexOf

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都要遍历数组。

数组元素是对象时,如何去重?

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

这时,你需要自定义比较函数。例如:

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和对象属性的方式效率较高,indexOfincludes相对较低。但是,具体情况还要看数组的大小和元素的类型。

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

如何处理NaN的去重?

NaN是一个特殊的值,它和自身不相等(NaN !== NaN)。所以,使用indexOfincludes等方法无法正确去重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,如果不存在,才添加进去。

以上就是js如何实现数组去重 数组去重的5种经典方法对比的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1506561.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 04:11:50
下一篇 2025年12月20日 04:12:01

相关推荐

  • Vercel SPA路由与资源加载:解决深层URL访问问题

    本文旨在解决在Vercel上部署单页应用(SPA)时,深层URL刷新或直接访问导致页面资源加载失败的问题。核心在于理解Vercel的路由重写机制与浏览器解析相对路径的差异。通过配置vercel.json实现所有路径重定向至index.html,并修正HTML中静态资源的引用方式,将相对路径改为绝对路…

    2025年12月20日 好文分享
    000
  • Vercel单页应用深层URL路由与资源加载问题解析

    本文深入探讨了在Vercel上部署单页应用(SPA)时,深层URL(如/projects/home)可能遇到的路由和资源加载问题。尽管Vercel的vercel.json配置看似正确,但问题的根源往往在于HTML文件中引用的相对资源路径。文章详细解释了如何通过将相对路径修改为绝对路径来解决此类问题,…

    2025年12月20日
    000
  • Vercel 单页应用 (SPA) 部署指南:解决深度 URL 资产加载问题

    本教程旨在解决 Vercel 上部署单页应用 (SPA) 时,在访问多层级 URL(如 /projects/home)时遇到的资产(CSS、JS、图片等)加载失败问题。核心在于理解 Vercel 的路由重写机制与 HTML 中相对/绝对路径的差异。通过正确配置 vercel.json 确保所有非文件…

    2025年12月20日
    000
  • Shiny应用中禁用回车键触发按钮的默认行为

    在Shiny应用中,浏览器默认行为可能导致回车键意外地模拟点击上次交互过的按钮,这可能与自定义的JavaScript逻辑冲突。本文将提供一个简洁有效的JavaScript解决方案,通过全局监听并阻止回车键的默认行为,从而避免不必要的按钮触发,确保用户交互的准确性与预期。 问题描述:回车键的默认行为与…

    2025年12月20日
    000
  • Shiny应用开发:有效禁用回车键自动触发按钮的策略

    在Shiny应用中,回车键默认会模拟上一个被点击按钮的行为,这可能与自定义的JavaScript输入确认逻辑冲突。本文将提供一个简洁的JavaScript解决方案,通过监听全局的keydown事件并阻止其默认行为,从而有效禁用回车键自动触发按钮的功能,确保用户交互的预期性与流畅性。 问题阐述 在基于…

    2025年12月20日
    000
  • 修复点击事件失效:DOMContentLoaded事件监听器应用指南

    本文旨在解决Web开发中常见的点击事件失效问题,特别是在尝试通过JavaScript控制页面元素行为时。我们将通过一个实际案例,详细讲解如何利用DOMContentLoaded事件监听器确保JavaScript代码在HTML文档完全加载后执行,从而避免因元素未加载而导致的事件绑定失败。 理解DOMC…

    2025年12月20日
    000
  • 解决点击事件无法触发菜单显示问题的教程

    本文旨在解决使用 JavaScript 控制菜单显示时,点击事件无法正确触发的问题。通过将 JavaScript 代码放置在 DOMContentLoaded 事件监听器中,确保在 DOM 加载完成后再执行相关操作,从而避免因元素未加载而导致的事件绑定失败。文章将提供详细的代码示例和解释,帮助开发者…

    2025年12月20日
    000
  • 使用 localStorage 持久化 React 应用中的状态:收藏夹功能实现

    本文旨在解决 React 应用中使用 localStorage 持久化状态,特别是收藏夹功能遇到的问题。我们将深入探讨如何正确地更新和保存状态到 localStorage,以确保数据在页面刷新后依然保留。通过修改 toggleFavorites 函数,并在每次更新收藏状态后立即保存到 localSt…

    2025年12月20日
    000
  • Adobe Acrobat 交互式PDF自定义计算:复选框计数与字段值乘法

    本教程旨在指导用户如何在Adobe Acrobat等工具中实现交互式PDF的自定义计算功能。文章详细介绍了两种常见场景的实现方法:一是统计特定列中已勾选复选框的数量,通过遍历字段并识别其状态来完成;二是根据一个字段的值乘以特定系数,将结果显示在另一个字段中。通过本文,读者将掌握在PDF表单中利用Ja…

    2025年12月20日
    000
  • DOM操作的基本方法有哪些

    dom操作的核心是通过javascript控制网页元素,主要步骤包括:1. 选择元素,常用方法有getelementbyid、getelementsbyclassname、getelementsbytagname、queryselector和queryselectorall,其中queryselec…

    2025年12月20日
    000
  • js 怎么将字符串转为JSON对象

    要将字符串转为json对象,必须使用json.parse()并处理可能的语法错误;常见错误包括单引号、多余逗号、未转义字符等;绝不使用eval()等不安全方法;实际项目中应始终用try…catch包裹、验证数据结构、注意性能与安全;可选使用reviver函数进行解析时的数据转换。 在Ja…

    2025年12月20日 好文分享
    000
  • React 中图片无法显示的解决方案

    本文旨在解决 React 应用中图片无法正常显示的问题。通过分析文件路径、资源引用方式,以及Webpack配置等常见原因,提供了一套全面的排查和解决方案,帮助开发者快速定位问题并成功显示图片。文章包含本地图片和网络图片的加载方式,以及相应的注意事项,确保图片资源在React应用中正确加载和渲染。 在…

    2025年12月20日
    000
  • ReactJS 图片无法正确显示的解决方案

    本文旨在解决 ReactJS 项目中图片无法正确显示的问题,特别是当使用相对路径引用本地图片资源时。通过分析可能的原因,提供使用 import 或 require 语句来正确引入和显示图片资源的详细步骤和示例代码,并讨论了常见的错误和解决方法,帮助开发者避免类似问题。 在 reactjs 项目中,正…

    2025年12月20日 好文分享
    000
  • TensorFlow.js怎么使用

    tensorflow.js在浏览器中运行的优势是无需服务器、保护隐私和离线支持;1. 无需服务器:模型直接在客户端运行,减少服务器负载并降低延迟;2. 保护隐私:用户数据无需上传至服务器,提升隐私安全性;3. 离线支持:部分应用可在无网络环境下运行,增强可用性。 TensorFlow.js让你可以在…

    2025年12月20日
    000
  • javascript闭包怎样实现代理模式

    闭包实现代理模式的核心是通过工厂函数创建代理对象,该代理利用闭包捕获并持有对真实对象及私有状态(如缓存)的引用,从而在不修改原对象的前提下,对其方法调用进行拦截和增强。1. 工厂函数接收真实对象作为参数;2. 内部定义私有状态(如cache)和代理方法;3. 返回的新对象方法通过闭包访问真实对象和私…

    2025年12月20日 好文分享
    000
  • js 如何使用remove移除数组中满足条件的元素

    javascript数组没有直接的remove方法,推荐使用filter实现非破坏性移除;2. filter通过条件筛选创建新数组,不修改原数组,符合函数式编程理念;3. splice可用于原地修改,但需注意索引变化带来的复杂性;4. reduce也可用于条件移除,适用于复杂数据处理场景;5. fi…

    2025年12月20日
    000
  • js 如何连接数据库

    浏览器端javascript无法直接连接数据库,必须通过后端api进行交互;2. node.js环境下的javascript可通过数据库驱动或orm/odm直接连接数据库;3. 安全原因、技术限制和架构设计决定了前端不能直连数据库;4. 实践中node.js连接mysql可用mysql2或seque…

    2025年12月20日
    000
  • js 怎么实现文件下载

    javascript前端文件下载主要通过模拟用户行为实现,常用方法包括利用标签的download属性或创建blob对象生成下载链接;2. 直接url下载适用于同源资源,但跨域或服务器未设置content-disposition时可能失效;3. 下载客户端生成的数据需使用blob对象将文本、json等…

    好文分享 2025年12月20日
    000
  • js如何获取url的查询参数

    最推荐的方式是使用urlsearchparams对象。1. 使用new urlsearchparams(window.location.search)创建实例来获取当前url的查询参数;2. 通过get(‘key’)获取单个参数值;3. 使用getall(‘key…

    2025年12月20日
    000
  • js如何操作cookie

    解决javascript操作cookie时的编码问题需在设置时使用encodeuricomponent编码,读取时使用decodeuricomponent解码,以避免特殊字符导致值被截断或解析错误;2. 确保javascript cookie安全的方法包括避免存储敏感信息、通过服务器端设置httpo…

    2025年12月20日 好文分享
    000

发表回复

登录后才能评论
关注微信