JS数组去重怎么实现_JS数组去重多种方法与性能对比教程

答案:JavaScript数组去重推荐使用Set方法,代码简洁且性能最优,适用于基本类型;对象数组则可用Map按字段去重,filter+indexOf和reduce+includes兼容性好但性能较差,大数据量时不推荐。

js数组去重怎么实现_js数组去重多种方法与性能对比教程

JavaScript数组去重是开发中常见的需求,尤其在处理用户输入、接口返回数据时。实现方式多种多样,各有优劣,适用场景也不同。下面介绍几种主流的去重方法,并对比它们的性能和使用限制。

1. 利用 Set 去重(推荐)

ES6 引入的 Set 数据结构天然支持唯一值存储,结合扩展运算符可以非常简洁地实现去重。

const uniqueArr = […new Set(arr)];

该方法适用于基本类型(如数字、字符串)数组去重,代码最简洁,性能优秀。

优点:

语法简洁,一行搞定 性能好,时间复杂度接近 O(n) 原生支持,兼容现代浏览器

缺点:

无法区分对象引用(对象仍按引用比较)

2. 使用 filter + indexOf

通过 filter 遍历数组,保留第一次出现的元素。

const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);

适用于基本类型数组,逻辑清晰易懂。

优点:

兼容性好,支持老版本浏览器 不需要额外数据结构

缺点:

性能较差,indexOf 在内部再次遍历,时间复杂度为 O(n²) 大数据量时不推荐使用

3. 使用 reduce + includes

利用 reduce 累积唯一值,每次判断新元素是否已存在。

const uniqueArr = arr.reduce((acc, cur) => acc.includes(cur) ? acc : […acc, cur], []);

语义清晰,适合理解去重过程。

uBrand Logo生成器 uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

uBrand Logo生成器 124 查看详情 uBrand Logo生成器

优点:

函数式编程风格,可读性强 控制灵活,可自定义判断逻辑

缺点:

includes 同样需要遍历,性能为 O(n²) 频繁创建新数组影响效率

4. 使用 Map 或 Object 标记(适合复杂类型)

当数组包含对象或需要根据对象属性去重时,可用 Map 记录已出现的键。

function uniqueBy(arr, key) {
 const map = new Map();
 return arr.filter(item => !map.has(item[key]) && map.set(item[key], true));
}

可用于对象数组按某个字段(如 id)去重。

优点:

支持对象去重 性能较好,O(n)

缺点:

需明确去重依据字段

5. 性能对比总结

对长度为 10万 的数字数组测试去重耗时(单位:毫秒):

Set 方法:约 10-15ms Map 标记法:约 15-20ms filter + indexOf:约 800ms+ reduce + includes:约 900ms+

可见 Set 是性能最优的选择,尤其适合基础类型大批量去重。

基本上就这些。日常开发中优先使用 Set 方式,简洁高效;涉及对象去重时改用 Map 控制逻辑。选择方法时要权衡数据类型、性能要求和浏览器兼容性。

以上就是JS数组去重怎么实现_JS数组去重多种方法与性能对比教程的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月28日 09:03:48
下一篇 2025年11月28日 09:04:09

