JS数组去重方法汇总
时间:2025-08-05 13:36:49 389浏览 收藏
哈喽!大家好,很高兴又见面了,我是golang学习网的一名作者,今天由我给大家带来一篇《JS数组去重方法大全》,本文主要会讲到等等知识点,希望大家一起学习进步,也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧!
数组去重的首选方法是使用Set,因为其基于哈希表实现,查找效率为O(1),性能优于其他方法;1. 使用Set去重:通过[...new Set(arr)]可快速去除重复值,适用于简单数据类型且通常保持原顺序;2. 使用filter与indexOf:通过arr.filter((item, index) => arr.indexOf(item) === index)实现,兼容性好但性能较低;3. 使用reduce与includes:通过累加器和includes判断是否包含当前元素,逻辑清晰但效率不高;4. 处理对象数组时需自定义比较函数,如利用some方法结合id等属性判断唯一性;5. 若需排除null和undefined,可在去重前先用filter过滤;6. Set还可用于集合运算,如求交集、并集、差集等,具备add、delete、has、clear和size等实用方法,功能丰富。因此,Set是高效且多功能的去重选择。
数组去重,简单来说,就是把数组里重复的元素去掉,留下唯一的值。JavaScript 提供了多种方法来实现这个目标,但哪种方法最适合你的场景,取决于你的具体需求,比如数组的大小、数据类型、性能要求等等。
解决方案
使用 Set 数据结构
ES6 引入了 Set,它是一种集合数据结构,其特性就是不允许存储重复的值。利用这个特性,我们可以很方便地对数组进行去重。
function unique(arr) { return [...new Set(arr)]; } // 示例 const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = unique(numbers); console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
这种方法简洁高效,是处理简单数据类型数组(如数字、字符串)的常用选择。
使用 Array.filter() 和 Array.indexOf()
这种方法利用
filter()
遍历数组,并使用indexOf()
检查当前元素是否已经存在于结果数组中。如果不存在,则将其添加到结果数组。function unique(arr) { return arr.filter((item, index) => arr.indexOf(item) === index); } // 示例 const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = unique(numbers); console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
这种方法兼容性较好,但对于大型数组,性能可能不如使用 Set。
使用 Array.reduce() 和 includes()
reduce()
方法可以将数组中的每个值(从左到右)累加,最终计算为一个值。我们可以利用它来构建一个去重后的数组。function unique(arr) { return arr.reduce((acc, curr) => { if (!acc.includes(curr)) { acc.push(curr); } return acc; }, []); } // 示例 const numbers = [1, 2, 2, 3, 4, 4, 5]; const uniqueNumbers = unique(numbers); console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
这种方法思路清晰,但
includes()
方法在大型数组中查找元素时效率较低。处理包含对象或复杂数据类型的数组
如果数组包含对象或其他复杂数据类型,简单的
===
比较无法判断两个对象是否相等。这时,我们需要自定义比较函数。function unique(arr, compare) { const result = []; arr.forEach(item => { if (!result.some(existing => compare(item, existing))) { result.push(item); } }); return result; } // 示例:比较两个对象是否具有相同的 id 属性 const objects = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 1, name: 'C' }]; const uniqueObjects = unique(objects, (a, b) => a.id === b.id); console.log(uniqueObjects); // 输出: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }]
这里,
compare
函数用于比较两个对象是否相等。你需要根据对象的具体结构和比较逻辑来实现这个函数。
为什么 Set 通常是首选的去重方法?
Set 的底层实现通常基于哈希表,这使得它在查找元素时具有近乎常数时间的复杂度 O(1)。相比之下,indexOf()
和 includes()
方法在数组中查找元素的时间复杂度为 O(n)。因此,对于大型数组,使用 Set 可以显著提高去重效率。
去重后数组的顺序会改变吗?
使用 Set 去重通常会保留原始数组的顺序。然而,不同的 JavaScript 引擎可能对此有不同的实现。如果你需要绝对保证去重后数组的顺序与原始数组一致,可以考虑使用 Array.filter()
和 Array.indexOf()
方法,或者在去重后对数组进行排序。
如何处理数组中的 null 和 undefined 值?
在去重时,null
和 undefined
也被视为普通的值。如果需要将它们排除在去重结果之外,可以在去重前先将它们过滤掉。
function unique(arr) { return [...new Set(arr.filter(item => item !== null && item !== undefined))]; } // 示例 const values = [1, 2, null, undefined, 2, 3, null]; const uniqueValues = unique(values); console.log(uniqueValues); // 输出: [1, 2, 3]
除了去重,还能用 Set 做什么?
Set 不仅仅可以用于去重。它还提供了一些其他有用的方法,例如:
add(value)
: 向 Set 中添加一个值。delete(value)
: 从 Set 中删除一个值。has(value)
: 检查 Set 中是否包含一个值。clear()
: 清空 Set 中的所有值。size
: 返回 Set 中值的数量。
你可以利用这些方法来实现一些集合操作,例如求交集、并集、差集等。比如,求两个数组的交集可以这样做:
function intersection(arr1, arr2) { const set1 = new Set(arr1); return [...new Set(arr2)].filter(item => set1.has(item)); } // 示例 const arr1 = [1, 2, 3, 4, 5]; const arr2 = [3, 4, 5, 6, 7]; const intersectionResult = intersection(arr1, arr2); console.log(intersectionResult); // 输出: [3, 4, 5]
到这里,我们也就讲完了《JS数组去重方法汇总》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于filter,set,reduce,indexof,JS数组去重的知识点!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
102 收藏
-
367 收藏
-
266 收藏
-
478 收藏
-
282 收藏
-
370 收藏
-
169 收藏
-
301 收藏
-
388 收藏
-
440 收藏
-
163 收藏
-
247 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习