javascript数组怎么去重

javascript数组去重的核心答案是:1. 使用set可高效去重基本类型,但无法处理对象引用;2. indexof/includes适合小数组但性能差;3. map性能优于indexof,适合大数据量;4. 对象数组需基于唯一键或自定义比较规则去重;5. nan在set中被视为相同,而indexof无法识别;6. null和undefined可正常去重;7. 多属性或深比较需构造唯一标识或使用深比较逻辑;选择方法应综合考虑数据类型、性能需求和数组规模。

javascript数组怎么去重

JavaScript数组去重,简单来说,就是把数组里重复的元素都干掉,只留下独一份。方法挺多的,各有优劣,选择哪个取决于你的具体需求,比如性能要求、数据类型等等。

javascript数组怎么去重

解决方案

利用Set数据结构

Set是ES6引入的新数据结构,它最大的特点就是不允许重复的值。所以,我们可以先把数组转成Set,然后再把Set转回数组。

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

javascript数组怎么去重

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

这种方法简洁高效,尤其适合处理基本数据类型的数组。但需要注意的是,Set认为

NaN

是相等的,只会保留一个。另外,对于对象类型的数组,Set无法直接去重,因为对象是引用类型,即使属性值相同,它们在内存中的地址也不同。

使用indexOf或includes

遍历数组,如果当前元素不在新数组中,就把它push进去。

javascript数组怎么去重

const arr = [1, 2, 2, 3, 4, 4, 5];const uniqueArr = [];for (let i = 0; i < arr.length; i++) {  if (uniqueArr.indexOf(arr[i]) === -1) { // 或者 !uniqueArr.includes(arr[i])    uniqueArr.push(arr[i]);  }}console.log(uniqueArr); // [1, 2, 3, 4, 5]

这种方法兼容性好,但性能相对较差,特别是对于大型数组。

indexOf

includes

都需要遍历已去重的数组,时间复杂度是O(n)。

使用filter和indexOf

结合

filter

方法,可以更简洁地实现去重。

const arr = [1, 2, 2, 3, 4, 4, 5];const uniqueArr = arr.filter((item, index) => {  return arr.indexOf(item) === index;});console.log(uniqueArr); // [1, 2, 3, 4, 5]

这种方法本质上还是基于

indexOf

,所以性能瓶颈依然存在。

使用Map数据结构

Map对象保存键值对,任何值(对象或者原始值) 都可以作为一个键或一个值。我们可以利用Map的键的唯一性来实现去重。

const arr = [1, 2, 2, 3, 4, 4, 5];const map = new Map();const uniqueArr = [];for (let i = 0; i < arr.length; i++) {  if (!map.has(arr[i])) {    map.set(arr[i], true);    uniqueArr.push(arr[i]);  }}console.log(uniqueArr); // [1, 2, 3, 4, 5]

Map的

has

方法查找效率比

indexOf

高,所以这种方法在处理大型数组时性能更好。

针对对象数组的去重

如果数组中的元素是对象,那么简单的

Set

或者

indexOf

就不管用了。我们需要自定义比较函数。

const arr = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 1, name: 'a'}];function uniqueObjectArray(arr, key) {  const seen = new Set();  return arr.filter(item => {    const k = item[key];    return seen.has(k) ? false : seen.add(k);  });}const uniqueArr = uniqueObjectArray(arr, 'id');console.log(uniqueArr); // [{id: 1, name: 'a'}, {id: 2, name: 'b'}]

这个例子中,我们根据对象的

id

属性来判断是否重复。如果需要根据多个属性来判断,可以修改比较函数。

JavaScript数组去重有哪些性能优化的技巧?

避免重复遍历: 尽量减少循环次数。例如,使用

Set

Map

可以在一次遍历中完成去重。

选择合适的数据结构

Set

Map

的查找效率比

indexOf

高,适合处理大型数组。

避免不必要的类型转换: 如果数组元素类型已知,避免在比较过程中进行类型转换,可以提高性能。

利用缓存: 对于复杂的比较逻辑,可以利用缓存来避免重复计算。

考虑数组规模: 对于小型数组,简单的

indexOf

可能足够快。对于大型数组,更高效的算法更重要。

如何处理包含

null

undefined

NaN

的数组去重?

null

undefined

: 可以直接使用

Set

indexOf

进行去重。它们会被视为普通的值。

NaN

NaN

与任何值都不相等,包括它自身。

indexOf

无法找到

NaN

Set

认为

NaN

是相等的,只会保留一个。如果需要区分多个

NaN

,需要自定义比较逻辑。

混合类型: 如果数组包含多种类型的值,需要注意类型转换问题。可以使用

typeof

运算符来判断类型,并进行相应的处理。

对象数组去重时,如何定义比较规则?

单属性比较: 如果只需要根据一个属性来判断对象是否重复,可以直接比较该属性的值。

多属性比较: 如果需要根据多个属性来判断,可以将这些属性的值组合成一个字符串或对象,然后进行比较。

