JavaScript 数组去重:11 种方法对比与实战指南

文章目录

    • 前言
    • 一、使用 `Set` 数据结构
    • 二、使用 `filter` + `indexOf`
    • 三、使用 `reduce` 累加器
    • 四、双重 `for` 循环
    • 五、利用对象属性唯一性
    • 六、先排序后去重
    • 七、使用 `Map` 数据结构
    • 八、使用 `includes` 方法
    • 九、优化处理 `NaN` 的 `filter` 方法
    • 十、利用 `findIndex`
    • 十一.利用`Set`和展开运算符处理多维数组
    • 总结

前言

一、使用 Set 数据结构

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

利用 Set 数据结构中重复元素会被自动过滤的特点。

  • 优点:简单高效,时间复杂度为 O(n)。
  • 注意:无法区分对象引用类型,但是可以处理 NaN

二、使用 filter + indexOf

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

使用 indexOf 返回元素首次出现的索引,若非当前索引则过滤。

  • 注意:时间复杂度为 O(n²),不处理 NaN,因为 indexOf(NaN) 始终返回 -1。

三、使用 reduce 累加器

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

使用 reduce 检查当前元素是否存在于累加数组中,存在则不添加,不存在则添加。

  • 注意:时间复杂度为 O(n²),空间复杂度较高。

四、双重 for 循环

function uniqueByLoop(arr) {const result = [];for (let i = 0; i < arr.length; i++) {let isDuplicate = false;for (let j = 0; j < result.length; j++) {if (arr[i] === result[j]) {isDuplicate = true;break;}}if (!isDuplicate) result.push(arr[i]);}return result;
}

通过循环嵌套比较元素是否重复。

  • 注意:时间复杂度为 O(n²),性能较差。

五、利用对象属性唯一性

