如何用JavaScript实现数组去重_有哪些高效的方法可以选择?

JavaScript数组去重首选Set(基本类型),对象数组按字段去重推荐Map;filter+indexOf兼容老浏览器但性能差;reduce+Map支持任意键类型且健壮。

如何用javascript实现数组去重_有哪些高效的方法可以选择?

JavaScript数组去重有多种方法,效率和兼容性各不相同。现代项目推荐用 Set,简洁且性能好;老环境可选双循环或哈希表(对象/Map)方案。

用 Set 快速去重(最常用)

ES6 的 Set 自动剔除重复值,配合扩展运算符一行搞定,代码干净、性能优秀,适合大多数场景。

适用条件:元素是基本类型(字符串、数字、布尔值)或引用一致的对象(如相同变量多次 push) 写法示例:[...new Set([1, 2, 2, 3, 3])] → [1, 2, 3] 注意:对对象数组无效(每个对象都是新引用),需配合其他策略

filter + indexOf(兼容老浏览器)

利用 indexOf 返回首次出现的索引,只保留“第一次出现的位置等于当前索引”的元素。无需额外空间,但时间复杂度为 O(n²)。

适合:小数组、需支持 IE8+ 的项目 写法示例:arr.filter((item, i) => arr.indexOf(item) === i) 局限:无法处理 NaNindexOf(NaN) 总返回 -1),也不适用于对象深层比较

reduce + includes 或 Map 做哈希判重

reduce 累积结果,每次检查是否已存在。用 includes 简单直观;用 Map 或对象做哈希表则更适合处理特殊键(比如对象属性名或避免原型污染)。

立即学习“Java免费学习笔记(深入)”;

Map 方案优势:支持任意类型作为键(包括对象、函数),无键名转换风险 示例(对象数组按 id 去重):arr.reduce((unique, item) => { if (!unique.map.has(item.id)) { unique.map.set(item.id, item); unique.result.push(item); } return unique; }, { map: new Map(), result: [] }).result 提示:若只需简单去重且数据量不大,filter + includes 更易读

针对对象数组的实用去重(按字段)

真实业务中常需根据某个字段(如 idname)去重。推荐先用 Map 缓存键值,再提取值,兼顾清晰与性能。

核心逻辑:遍历一次,以目标字段为 key 存入 Map,自动覆盖重复项 一行简化版(ES2019+):[...new Map(arr.map(item => [item.id, item])).values()] 安全写法(防 undefined):加空值判断,如 item.id != null

基本上就这些。日常开发优先用 Set;需要按字段处理对象时,Map 是平衡可读性与健壮性的优选。不复杂但容易忽略细节,动手前先看清数据类型和运行环境。

以上就是如何用JavaScript实现数组去重_有哪些高效的方法可以选择?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 14:03:54
下一篇 2025年12月21日 14:04:10

