JS数组去重方法_性能优化技巧总结

使用Set去重是处理基本类型数组的最优解,代码简洁且性能高;对象数组则推荐通过Map或对象键值配合唯一标识进行去重,避免使用indexOf等低效方法,以提升大数据量下的执行效率。

js数组去重方法_性能优化技巧总结

JavaScript数组去重是开发中常见的需求,尤其在处理大量数据时,选择高效的去重方法对性能影响显著。不同的方法适用于不同场景,合理选择能有效提升执行效率。

使用Set进行去重(推荐基础方法)

ES6引入的Set结构天然支持唯一值,结合展开运算符或Array.from可快速实现去重。

优点:代码简洁、性能优秀,适合大多数场景。

示例:

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

对于纯基本类型数组(如数字、字符串),这是目前最推荐的方式,时间复杂度接近O(n)。

利用对象键值去重(适用于含引用类型的场景)

当数组元素为对象时,Set无法直接判断重复。可通过JSON.stringify将对象转为字符串作为唯一标识。

示例:

const uniqueByObj = (arr, key) => {
  const seen = {};
  return arr.filter(item => {
    const k = key ? item[key] : JSON.stringify(item);
    if (seen[k]) return false;
    seen[k] = true;
    return true;
  });
};

注意:JSON.stringify性能开销较大,且对undefined、function等不友好,建议指定唯一字段key来优化。

Map辅助去重(高性能复杂场景)

在需要保留复杂逻辑判断时,Map比普通对象更高效,尤其是大数据量下。

示例:按对象某个属性去重

const uniqueByMap = (arr, prop) => {
  const map = new Map();
  return arr.filter(item => {
    if (map.has(item[prop])) return false;
    map.set(item[prop], true);
    return true;
  });
};

Map在频繁增删查操作中性能优于普通对象,适合大型数组或高频调用场景。

避免低效方法:indexOf + filter

常见但低效的写法:

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

问题:indexOf内部遍历导致整体复杂度升至O(n²),数据量大时明显卡顿。

应尽量避免在性能敏感场景使用此类嵌套遍历方式。

基本上就这些。小数据量下差异不明显,但面对上千条以上数据时,选用Set或Map方案能显著减少执行时间。根据数组类型和业务需求选择最合适的方法,才是真正的性能优化关键。

以上就是JS数组去重方法_性能优化技巧总结的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 05:42:53
下一篇 2025年12月21日 05:43:05

