javascript_如何实现数组去重

使用Set去重是JavaScript中最高效的方法,适用于基本数据类型;对于对象数组则可通过filter配合findIndex按属性去重。

javascript_如何实现数组去重

JavaScript 实现数组去重有多种方法,根据数据类型和性能需求可以选择不同的方式。以下是几种常用且实用的方法。

1. 使用 Set 去重(推荐)

ES6 提供了 Set 数据结构,它只存储唯一值,结合扩展运算符可以快速去重,适用于基本数据类型(如字符串、数字)。

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

这种方法简洁高效,是目前最常用的去重方式。

2. 使用 filter + indexOf

通过遍历数组,利用 indexOf 返回第一个匹配项的索引,判断当前项是否为首次出现。

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

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]

兼容性好,适合不支持 Set 的旧环境,但对大数据量性能较差。

3. 使用 reduce 构建唯一数组

利用 reduce 累积一个不含重复值的新数组。

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = arr.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

逻辑清晰,适合需要在累积过程中处理其他逻辑的场景。

4. 对象数组去重(按某个属性)

如果数组元素是对象,不能直接用 Set 或 indexOf。可以通过属性值来去重,例如使用 filter 配合 findIndex

const users = [
  { id: 1, name: ‘Alice’ },
  { id: 2, name: ‘Bob’ },
  { id: 1, name: ‘Alice’ }
];

const uniqueUsers = users.filter((user, index, self) =>
  self.findIndex(u => u.id === user.id) === index
);
console.log(uniqueUsers);

这样可以根据指定字段(如 id)确保对象唯一。

基本上就这些常见方法。简单去重首选 Set,复杂条件可选 filter 或 reduce。根据实际数据结构选择合适方案即可。

以上就是javascript_如何实现数组去重的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 12:51:25
下一篇 2025年12月21日 12:51:36