相关推荐

  • React中使用map渲染动态背景图片教程

    本教程旨在解决React中利用`map`函数为多个组件动态设置背景图片时遇到的常见问题。文章将深入解释`map`函数在React渲染中的正确用法,纠正将所有图片路径合并为单个字符串并应用于一个元素的错误,并提供详细的示例代码和最佳实践,确保每个数据项都能正确渲染其对应的背景图片,从而实现轮播图等效果…

    2025年12月21日
    000
  • 如何实现实时应用_javascript中socket.io怎么用?

    实现实时应用的核心是建立客户端与服务器间的双向低延迟通信,Socket.IO通过自动降级、事件驱动、命名空间和房间机制简化开发。服务端用Node.js搭建,客户端通过CDN引入并连接,需注意CORS、事件名一致性及生产环境代理配置。 实现实时应用,核心是建立客户端和服务器之间的双向、低延迟通信。So…

    2025年12月21日
    000
  • 如何用Javascript操作本地存储?

    JavaScript本地存储使用localStorage和sessionStorage,以字符串键值对形式保存数据,需用JSON.stringify()存对象、JSON.parse()取对象,并注意null处理、同源限制及容量上限。 JavaScript 操作本地存储主要靠 localStorage…

    2025年12月21日
    000
  • 如何实现响应式设计_javascript中如何检测屏幕变化?

    响应式设计中JavaScript可通过resize事件、matchMedia和orientationchange事件感知屏幕变化,需节流resize以防性能问题,优先使用window.innerWidth等视口尺寸而非screen.width。 响应式设计不只靠 CSS 媒体查询,JavaScrip…

    2025年12月21日
    000
  • D3.js 动态数据工具提示实现指南:解决事件处理函数中的数据绑定问题

    本文详细阐述了在 d3.%ignore_a_1% 中实现鼠标悬停动态数据工具提示的方法。重点解决了在 mouseover 事件处理函数中访问绑定数据时常见的错误,特别是 d3.js v6+ 版本中事件回调函数签名从 (d) 变为 (event, d) 的变化。通过提供完整的代码示例,读者将学会如何正…

    2025年12月21日
    000
  • 什么是Javascript的异步函数与await?

    async/await 是基于 Promise 的语法糖,使异步代码更易读、错误处理更直观;async 函数必返回 Promise,await 只能在 async 函数内使用,用于等待 Promise 完成并自动解包,需用 try/catch 捕获异常。 JavaScript 的异步函数(async…

    2025年12月21日
    000
  • javascript的shadow dom是什么_它如何封装样式?

    Shadow DOM 是浏览器原生的 DOM 封装机制,通过 attachShadow 创建独立子树实现样式局部化与 DOM 隔离;支持天然隔离、::slotted() 穿透和 :host 控制,继承属性与全局样式仍可透入,open 模式下 JS 可访问但样式封装由浏览器保障。 Shadow DOM…

    2025年12月21日
    000
  • javascript的内存泄漏是什么_怎样避免和排查?

    JavaScript内存泄漏指本该回收的内存未释放,导致内存持续增长甚至崩溃;常见原因包括全局变量意外挂载、未清理事件监听器、定时器未清除、闭包过度捕获及缓存无上限;预防需遵循“谁创建谁清理”,排查依赖Chrome Memory面板堆快照与引用链分析。 JavaScript 的内存泄漏是指本该被回收…

    2025年12月21日
    000
  • 使用CSS Grid实现多列复选框的水平对齐

    本教程旨在解决html中复选框在多列布局下水平对齐不一致的问题,尤其是在项目数量不规则时。我们将详细介绍如何利用css grid布局的强大功能,实现复选框及其标签在固定列数下优雅、响应式且易于维护的水平对齐效果,从而避免传统方法可能带来的布局困扰。 引言:多列复选框对齐的挑战 在网页开发中,我们经常…

    2025年12月21日
    000
  • JavaScript性能分析_javascript瓶颈查找

    性能瓶颈可通过Chrome DevTools定位,使用Performance面板分析主线程长任务与函数调用栈,结合Memory和Coverage工具检测内存泄漏与未使用代码,优化DOM操作、事件节流及算法复杂度,并借助performance API精确测量执行时间。 JavaScript性能问题常出…

    2025年12月21日
    000
  • 解决HTML5 Canvas多图绘制覆盖问题:保持分辨率的最佳实践

    在html5 canvas上绘制多张图片时,由于每次设置`canvas.width`或`canvas.height`都会清除画布内容,导致后续图片覆盖之前绘制的图片。本文将深入探讨这一常见问题,并提供两种高效解决方案:通过单次初始化canvas尺寸,或等待所有图片加载完毕后统一绘制,确保多张图片以其…

    2025年12月21日 好文分享
    000
  • Javascript如何进行深拷贝与浅拷贝?

    浅拷贝只复制第一层属性,新旧对象共享嵌套引用;深拷贝递归复制所有层级,完全独立。常用浅拷贝有展开运算符、Object.assign()、slice()/concat();深拷贝推荐structuredClone,其次JSON法,特殊需求可手写递归函数。 JavaScript中浅拷贝只复制对象的第一层…

    2025年12月21日
    000
  • javascript中的函数是什么_如何定义和调用?

    JavaScript函数是可复用代码块,具有一等公民特性;定义方式有函数声明(提升)、函数表达式(不提升)和箭头函数(无this、不可构造);调用需用()传参,支持IIFE、默认参数与剩余参数。 JavaScript 中的函数是一段可重复使用的代码块,用来执行特定任务或计算并返回结果。它既是行为的封…

    2025年12月21日
    000
  • 在客户端脚本中正确初始化和使用 @replit/database

    本文旨在解决在浏览器环境(客户端脚本)中直接使用 `@replit/database` 导致 `ReferenceError: database is not defined` 的问题。我们将深入探讨 `@replit/database` 的运行环境,阐明其作为 Node.js 模块的特性,并提供一…

    2025年12月21日
    000
  • Mongoose聚合管道中实现字符串匹配与筛选的教程

    本教程详细讲解如何在mongoose聚合管道中高效地实现字符串匹配与筛选功能。通过结合$group、$match聚合阶段和$regex查询操作符,我们可以在服务器端对聚合后的数据进行灵活、大小写不敏感的搜索,从而优化应用性能并减少客户端处理负担。 引言 在开发数据驱动的应用程序时,搜索和过滤功能是不…

    2025年12月21日
    000
  • 深入理解React状态管理:为何直接修改数组/对象不触发更新及解决方案

    本文深入探讨react/nextjs中状态更新不生效的常见问题,特别是直接修改数组或对象状态导致组件不重新渲染的现象。我们将解释react的浅层比较机制,并提供通过创建状态副本实现不可变更新的正确方法,确保组件按预期响应状态变化,从而避免因状态未更新而引发的ui异常。 在React应用开发中,状态(…

    2025年12月21日
    000
  • 什么是javascript数组_如何遍历数组元素?

    JavaScript数组是存储多个值的有序集合,用方括号创建(如[“苹果”,”香蕉”]),通过索引访问修改元素,常用for、for…of及map/filter/reduce遍历,避免for…in和遍历时修改数组。 JavaScr…

    2025年12月21日
    000
  • JavaScript生成器是什么_yield关键字怎么用?

    JavaScript生成器是用function定义的特殊函数,返回迭代器对象;yield暂停执行并返回值,next()恢复并可传入参数;yield委托其他可迭代对象,支持按需计算与异步流程控制。 JavaScript生成器是一种特殊函数,能暂停和恢复执行,适合处理异步操作、大数据流或需要按需计算的场…

    2025年12月21日
    000
  • 如何实现动画效果_javascript控制CSS动画的方法是什么?

    JavaScript控制CSS动画的核心是通过class切换触发动画并监听animationend事件,辅以style动态调整和play-state暂停/恢复,实现高效协作。 JavaScript 控制 CSS 动画,核心是通过操作元素的 class 或 style 属性来触发动画,再配合事件监听或…

    2025年12月21日
    000
  • 如何理解作用域链_javascript中的作用域如何查找?

    作用域链是函数定义时确定的词法作用域查找路径,从当前函数作用域逐级向上指向全局对象;变量读取时按此链由近及远查找,未找到则报ReferenceError;闭包即函数持有该链对父级变量的引用。 JavaScript 中的作用域链,本质是函数在定义时就确定的一条“词法作用域的查找路径”。它决定了变量和函…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信