function uniqueByObj(arr){const obj = {}return arr.filter(item=>{const key = typeof item + JSON.stringify(item)return obj.hasOwnProperty(key) ? false :(obj[key] = true) })

对象的键名唯一,通过序列化来区分不同类型及对象。

  • 注意JSON.stringify 无法处理函数、循环引用,性能一般。

六、先排序后去重

function uniqueBySort(arr) {const sortedArr = [...arr].sort();return sortedArr.filter((item, index) => index === 0 || item !== sortedArr[index - 1]);
}

对数组排序后,重复的元素会相邻,然后直接过滤。

  • 注意:原数组顺序会被改变。

七、使用 Map 数据结构

function uniqueByMap(arr){const map = new Map()return arr.filter(item=>!map.has(item) && map.set(item,true))
}

利用 Map 键的唯一性可以快速判断元素是否存在。

  • 优点:时间复杂度为 O(n),可以正确处理对象引用和 NaN

八、使用 includes 方法

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

在遍历时检查元素是否已存在于结果数组。

  • 注意:时间复杂度为 O(n²),不能处理 NaN

九、优化处理 NaNfilter 方法

function uniqueWithNaN(arr) {const hasNaN = arr.some(item => Number.isNaN(item));const result = arr.filter((item, index) => {if (Number.isNaN(item)) {// 仅保留第一个NaNreturn !hasNaN || (index === arr.findIndex(i => Number.isNaN(i)));}return arr.indexOf(item) === index;});return result;
}

单独处理 NaN,确保只保留第一个出现的 NaN

  • 优点:该方法兼容 NaN 去重。

十、利用 findIndex

function uniqueByFindIndex(arr) {return arr.filter((item, index) => {return arr.findIndex(i => i === item) === index;});
}

使用 findIndexindexOf 方法类似,但是可以处理自定义处理 NaN

十一.利用Set和展开运算符处理多维数组

function uniqueMultidimensionalArray(arr) {return Array.from(new Set(arr.flat(Infinity)));
}

首先利用flat方法将多维数组扁平化,然后利用Set去除重复元素,最后通过Array.fromSet转换会数组

  • 注意:该方法只能处理元素为基本类型或可序列化的对象的多维数组。如果数组中包含函数,循环引用等特殊对象,flat方法和Set可能无法正确处理

总结

  • 简单场景:优先使用 SetMap,简洁高效。
  • 兼容性要求:使用 filter + indexOf 或者双重循环。
  • NaN 或者对象:选择 Map 或改进的对象属性方法。
  • 排序无影响:排序后去重效率高 。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/82501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ai agent(智能体)开发 python3基础14:在python 中 总能看到方法里面套方法,那什么时候用这种方式合适呢?

让人头疼的方法嵌套还是要去了解的 在 Python 中&#xff0c;方法内部嵌套方法&#xff08;即在类的方法中定义另一个函数&#xff09;是一种常见的代码组织技巧&#xff0c;它可以在特定场景下带来以下好处&#xff1a; 1. 代码复用与逻辑封装 如果某个方法内部有重复的逻辑…

Yocto项目实战经验总结:从入门到高级的全面概览

本文面向开发者和实际项目经验者&#xff0c;分享经过大量实战积累的 Yocto 项目工程经验和基础技巧。本文简明但精彩&#xff0c;应用和观察相结合&#xff0c;充分适合做为全面进阶 Yocto 项目开发的实用指南。 一、入门理解&#xff1a;Yocto 是什么&#xff1f;规划如何开始…

添加物体.

在cesium中我们可以添加物体进入地图.我们以广州塔为例 //生成广州塔的位置var position2 Cesium.Cartesian3.fromDegrees(113.3191,23.109,100)viewer.camera.setView({//指定相机位置destination: position2, 运行后如图 我们使用cesium官网提供的代码为广州塔在地图上标点…

正则表达式非捕获分组?:

一个使用 Java 正则表达式的具体例子&#xff0c;展示了 (ab) 和 (?:ab) 的不同&#xff1a; 示例 1&#xff1a;使用 (ab)&#xff08;捕获分组&#xff09; import java.util.regex.*; public class RegexExample { public static void main(String[] args) { …

ragflow报错:KeyError: ‘\n “序号“‘

环境&#xff1a; ragflowv 0.17.2 问题描述&#xff1a; ragflow报错&#xff1a;KeyError: ‘\n “序号”’ **1. 推荐表&#xff08;输出json格式&#xff09;** [{"},{},{"},{} ]raceback (most recent call last): May 08 20:06:09 VM-0-2-ubuntu ragflow-s…

Spring Boot-8启动涉及的监听器(扩展点)

从出现时间上看&#xff1a; org.springframework.context.ApplicationListener&#xff0c;Spring 1.0开始出现 org.springframework.context.ApplicationContextInitializer&#xff0c;Spring 3.1开始出现 org.springframework.boot.SpringApplicationRunListener&#x…

如何启动vue项目及vue语法组件化不同标签应对的作用说明

如何启动vue项目及vue语法组件化不同标签应对的作用说明 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性。【帮帮志系列文章】&…

思考:(linux) tmux 超级终端快速入门的宏观思维

tmux 工具集合 GitHub - rothgar/awesome-tmux: A list of awesome resources for tmux 要点&#xff1a; 习惯性思维的变换与宿主机之间的双向复制、粘贴手动备份全部窗口&#xff0c;以及还原自定义窗格提示信息TPM 插件的安装思想别名 在有些场景里&#xff0c;可能无法…

Python实例题:Python协程详解公开课

目录 Python实例题 题目 课程目标 课程内容规划 1. 课程开场&#xff08;5 分钟&#xff09; 2. 基础概念讲解&#xff08;15 分钟&#xff09; 并发与并行&#xff1a; 线程与进程&#xff1a; 3. Python 协程的实现方式&#xff08;20 分钟&#xff09; 生成器实现…

AI时代的数据可视化:未来已来

你有没有想过&#xff0c;数据可视化在未来会变成什么样&#xff1f;随着人工智能&#xff08;AI&#xff09;的飞速发展&#xff0c;数据可视化已经不再是简单的图表和图形&#xff0c;而是一个充满无限可能的智能领域。AI时代的可视化不仅能自动解读数据&#xff0c;还能预测…

强化学习PPO算法学习记录

1. 四个模型&#xff1a; Policy Model&#xff1a;我们想要训练的目标语言模型。我们一般用SFT阶段产出的SFT模型来对它做初始化。Reference Model&#xff1a;一般也用SFT阶段得到的SFT模型做初始化&#xff0c;在训练过程中&#xff0c;它的参数是冻结的。Ref模型的主要作用…

边缘计算从专家到小白

“云-边-端”架构 “云” &#xff1a;传统云计算的中心节点&#xff0c;是边缘计算的管控端。汇集所有边缘的感知数据、业务数据以及互联网数据&#xff0c;完成对行业以及跨行业的态势感知和分析。 “边” &#xff1a;云计算的边缘侧&#xff0c;分为基础设施边缘和设备边缘…

Windows:Powershell的使用

文章目录 零、格式化输出命令1、Format-List&#xff08;别名&#xff1a;fl&#xff09; 一、服务管理SC命令二、软件管理命令三、权限管理命令1、Get-Acl2、Set-Acl 总结 零、格式化输出命令 1、Format-List&#xff08;别名&#xff1a;fl&#xff09; 可通过管道符传递对象…

实现在h5中添加日历提醒:safari唤起系统日历,其它浏览器跳转google日历

需求&#xff1a;点击按钮后&#xff0c;将设定的一些信息插入到系统日历的日程安排中。 调研过程 先google了一段时间&#xff0c;了解该需求大概的实现方式。可以创建日历文件&#xff0c;在点击的时候下载该日历文件&#xff0c;看起来还比较复杂&#xff0c;并且由于不具…

【Bluedroid】蓝牙 HID 设备服务注册流程源码解析:从初始化到 SDP 记录构建

本文围绕蓝牙 HID&#xff08;人机接口设备&#xff09;服务注册流程&#xff0c;详细解析从 HID 服务启用、设备初始化、L2CAP 通道注册到 SDP&#xff08;服务发现协议&#xff09;记录构建的全流程。通过分析关键函数如btif_hd_service_registration、BTA_HdEnable、HID_Dev…

Win10无法上网:Windows 无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目找不到域 TEST 的域控制器DNS 解析存在问题

目录 一.先看问题 二.解决问题 三.补充备用 一.先看问题 Win08有网且已经加入域 Win10无网并且找不到域&#xff08;说明&#xff1a;Win10我之前已经加入过域的&#xff0c;并且能够上网&#xff0c;但每次在宿舍和教室切换校园网&#xff0c;就会导致只有Win10无网&#…

M0基础篇之ADC

本节课使用到的例程 一、Single模式例程基本配置的解释 在例程中我们只使用到了PA25这一个通道&#xff0c;因此我们使用的是Single这个模式&#xff0c;也就是我们在配置模式的时候使用的是单一转换。 进行多个通道的测量我们可以使用Sequence这个模式。 二、Single模式例程基…

浅谈装饰模式

一、前言 hello大家好&#xff0c;本次打算简单聊一下装饰者模式&#xff0c;其实写有关设计模式的内容还是蛮有挑战性的&#xff0c;首先呢就是小永哥实力有限担心说不明白&#xff0c;其次设计模式是为了解决某些问题场景&#xff0c;在当前技术生态圈如此完善的情况下&#…

04 mysql 修改端口和重置root密码

当我们过了一段时间&#xff0c;忘了自己当初创建的数据库密码和端口&#xff0c;或者端口被占用了&#xff0c;要怎么处理呢 首先&#xff0c;我们先停止mysql。 一、修改端口 打开my.ini文件&#xff0c;搜索port&#xff0c;默认是3306&#xff0c;根据你的需要修改为其他…

【基于 LangChain 的异步天气查询1】异步调用 Open-Meteo API 查询该城市当前气温

目录 一、功能概述 二、文件结构 三、城市天气实时查询&#xff08;运行代码&#xff09; weather_runnable.py main.py 运行结果 四、技术亮点 五、使用场景 一、功能概述 它实现了以下主要功能&#xff1a; 用户输入地点&#xff08;城市名&#xff09; 构造提示词…