相关推荐

  • javascript_如何实现函数节流

    函数节流是控制高频事件触发下函数执行频率的优化技术,核心思想是在指定时间间隔内最多执行一次。通过时间戳实现时,记录上次执行时间,差值达标才执行并更新时间;通过定时器实现时,利用setTimeout延迟执行并防止重复创建;改进版结合两者,支持首次立即执行且末次有效,提升体验。根据需求选择方案,本质是节…

    2025年12月21日
    000
  • JavaScript迭代协议详解_javascript遍历机制

    可迭代协议要求对象实现Symbol.iterator方法,返回遵循迭代器协议的迭代器;2. 迭代器协议要求对象具有next()方法,返回包含value和done属性的对象;3. 二者共同支持for…of、扩展运算符等语法,使数组、字符串及自定义对象可被遍历。 JavaScript 中的遍…

    2025年12月21日
    000
  • javascript_什么是Promise及其用法

    Promise是处理异步操作的对象,解决回调地狱问题。它有pending、fulfilled和rejected三种状态,状态一旦改变不可逆。通过new Promise()创建,接收resolve和reject参数控制状态。使用then()处理成功,catch()处理失败,finally()执行最终操…

    2025年12月21日
    000
  • JavaScript函数式编程_javascript范式探索

    函数式编程强调纯函数与不可变数据,JavaScript通过高阶函数、函数组合和避免副作用实现该范式,提升代码可读性与可维护性。 函数式编程在JavaScript中正变得越来越流行,它提供了一种清晰、可预测且易于测试的编码方式。虽然JavaScript是一门多范式语言,支持面向对象、命令式等多种编程风…

    2025年12月21日
    000
  • JavaScript游戏开发基础_JavaScript游戏引擎使用

    Phaser、Three.js、PixiJS和Babylon.js是主流JavaScript游戏引擎,适用于2D/3D网页游戏开发。Phaser适合初学者,支持场景管理、资源加载、输入处理与物理系统;通过预加载资源、创建交互对象并响应事件可快速实现基础游戏逻辑。部署时需打包静态文件、压缩资源、优化性…

    2025年12月21日
    000
  • JavaScript异步编程指南_JavaScript进阶实战教程

    JavaScript异步编程核心包括回调函数、Promise、async/await及事件循环。1. 回调函数用于早期异步操作,但多层嵌套易形成回调地狱;2. Promise为ES6标准对象,通过.then()和.catch()链式调用解决嵌套问题,并支持Promise.all()并行处理;3. a…

    2025年12月21日
    000
  • JavaScriptPromise原理_javascript异步处理

    Promise是处理异步操作的对象,具有pending、fulfilled和rejected三种不可逆状态;通过new Promise创建,接收resolve和reject函数,使用then链式调用处理成功结果,catch统一捕获错误,避免回调地狱;其核心原理包括状态管理、回调队列和异步执行机制,并…

    2025年12月21日
    000
  • JavaScript动态属性访问_javascript对象操作

    JavaScript中可通过方括号语法实现对象属性的动态访问与操作,1. 使用变量作为键名读取或设置属性值;2. 可随时添加新属性或修改现有属性;3. 用delete操作符删除属性;4. 通过hasOwnProperty或in检查属性存在性,提升代码灵活性和可维护性。 在JavaScript中,对象…

    2025年12月21日
    000
  • JavaScript消息队列_javascript异步通信

    JavaScript通过消息队列和事件循环实现异步通信,同步任务进入调用栈立即执行,异步任务由浏览器线程处理完成后将回调加入消息队列;事件循环持续检查调用栈,若为空则从消息队列中取出任务执行;消息队列分为宏任务(如setTimeout、DOM事件)和微任务(如Promise回调),每次调用栈清空后优…

    2025年12月21日
    000
  • JavaScriptCookie操作指南_JavaScript状态管理技巧

    Cookie是服务器发送至浏览器并自动携带回服务器的小段数据,用于维持登录状态等场景;通过document.cookie读取、设置及删除,需注意解析字符串、设置过期时间与路径,并遵循Secure、HttpOnly、SameSite等安全策略,避免敏感信息泄露,现代虽多用token,但理解Cookie…

    2025年12月21日
    000
  • javascript_如何实现权限控制

    权限控制通过角色或权限码实现,前端根据用户权限动态控制界面显示与路由访问。1. 基于角色判断用户是否有权访问特定功能;2. 使用权限码实现细粒度控制,如 ‘edit:post’;3. 路由守卫拦截无权访问路径;4. 封装指令控制DOM元素渲染。需妥善管理权限数据并处理登录状态…

    2025年12月21日
    000
  • JavaScript数组相邻元素条件检测与复杂逻辑处理教程

    本教程将指导您如何使用javascript处理数组中相邻元素的特定条件检测,特别是当需要根据多个条件(例如,相邻的0或相邻的4)的组合来返回布尔值时。我们将重点解决早期返回导致逻辑错误的问题,并通过引入布尔标志(flag)变量来确保所有条件在循环中被充分评估,最终实现正确的互斥或包含逻辑判断,从而避…

    2025年12月21日
    000
  • Odoo 14 POS会话中读取订单与现金支付明细的教程

    本教程旨在指导开发者如何在odoo 14的pos会话中,通过javascript代码准确读取并计算所有现金支付的总额。文章将详细介绍如何遍历pos订单及其支付明细,识别现金交易,并着重强调利用浏览器开发者工具进行高效调试,以确保正确访问odoo前端对象属性,从而解决在数据结构复杂性中遇到的挑战。 在…

    2025年12月21日
    000
  • 前端日志收集系统_实现用户行为追踪与分析

    首先明确追踪目标,包括页面浏览、点击、表单、曝光、异常及自定义事件;接着通过自动采集与手动埋点结合的方式收集数据,使用统一日志结构包含时间戳、用户ID、页面路径等字段,并利用sendBeacon或fetch keepalive确保可靠上报;为优化性能,采用节流、批量发送、离线缓存与错误去重策略;后端…

    2025年12月21日
    000
  • 前端日志系统_javascript错误追踪

    前端JavaScript错误追踪需建立闭环机制,首先通过window.onerror捕获运行时错误,获取错误信息、文件、行列号等数据,注意跨域脚本需配置crossorigin和CORS;其次利用window.onunhandledrejection监听未捕获的Promise异常,统一包装拒绝原因并上…

    2025年12月21日
    000
  • JavaScript文件操作_Blob与Stream API详解

    Blob和Stream API是现代Web文件处理的核心,Blob用于创建和操作二进制数据对象,支持生成临时URL实现文件下载或切片上传;ReadableStream则通过流式读取避免大文件加载的内存压力,适用于进度监控、大型CSV生成等场景。两者结合可高效实现文件的分块传输与动态生成,提升性能。需…

    2025年12月21日
    000
  • javascript_如何实现路由功能

    JavaScript实现路由功能主要依赖URL变化控制页面切换,无需重载。1. Hash路由利用#后内容变化触发hashchange事件,兼容性强;2. History API通过pushState和popstate实现无刷新跳转,URL更自然但需服务端支持;3. 可封装Router类管理路径与回调…

    好文分享 2025年12月21日
    000
  • JavaScript单元测试_javascript质量保证

    JavaScript单元测试是验证函数或方法正确性的关键手段,具备独立性、可重复性、快速执行和明确断言等特点;常用工具包括Jest、Mocha和Vitest,应根据技术栈选择;编写高质量测试需覆盖边界情况、合理使用Mock、清晰组织结构;通过TDD、Git Hooks、CI/CD集成和覆盖率监控将测…

    2025年12月21日
    000
  • JavaScript事件机制_javascript交互基础

    JavaScript事件机制通过捕获与冒泡阶段实现交互,使用addEventListener绑定监听器,利用event对象获取触发元素并控制行为,结合事件委托提升性能。 JavaScript事件机制是实现网页交互的核心部分,它让开发者能够响应用户的操作,比如点击、输入、滚动等行为。理解事件机制的工作…

    2025年12月21日
    000
  • JavaScript类型数组使用_javascript数据处理

    类型数组是JavaScript中用于操作二进制数据的类数组视图,需依托ArrayBuffer存储,通过Int8Array、Uint8Array等构造器实现对固定长度原始字节的读写,适用于图像处理、文件解析、WebGL及网络通信等高性能场景。 JavaScript类型数组(Typed Arrays)用…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信