相关推荐

  • 如何查找路由器的默认登录账号密码?

    可以通过以下方法找到路由器的默认登录信息:1.检查路由器标签;2.查阅用户手册;3.访问制造商网站;4.使用在线数据库。这些信息用于初始配置和管理路由器,首次登录后应立即更改密码以确保安全。 引言 在探索网络世界时,路由器扮演着至关重要的角色。无论你是刚入手一台新路由器,还是在尝试重置旧设备,找到默…

    2025年12月6日 硬件教程
    000
  • 不同国家路由器的默认登录地址和密码差异

    不同国家常见路由器品牌的默认登录地址和密码各不相同。1. 中国:tp-link(192.168.0.1,admin/admin),华为(192.168.3.1,admin/admin)。2. 美国:netgear(192.168.1.1,admin/password),linksys(192.168…

    2025年12月6日 硬件教程
    100
  • AO3镜像站备用镜像网址_AO3镜像站快速访问官网

    AO3镜像站备用网址包括ao3mirror.com和xiaozhan.icu,当主站archiveofourown.org无法访问时可切换使用,二者均同步更新内容并支持多语言检索与离线下载功能。 AO3镜像站备用镜像网址在哪里?这是不少网友都关注的,接下来由PHP小编为大家带来AO3镜像站快速访问官…

    2025年12月6日 软件教程
    000
  • jm漫画官方正版入口 jm漫画官方网站登录链接

    JM漫画作为一个致力于为广大漫画爱好者服务的全方位的数字漫画阅读平台,凭借其海量的资源储备、卓越的阅读体验和人性化的功能设计,在众多同类平台中脱颖而出。它不仅收录了来自世界各地的热门连载与经典完结作品,更通过智能推荐算法,精准地将符合用户口味的精彩内容呈现眼前,让每一位用户都能在这里找到属于自己的精…

    2025年12月6日 软件教程
    000
  • 怎么下载安装快手极速版_快手极速版下载安装详细教程

    1、优先通过华为应用市场搜索“快手极速版”,确认开发者为北京快手科技有限公司后安装;2、若应用商店无结果,可访问快手极速版官网下载APK文件,需手动开启浏览器的未知来源安装权限;3、也可选择豌豆荚、应用宝等可信第三方平台下载官方版本,核对安全标识后完成安装。 如果您尝试在手机上安装快手极速版,但无法…

    2025年12月6日 软件教程
    000
  • 哔哩哔哩的视频卡在加载中怎么办_哔哩哔哩视频加载卡顿解决方法

    视频加载停滞可先切换网络或重启路由器,再清除B站缓存并重装应用,接着调低播放清晰度并关闭自动选分辨率,随后更改播放策略为AVC编码,最后关闭硬件加速功能以恢复播放。 如果您尝试播放哔哩哔哩的视频,但进度条停滞在加载状态,无法继续播放,这通常是由于网络、应用缓存或播放设置等因素导致。以下是解决此问题的…

    2025年12月6日 软件教程
    000
  • REDMI K90系列正式发布,售价2599元起!

    10月23日,redmi k90系列正式亮相,推出redmi k90与redmi k90 pro max两款新机。其中,redmi k90搭载骁龙8至尊版处理器、7100mah大电池及100w有线快充等多项旗舰配置,起售价为2599元,官方称其为k系列迄今为止最完整的标准版本。 图源:REDMI红米…

    2025年12月6日 行业动态
    000
  • Linux中如何安装Nginx服务_Linux安装Nginx服务的完整指南

    首先更新系统软件包,然后通过对应包管理器安装Nginx,启动并启用服务,开放防火墙端口,最后验证欢迎页显示以确认安装成功。 在Linux系统中安装Nginx服务是搭建Web服务器的第一步。Nginx以高性能、低资源消耗和良好的并发处理能力著称,广泛用于静态内容服务、反向代理和负载均衡。以下是在主流L…

    2025年12月6日 运维
    000
  • TikTok视频无法下载怎么办 TikTok视频下载异常修复方法

    先检查链接格式、网络设置及工具版本。复制以https://www.tiktok.com/@或vm.tiktok.com开头的链接,删除?后参数,尝试短链接;确保网络畅通,可切换地区节点或关闭防火墙;更新工具至最新版,优先选用yt-dlp等持续维护的工具。 遇到TikTok视频下载不了的情况,别急着换…

    2025年12月6日 软件教程
    000
  • 助力工业转型升级金士顿工博会大放异彩

    在刚刚落幕的第二十五届中国国际工业博览会(简称“工博会”)上,参会嘉宾或满载而归,或回味无穷,但无一例外地达成了一项共识——人工智能正深度赋能新型工业化,中国制造业正从“制造”迈向“智造”,并在转型升级之路上取得了令人瞩目的成就。 工业变革的核心在于技术架构的重塑与关键技术的支撑。当现代工业逐步演进…

    2025年12月6日 行业动态
    000
  • jm漫画网页网址 jm漫画网页版进入 jm漫画网站网页版

    在广阔的数字漫画世界中,无数爱好者渴望寻得一个能够汇集海量作品、提供流畅阅读体验的综合性平台。这样的平台不仅是追更新、补旧番的乐园,更是连接创作者与读者的桥梁,让每一个精彩的故事都能被发现和分享。它以其丰富的资源和人性化的设计,成为了漫画迷们探索奇妙二次元世界的理想起点,满足了从热门大作到小众佳作的…

    2025年12月6日 软件教程
    000
  • 「世纪传奇刀片新篇」飞利浦影音双11声宴开启

    百年声学基因碰撞前沿科技,一场有关声音美学与设计美学的影音狂欢已悄然引爆2025“双十一”! 当绝大多数影音数码品牌还在价格战中挣扎时,飞利浦影音已然开启了一场跨越百年的“声”活革命。作为拥有深厚技术底蕴的音频巨头,飞利浦影音及配件此次“双十一”精准聚焦“传承经典”与“设计美学”两大核心,为热爱生活…

    2025年12月6日 行业动态
    000
  • 怎么在VSCode里管理多个项目?

    使用多根工作区可高效管理多个项目,通过“添加文件夹到工作区”整合项目并保存为.code-workspace文件,实现一键恢复;各项目可在其.vscode/settings.json中配置独立设置,工作区级设置优先于全局但低于文件夹级;利用资源管理器和Ctrl+P快速导航与搜索;每个项目可定义独立的l…

    2025年12月6日 开发工具
    000
  • Vue.js应用中配置环境变量:灵活管理后端通信地址

    在%ignore_a_1%应用中,灵活配置后端api地址等参数是开发与部署的关键。本文将详细介绍两种主要的环境变量配置方法:推荐使用的`.env`文件,以及通过`cross-env`库在命令行中设置环境变量。通过这些方法,开发者可以轻松实现开发、测试、生产等不同环境下配置的动态切换,提高应用的可维护…

    2025年12月6日 web前端
    000
  • VSCode选择范围提供者实现

    Selection Range Provider是VSCode中用于实现层级化代码选择的API,通过注册provideSelectionRanges方法,按光标位置从内到外逐层扩展选择范围,如从变量名扩展至函数体;需结合AST解析构建准确的SelectionRange链式结构以提升选择智能性。 在 …

    2025年12月6日 开发工具
    000
  • JavaScript动态生成日历式水平日期布局的优化实践

    本教程将指导如何使用javascript高效、正确地动态生成html表格中的日历式水平日期布局。重点解决直接操作`innerhtml`时遇到的标签闭合问题,通过数组构建html字符串来避免浏览器解析错误,并利用事件委托机制优化动态生成元素的事件处理,确保生成结构清晰、功能完善的日期展示。 在前端开发…

    2025年12月6日 web前端
    000
  • JavaScript响应式编程与Observable

    Observable是响应式编程中处理异步数据流的核心概念,它允许随时间推移发出多个值,支持订阅、操作符链式调用及统一错误处理,广泛应用于事件监听、状态管理和复杂异步逻辑,提升代码可维护性与可读性。 响应式编程是一种面向数据流和变化传播的编程范式。在前端开发中,尤其面对复杂的用户交互和异步操作时,J…

    2025年12月6日 web前端
    000
  • JavaScript生成器与迭代器协议实现

    生成器和迭代器基于统一协议实现惰性求值与数据遍历,通过next()方法返回{value, done}对象,生成器函数简化了迭代器创建过程,提升处理大数据序列的效率与代码可读性。 JavaScript中的生成器(Generator)和迭代器(Iterator)是处理数据序列的重要机制,尤其在处理惰性求…

    2025年12月6日 web前端
    000
  • 处理动态表单数据:PHP 接收和存储学生成绩

    本文档旨在提供一种清晰有效的方法,用于处理通过 JavaScript 动态生成的表单数据,并将其存储到 PHP 后端数据库中。我们将重点解决如何为动态生成的表单元素创建唯一的名称,以便在 PHP 中正确地访问和处理这些数据。通过修改 HTML结构和JavaScript代码,确保数据能够以结构化的方式…

    2025年12月6日 web前端
    000
  • 解决MongoDB连接错误:正确使用MongoClient进行数据库连接

    本教程旨在解决初次使用mongodb时常见的“mongodb.connect is not a function”错误。我们将详细介绍如何使用mongodb官方驱动中的`mongoclient`类建立稳定的数据库连接,并结合express.js框架,采用现代化的`async/await`语法实现高效…

    2025年12月6日 web前端
    000

发表回复

登录后才能评论
关注微信