相关推荐

  • js中实现数组遍历的forEach方法

    答案:forEach是JavaScript数组的遍历方法,执行回调函数处理每个元素,不返回新数组,适用于打印、DOM操作等副作用场景。语法为array.forEach(callback(currentValue, index, array), thisArg),支持索引和原数组参数,并可指定this…

    2025年12月21日
    000
  • 优化天气组件图标尺寸:理解CSS选择器与元素渲染

    本文深入探讨了在Web天气组件中调整动态生成的预报图标尺寸的有效方法。核心在于理解CSS选择器的精确性,特别是如何通过子选择器(`>`)直接作用于“元素,而非其父容器。文章通过分析常见误区和提供修正后的CSS代码,指导开发者正确控制图片尺寸,确保视觉呈现符合预期。 在开发Web应用时,尤其是…

    2025年12月21日
    000
  • 解决React useEffect 依赖缺失警告:深入解析与实践

    本文旨在解决React开发中常见的`useEffect`依赖缺失警告问题。我们将深入探讨警告产生的原因,并提供使用`useCallback`进行函数记忆化的解决方案,从而优化React组件的性能并消除不必要的警告,确保代码的健壮性和可维护性。 在React开发中,useEffect Hook 是处理…

    2025年12月21日
    000
  • 解决JavaScript中ATAN函数与Excel计算差异的问题

    本文旨在解决JavaScript中`Math.atan()`函数计算结果与Excel中`ATAN`函数计算结果存在差异的问题。通过分析问题原因,并提供正确的计算方法,确保JavaScript计算结果与Excel一致,避免在数据迁移或公式转换过程中出现错误。 在使用JavaScript进行数学计算时,…

    2025年12月21日
    000
  • 使用TypeScript接口定义Pinia Store状态

    本文详细介绍了如何在Pinia Store中使用TypeScript接口来定义状态的类型。我们将探讨直接将类型“展开”到状态对象中为何不可行,以及如何通过为state函数添加返回类型注解来正确实现类型安全,从而提升代码的可维护性和可读性。 在现代前端开发中,结合TypeScript和状态管理库(如P…

    好文分享 2025年12月21日
    000
  • Sequelize模型关联错误解析与最佳实践:集中化定义

    本文深入探讨sequelize模型在多文件结构中定义关联时常见的错误,如“not a subclass of sequelize.model”或“is not associated to”。文章揭示了这些问题源于模型加载时序和循环引用,并提出了一种最佳实践:通过将所有模型关联定义集中到一个独立模块,…

    2025年12月21日
    000
  • 解决Html5Qrcode扫描器在AJAX提交后无法自动重启的问题

    本文旨在解决Html5Qrcode扫描器在WordPress插件中,通过AJAX表单提交数据后无法自动重启的问题。核心在于纠正扫描器实例的生命周期管理,确保每次需要扫描时都能正确调用其启动方法,而非重复创建实例。文章将提供详细的解决方案,包括代码重构、实例管理优化及最佳实践,帮助开发者实现无缝的条码…

    2025年12月21日
    000
  • Material Design图标形状定制:可行性分析与多源图标库探索

    material design图标的形状是预设的矢量图形,无法直接修改其基础形态。当需要特定形状的图标而material图标库中没有直接匹配时,建议首先在现有库中寻找功能相近但形状不同的替代图标。若仍无法满足需求,则应考虑整合使用其他高质量的第三方图标库,如boxicons或bootstrap ic…

    2025年12月21日
    000
  • JS时间戳转换_时区处理方案

    答案:JavaScript中处理时间戳需注意Unix时间戳基于UTC,Date对象默认按本地时区显示;后端返回秒级时间戳应乘以1000转换为毫秒;使用toLocaleString()可自动按用户时区格式化输出;若需指定时区如北京时间(UTC+8),应使用Intl.DateTimeFormat API…

    2025年12月21日
    000
  • js观察者模式是什么

    观察者模式用于处理对象间依赖关系,当被观察者状态变化时,所有观察者自动收到通知并更新;其核心角色包括维护观察者列表的被观察者和实现更新方法的观察者;JavaScript中可通过Subject和Observer构造函数实现添加、删除及通知观察者;典型应用有DOM事件监听、Vue/Redux状态管理及组…

    2025年12月21日
    000
  • 如何在JavaScript中动态重构DOM以实现响应式布局

    本文详细介绍了如何使用JavaScript动态地将现有HTML元素移动到一个新创建的容器中,以实现响应式布局。通过讲解document.querySelector、document.createElement、appendChild和insertBefore等核心DOM操作方法,并结合屏幕宽度判断,…

    2025年12月21日
    000
  • JS注解怎么和ESLint集成_ ESLint中结合JS注解进行代码检查的方法

    答案:通过配置 eslint-plugin-jsdoc 插件,ESLint 可检查 JSDoc 注解的格式、参数、返回值等,确保注解与代码一致,提升可读性和维护性;结合 TypeScript 可增强类型校验,支持自定义规则和自动修复,集成于编辑器实现实时提示,定期审查规则避免过度约束。 在使用 ES…

    2025年12月21日
    000
  • JS实现深拷贝与浅拷贝的几种方式_javascript技巧

    浅拷贝只复制对象第一层属性,引用类型共享内存,常用方法有Object.assign、扩展运算符和slice;深拷贝递归复制所有层级,完全独立,可使用JSON.parse(JSON.stringify())、手写递归函数或structuredClone()实现,后者支持更多数据类型但需考虑兼容性。 在…

    2025年12月21日
    000
  • 理解JavaScript中this关键字:一份详细教程

    本文旨在深入解析JavaScript中`this`关键字的运作机制,通过具体的代码示例,阐明`this`的指向规则以及如何在不同场景下正确使用它。我们将重点讨论函数调用方式对`this`的影响,并提供修改后的代码示例,以便读者能够更好地理解`this`在对象方法中的应用。 this关键字的上下文依赖…

    2025年12月21日
    000
  • 解决JavaScript中ATAN函数与Excel计算结果差异的问题

    本文旨在解决JavaScript中`Math.atan()`函数与Excel中`ATAN`函数在计算视角角度时出现差异的问题。通过分析运算优先级,找出导致差异的原因,并提供正确的JavaScript代码实现,确保计算结果与Excel一致。 在将Excel公式转换为JavaScript代码时,尤其涉及…

    2025年12月21日
    000
  • JavaScript中动态扩展数组以实现按比例重复与匹配的策略

    本教程探讨了在javascript中如何将一个较短的数组(如图片列表)动态扩展并按特定逻辑重复其元素,以匹配另一个较长数组(如文本列表)的长度。我们将介绍一种基于数学计算的高效方法,确保元素均匀分布,并处理尾部元素填充剩余空位的场景,从而实现灵活的数据映射。 核心问题描述 在前端开发中,我们经常会遇…

    2025年12月21日
    000
  • jsonp怎么读

    JSONP读作“jay-son-p”,是“JavaScript Object Notation with Padding”的缩写,利用script标签绕过同源策略实现跨域请求,仅支持GET方式,需服务端返回函数调用格式数据,存在安全风险,现多被CORS取代。 JSONP 读作 “jay-son-p”…

    2025年12月21日
    000
  • JavaScript ATAN 函数与 Excel 计算差异:解析与修正

    本文旨在解决 JavaScript 中 `Math.atan()` 函数与 Excel 中 `ATAN()` 函数计算结果不一致的问题。通过分析运算优先级差异,提供修正 JavaScript 代码以获得与 Excel 相同结果的方法,并强调了理解和控制运算顺序的重要性。 在将 Excel 公式转换为…

    2025年12月21日
    000
  • amCharts5 教程:自定义界面主按钮(如缩放按钮)的颜色

    本教程详细介绍了如何在 amcharts5 中自定义界面主按钮(例如缩放按钮)的颜色。通过利用 amcharts5 提供的 `root.interfacecolors.set()` 方法,开发者可以轻松地修改按钮的默认颜色及其悬停状态颜色,从而实现更统一的图表视觉风格。文章将提供具体代码示例和注意事…

    2025年12月21日
    000
  • 解决Webhook签名验证中Python与TypeScript差异的实用指南

    本文旨在解决在Webhook签名验证过程中,Python与TypeScript实现之间出现的差异问题。通过详细分析两种语言在JSON序列化时的不同行为,提供了一套可靠的TypeScript解决方案,确保签名验证的一致性和准确性。该方案通过规范化JSON字符串格式,消除了因空格差异导致的验证失败问题,…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信