自定义比较函数: 可以编写自定义的比较函数,根据复杂的业务逻辑来判断对象是否重复。

考虑深比较: 如果对象包含嵌套的对象或数组,需要进行深比较,确保所有属性都相同才认为对象重复。可以使用递归或第三方库来实现深比较。

以上就是javascript数组怎么去重的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
什么是贪心算法?贪心算法的适用条件
上一篇 2025年12月20日 10:41:19
js 如何用chunk将数组分割为多个小块
下一篇 2025年12月20日 10:41:32

相关推荐

  • 深入理解 Laravel Session::put:避免常见陷阱与实现表单限流

    本文旨在深入探讨 laravel 框架中 `session::put` 方法的正确用法及其常见误区。针对用户在实现表单提交限流时遇到的问题,详细阐述了 `session::put` 必须提供键值对的原理,并提供了如何在控制器中利用会话机制有效防止重复提交的实战代码示例。通过本文,读者将掌握 lara…

    2026年5月10日
    000
  • jQuery对象类型判断机制详解:toType函数如何精准识别对象类型?

    深入解析jquery对象类型判断机制:totype函数详解 本文将深入剖析jQuery中用于精准识别对象类型的toType函数,并详细解释其核心代码片段。该函数旨在判断传入对象的类型并返回其类型字符串。 核心代码如下: var class2type = {};var toString = class…

    2026年5月10日
    000
  • JavaScript中为动态列表元素创建唯一悬停描述的教程

    本教程旨在解决如何为动态生成的列表或数组元素分配唯一悬停描述(tooltip)的问题。文章将深入探讨使用javascript对象和map数据结构来高效地管理名称与描述的映射关系,并提供具体的代码示例,以实现每个列表项在鼠标悬停时显示不同的自定义信息,同时兼顾性能与数据顺序的需求。 在网页开发中,我们…

    2026年5月10日
    000
  • PHP中通过键名高效关联与输出多维数组数据

    本教程旨在解决php开发中常见的数据关联与输出问题,特别是当需要将不同数组中通过共同键名关联的数据进行整合展示时。文章将详细阐述如何利用foreach循环的键值对特性,结合array_key_exists函数,实现从多个数组中提取并组合相关信息,从而避免不必要的嵌套循环,提升代码的清晰度和执行效率。…

    2026年5月10日
    000
  • 怎样用Golang实现一个简单的键值存储 基于文件持久化方案

    怎样用Golang实现一个简单的键值存储 基于文件持久化方案怎样用Golang实现一个简单的键值存储 基于文件持久化方案怎样用Golang实现一个简单的键值存储 基于文件持久化方案怎样用Golang实现一个简单的键值存储 基于文件持久化方案

    要实现一个简单的键值存储系统,需结合golang与文件持久化方案。1. 使用map[string]string作为内存数据结构,选择json或gob进行序列化;2. 围绕map实现crud操作,写入后立即或定时刷新到磁盘,并在启动时加载数据;3. 文件策略可选每次写入刷盘、定时异步刷盘或日志记录变更…

    2026年5月10日 用户投稿
    000
  • python中怎么删除字典中的键值对_Python删除字典元素的方法

    删除字典键值对有四种方法:del语句删除指定键,pop()删除键并返回值,popitem()随机删除键值对,clear()清空字典。 在 Python 中,删除字典中的键值对主要有几种方式:使用 del 语句直接删除指定键,利用 pop() 方法删除指定键并获取其对应的值,或者通过 popitem(…

    2026年5月10日
    000
  • C++ 数据结构指南:理清复杂数据组织之道

    答案: c++++ 数据结构是组织和管理数据的构建块,优化检索和处理。常见结构:数组:有序集合,通过索引访问向量:动态数组,快速插入和删除链表:灵活插入和删除堆栈:lifo 原则队列:fifo 原则树:分层结构哈希表:快速键值查找应用: 数据存储、算法设计、图形处理、人工智能等。实战案例: 使用学生…

    2026年5月10日
    000
  • 从LocalStorage中获取并显示特定JSON对象属性的教程

    本文详细介绍了如何从浏览器localstorage中检索存储为json字符串的复杂数据,并提取其中的特定属性值以显示在网页元素中。核心方法是使用`json.parse()`将存储的字符串转换回javascript对象,然后通过点或方括号语法访问所需属性。文章还提供了示例代码和错误处理建议,确保数据获…

    2026年5月10日
    100
  • C++中如何用指针实现数组去重 双指针算法与原地操作技巧

    C++中如何用指针实现数组去重 双指针算法与原地操作技巧C++中如何用指针实现数组去重 双指针算法与原地操作技巧C++中如何用指针实现数组去重 双指针算法与原地操作技巧C++中如何用指针实现数组去重 双指针算法与原地操作技巧

    c++++中利用指针进行数组去重的核心在于通过双指针实现原地修改和高效遍历。1. 使用 slow 和 fast 两个指针,slow 指向去重后的末尾,fast 遍历数组;2. 当 fast 指向的元素与 slow 不同时,将其复制到 slow+1 的位置并移动 slow;3. 对于未排序数组,可先排…

    2026年5月10日 用户投稿
    000
  • JavaScript数据结构实现_javascript算法基础

    JavaScript中常用数据结构包括栈、链表和字典:1. 栈利用数组的push和pop实现LIFO,适用于括号匹配;2. 链表由节点组成,插入删除高效,适合频繁修改场景;3. 字典用对象实现键值对存储,常用于频率统计;4. 二分查找在有序数组中以O(log n)效率查找目标值,需数组已排序。掌握这…

    2026年5月10日
    000
  • python中del是什么意思 python中del删除对象的用法解析

    在python中,del用于删除对象的引用。1)删除变量:del x会移除变量x的引用,导致x不再存在。2)删除列表元素:del my_list[2]会删除索引为2的元素。3)删除列表切片:del my_list[1:3]会删除指定范围内的元素。4)删除字典键值对:del my_dict[&#821…

    2026年5月10日
    000
  • Laravel Session::put 正确用法详解与常见误区规避

    本文详细探讨了 laravel 中 `session::put` 方法的正确用法,特别指出在仅提供键名而未指定值时可能导致会话数据未被正确设置的问题。通过示例代码,阐述了如何为会话数据赋予明确的值,并演示了如何正确地检查和获取会话数据,以确保会话管理功能按预期工作,有效避免常见的会话操作错误。 La…

    2026年5月10日
    000
  • PHP中批量为嵌套数组元素添加公共属性的教程

    本教程将详细介绍在php中如何高效地为包含多个关联数组的集合中的每个子数组添加一个或多个新的公共键值对。我们将探讨使用循环和数组合并函数实现这一目标的方法,并提供清晰的代码示例,帮助开发者处理此类数据结构转换。 在PHP开发中,我们经常会遇到处理复杂数据结构的需求,其中一种常见场景是拥有一个由多个关…

    2026年5月10日
    000
  • 如何通过URL查询参数在不同HTML页面间传递数据

    本教程详细阐述了如何在不同HTML页面之间传递数据,特别聚焦于使用URL查询参数的方法。我们将通过一个点餐系统示例,演示如何从一个菜单页面获取商品名称和价格,并通过点击按钮将其安全地传递到支付页面,并在支付页面自动填充相应的表单输入框。文章涵盖了数据编码、URL构建以及在目标页面解析和使用这些数据,…

    2026年5月10日
    100
  • 掌握Python中嵌套列表与字典的数据访问技巧

    本文详细介绍了在Python中如何高效且准确地访问复杂嵌套数据结构(特别是包含列表和字典的多层JSON数据)中的特定值。通过具体示例,文章解释了直接索引列表元素和字典键的正确方法,避免了常见的类型错误,并提供了处理多条记录和潜在数据缺失的健壮性建议,旨在帮助开发者熟练提取深层数据。 理解嵌套数据结构…

    2026年5月10日
    000
  • 怎样使用C++标准库容器 vector map set核心操作

    c++++标准库中的vector、map和set分别适用于动态数组、键值对存储和唯一元素集合场景。1. vector支持动态大小数组,常用操作包括push_back、emplace_back添加元素,at或下标访问,erase删除元素,reserve预分配内存而不改变大小,resize则改变元素数量…

    2026年5月10日
    000
  • JavaScript:从LocalStorage中获取JSON对象的特定属性值

    本文将指导如何在javascript中从localstorage存储的json字符串中提取并显示特定属性的值。通过使用`json.parse()`方法将存储的字符串转换为javascript对象,然后直接访问其属性,可以精确地获取所需数据并更新dom元素。 理解LocalStorage与JSON数据…

    2026年5月10日
    000
  • 如何使用Go语言编写高性能键值对存储器?

    Go语言高性能键值存储方案探讨 本文探讨如何使用Go语言构建一个高性能的键值对内存存储,类似于Redis。许多开发者首先想到的是使用map,但Go的map并非线程安全。虽然sync.Map解决了这个问题,但其性能是否最佳仍存在争议。因此,我们需权衡sync.Map、第三方concurrentMap以…

    2026年5月10日
    100
  • Python 中如何对字典数据进行格式化输出与对齐

    python字典优雅输出方法:1. 使用f-string进行基本格式化,嵌入变量并控制输出;2. 利用ljust()、rjust()、center()方法对齐键值对,解决长度不一致问题;3. 对于复杂嵌套字典,使用tabulate库以表格形式输出,实现更精细的控制和多种格式支持。 通过选择合适的方法…

    2026年5月10日
    000
  • 利用php数组函数映射数据_通过php数组函数优化数据转换的技巧

    array_map用于转换数组元素,array_column提取关联数组列,array_walk原地修改数组,三者组合可高效处理PHP数组数据。 在PHP开发中,处理数组数据是日常任务之一。当需要对数组中的每个元素进行转换或提取特定信息时,使用PHP内置的数组函数不仅能提升代码可读性,还能显著提高执…

    2026年5月10日
    000

发表回复

登录后才能评论
关注微信