JS数组去重的三个高阶玩法

最新推荐文章于 2024-01-19 17:48:07 发布
最新推荐文章于 2024-01-19 17:48:07 发布
阅读量211 收藏 2
点赞数 2
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42698576/article/details/109301036
版权
本文介绍了几种有效的数组去重方法，包括使用new Set(), Array.from() 和 Array的filter结合indexOf()等技术，帮助开发者轻松去除数组中的重复元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

…newSet（）

对于基本数据类型的数组去重,可以使用 …new Set() 来过滤数组中重复的值,创建一个只有唯一值的新数组.在这里插入图片描述

Array.from(new Set())

在这里插入图片描述

Array的.filter及indexOf()

在这里插入图片描述
注意,indexOf()方法将返回数组中第一个出现的数组项.这就是为什么我们可以在每次迭代中将indexOf()方法返回的索引与当前索引进行比较,以确定当前项是否重复.

算法思想简介（分制（分开在递归），贪心（DJS）,动态分配（dp，解决多变化条件），回溯（万能，深度优先））
ZJQ的博客
11-13 883
不管是动态规划，还是回溯都是在可选择 条件固定时，进行选择 ，都会用到递归调用。 不同的是： 贪心最好理解，从头开始找最优结果一直到最后。（一般for循环就可以） 分治思想就是完全的找局部最优解，然后综上所述。（递归调用进行区域划分） 动态规划一般见问题从 结束点出发，找最小范围的最优解，然后迭代到初始位置。（爬楼梯问题：找出最后一步最优解，递归到第一步） 回溯的话就是从头开始进行试探，...
短视频账号矩阵系统源代码开发全攻略
qq_57612689的博客
12-09 971
短视频账号矩阵是抖音账号运营的高阶玩法，指一个运营主体开设多个账号，实现相互引流和营销效果最大化。如今，短视频已经成为人们生活中不可或缺的一部分，而短视频账号矩阵系统的出现，为企业和个人提供了更高效的运营方式。短视频矩阵系统是一套用来集中化管理和运营多个短视频平台的工具类软件。它能够集中化管理在各大短视频平台上的账号，并利用人工智能技术实现批量剪辑、发布、管理和优化短视频内容，以帮助用户实现从生成短视频内容到发布再到精准的搜索流量和客户线索收集的目标。
JS 数组的几个炫酷操作
weixin_34128501的博客
04-03 288
前言 本文主要从应用来讲数组api的一些骚操作，如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。 上面这些应用场景你可以用一行代码实现吗？ 1.扁平化n维数组1.终极篇 [1,[2,3]].flat(2) //[1,2,3] [1,[2,3,[4,5]].flat(3) //[1,2,3,4,5] [1[2,3,[4,5[...]].flat(Infinit...
js高阶函数
chenjh213的专栏
04-10 886
在通常的编程语言中，函数的参数只能是基本类型或者对象引用，返回值也只是基本数据类型或对象引用。但在Javascript中函数作为一等公民，既可以当做参数传递，也可以被当做返回值返回。 所谓高阶函数就是可以把函数作为参数，或者是将函数作为返回值的函数。回调函数代码复用是衡量一个应用程序的重要标准之一。通过将变化的业务逻辑抽离封装在回调函数中能够有效的提高代码复用率。 比如ES5中为数组增加的for
JS高级用法系列
那片枫叶~
02-24 716
数组扁平化处理 Array.prototype.flat = function () { const result = this.map((item) => { if (Array.isArray(item)) { return item.flat(); } else { return [item]; } }); return [].concat(...result); }; Array.prototype.flat2 = function
Javascript高级玩法
天使的心跳
06-14 568
1，执行 (function(id){return id+1})(2); 则会返回3 2，执行 ~~4.5 返回4 执行~~"4.5"也返回4
js 高级 prototype
Claroja
01-23 131
function Person(uname, age) { this.uname = uname; this.sing = function() { console.log('我会唱歌'); } } var person1 = new Person('wang', 18); var person2 = new Person('wei', 18); person1.sing();//我会唱歌 person2.sing();//我会唱歌 这里person1和person.
学透JavaScript 你真的懂 Array 吗？
LuZhenQian2017的博客
03-09 2029
前言 科普 JavaScript，揭开 JavaScript 神秘面纱，直击 JavaScript 灵魂。此系列文章适合任何人阅读。 本文章内容为： 标准化数组。 数组与数组容器。 ECMAScript 规范中 Array API 讲解。 如果你想用 Array，而又不想学 API 的办法。 标准规范以外的 Array API 扩展。 V8 引擎对 Array 的处...
2021-09-26
qq_25843323的博客
09-26 1万+
面试二问了整个项目的整体的流程，为什么选择某些技术或者基础组件 1.自我介绍 2.挑一个项目，画项目的架构图 Kafka发送数据之后立即返回还是等待ACK之后才返回？ Kafka工作流程： producter先从Zookeeper获取分区的leader producter将消息发送给leader Leader将消息写入本地文件 followers从leader pull消息 followers将消息写入本地后向leader发送ACK leader收到所有副本的A
JAVA经典面试题附答案(持续更新版)
hjseo_seg的博客
06-23 1万+
前言: 少年易老学难成，一寸光阴不可轻。未觉池塘春草梦，阶前梧叶已秋声 。—朱熹《劝学诗》 勤奋才是改变你命运的唯一捷径。 整理不易,各位看官点赞再看更舒适，养成好习惯(●′｀●)1.JAVA中的几种基本类型，各占用多少字节？ 下图单位是bit,非字节 1B=8bit 2.String能被继承吗？为什么？ 不可以，因为String类有final修饰符，而final修饰的类是不能被继承的，实现细节不允许改变。平常我们定义的String str=”abc”(直接赋一个字面量);其实和String str=
javaScript中的高级技巧
qf2019的博客
03-24 106
函数绑定 函数绑定这个是一个非常流行的一个对函数的一种使用技巧，它通过在特定的this环境下去指定参数的形式，去调用一个函数，这就称作是函数绑定。 在我们用的最普遍的一个地方，就是在React使用面向对象编程的时候，绑定一个点击事件的情况，就是属于函数绑定的范畴。 函数绑定有什么作用呢，同样的我们以一个点击事件作为例子 <button id = 'dd' name='anta'>点击点击点击</button> const test = { name: 'nike',
JS去重的四种方法
YYY__6的博客
08-21 2257
编写函数norepeat(arr) 将数组的重复元素去掉，并返回新的数组 方法一 function norepeat(arr){ for(var i = 0;i<arr.length-1;i++){ for(var j = i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ arr.splice(j,1); ...
数组高阶函数：map()、filter()、reduce()
6块腹肌的博客
07-10 233
学习下这三个函数的用法 一：使用map方法对数组的每一项进行操作 这里演示一下对指定的数组的每一项元素进行乘2 const arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(item => { return item * 2 }) console.log(arr2) // [2, 4, 6, 8, 10] 二：使用filter方法对数...
数组去重new set
weixin_42576410的博客
01-18 428
使用 JavaScript 的 Set 可以去除数组中重复的元素。可以使用 new Set(array) 创建一个 Set 对象，重复的元素会被过滤掉。使用 Array.from(set) 将 Set 对象转换回数组。 let arr = [1, 2, 3, 4, 4, 5, 3, 2]; let set = new Set(arr); let newArr = Array.from(set); ...
JavaScript数组去重（12种方法，史上最全）
S筱潇S四维Smile
10-17 8819
一、利用ES6 Set去重（ES6中最常用） function unique (arr) { return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a'...
js 数组排除重复
wershest的专栏
06-08 1568
今天需要找个Array除重算法，google了一下，在 stackoverflow 上有位大侠极其认真的写了一大堆。看完后觉得挺有收获，整理在此，以便查阅。
20个超实用的JavaScript高级技巧
weixin_44803406的博客
01-19 1776
【代码】20个超实用的JavaScript高级技巧。
JS数组常用的操作方法
热门推荐
简廉的博客
11-04 2万+
1. push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度。此方法修改原有数组。 var arr = ['a','b','c']; var ele = arr.push('d'); // ele结果为: 4; // arr数组被修改: ['a','b','c','d']; 2. pop()，从数组中删除最后一个元素，并返回该元素的值。如果数组为空，则返回undefined。此方法修改原有数组。 var arr = ['a','b','c','d']; var ele = arr.pop()
new Set(arr) 数组过滤唯一值
逍湘子
07-20 2209
/** *@param {Array} arr *@return {Array} newArr * **/ export const uniqueArr = function filteredArr(arr) { newArr = [...new Set(arr)] return newArr } // 或者用箭头函数 export const uniqueArr = arr => { newArr = [...new Set(arr)] return newArr } const arr =
Js数组去重
最新发布
04-18
<think>好的，我现在需要帮助用户解决JavaScript数组去重的问题。用户已经提供了两个站内引用，分别是方法1（使用双层循环和splice）和方法2（使用filter和indexOf），但用户可能还想了解更多方法或者更优的解决方案。首先，我需要回顾用户提供的引用内容，确保正确理解他们的例子和可能的限制。 用户的问题是关于如何在JavaScript中实现数组去重。根据引用[1]，方法1是通过双层循环比较元素，然后使用splice删除重复项，但无法处理NaN的情况，因为NaN !== NaN。而引用[2]提到使用filter和indexOf，这种方法可以处理部分情况，但对于对象或NaN可能存在问题。 接下来，我需要考虑用户的实际需求。用户可能希望了解多种去重方法，包括处理NaN、对象等特殊情况的解决方案，以及不同方法的优缺点。此外，用户可能对ES6的新特性如Set和Map感兴趣，因为这些方法更简洁高效。 首先，我应该列举几种常见的去重方法，包括用户提到的两种，然后补充其他方法。例如，使用ES6的Set是最简单的方法，但无法处理对象和NaN的问题。不过，根据ES6的Set，实际上Set中的NaN会被视为相同的值，所以可以处理NaN。但用户引用的方法1中，双层循环无法处理NaN，因为使用的是===比较，而NaN !== NaN，导致无法去重。因此需要指出不同方法的差异。 然后，对于包含对象的数组去重，可以使用JSON.stringify，但这也有局限性，比如属性顺序不同或者包含不可序列化的值。另一种方法是使用Map来存储唯一标识，比如对象的某个属性，或者使用哈希函数。 另外，用户可能关心性能问题。双层循环的时间复杂度是O(n²)，对于大数据量可能不够高效，而使用Set或Map的方法通常是O(n)，更高效。因此需要比较不同方法的适用场景。 还需要注意特殊值如null、undefined、NaN的处理。例如，indexOf无法正确识别NaN，因为arr.indexOf(NaN)会返回-1，而includes方法可以检测NaN的存在。因此，使用includes的方法可能更可靠。 在整理这些方法时，需要给出代码示例，并说明每种方法的优缺点，以及适用场景。同时，需要指出哪些方法可以处理NaN和对象，哪些不能，帮助用户根据实际情况选择合适的方法。 最后，可能需要总结推荐方法，比如在支持ES6的环境下优先使用Set，对于复杂数据或需要自定义去重逻辑的情况使用Map或reduce方法。此外，提醒用户根据数据类型选择合适的方法，比如处理对象数组时需要考虑唯一性判断的标准。 总结步骤： 1. 介绍基本方法（双层循环、splice），指出其局限性（无法处理NaN）。 2. 使用filter和indexOf，说明其问题（无法处理NaN，对象）。 3. 引入ES6的Set，说明其简洁性和处理NaN的能力。 4. 使用includes方法改进filter方法，正确处理NaN。 5. 使用reduce方法，灵活处理去重。 6. 处理对象数组，使用Map或JSON.stringify，指出注意事项。 7. 对比各方法优缺点，给出推荐使用场景。 在回答时，需要结构清晰，分点说明，代码示例正确，并确保覆盖用户可能关心的各种情况，如性能、特殊值处理、对象去重等。</think>### JavaScript数组去重方法详解（7种方案） #### 一、基础循环法（适合所有数据类型） ```javascript function uniqueBasic(arr) { const result = [] for (let i = 0; i < arr.length; i++) { if (!result.includes(arr[i])) { // 使用includes可检测NaN[^1] result.push(arr[i]) } } return result } // 测试样例 console.log(uniqueBasic([1, 2, 2, NaN, NaN])) // [1, 2, NaN] ``` #### 二、双层循环+splice（原始方法） ```javascript function uniqueSplice(arr) { for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { if (Object.is(arr[i], arr[j])) { // 使用Object.is可处理NaN[^1] arr.splice(j, 1) j-- } } } return arr } // 测试样例 console.log(uniqueSplice([NaN, NaN, 1, 1])) // [NaN, 1] ``` #### 三、filter+indexOf（ES5常用） ```javascript function uniqueFilter(arr) { return arr.filter((item, index) => arr.indexOf(item) === index // 缺陷：无法识别NaN[^1] ) } // 测试样例 console.log(uniqueFilter([1, 1, NaN, NaN])) // [1, NaN] ``` #### 四、Set数据结构（ES6推荐方案） ```javascript const uniqueSet = arr => [...new Set(arr)] // 测试样例 console.log(uniqueSet([1, 1, '1', NaN, NaN])) // [1, '1', NaN][^1] ``` #### 五、对象键值法（优化版） ```javascript function uniqueKey(arr) { const obj = Object.create(null) return arr.filter(item => { const key = typeof item + (typeof item === 'object' ? JSON.stringify(item) : item) return obj.hasOwnProperty(key) ? false : (obj[key] = true) }) } // 测试对象去重 console.log(uniqueKey([{a:1}, {a:1}, [1], [1]])) // [{a:1}, [1]] ``` #### 六、Map数据结构（处理复杂类型） ```javascript function uniqueMap(arr) { const map = new Map() return arr.filter(item => !map.has(item) && map.set(item, true) ) } // 测试样例 const obj = {name: 'test'} console.log(uniqueMap([obj, obj, {}, {}])) // [obj, {}, {}] ``` #### 七、reduce高阶函数（函数式编程） ```javascript const uniqueReduce = arr => arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], [] ) // 测试样例 console.log(uniqueReduce([1, 2, 2, 3])) // [1, 2, 3] ``` --- ### 方法对比与选型建议 | 方法 | 时间复杂度 | 处理NaN | 处理对象 | 适用场景 | |-----------------|------------|---------|----------|---------------------| | Set法 | O(n) | ✅ | ❌ | 简单数据快速去重 | | Map法 | O(n) | ✅ | ✅ | 包含对象的复杂数据 | | 对象键值法 | O(n) | ✅ | ✅ | 需要严格类型判断 | | filter+indexOf | O(n²) | ❌ | ❌ | ES5环境基础去重 | --- ### 特殊场景处理技巧 1. **混合类型去重** 使用`typeof`+值组合键： ```javascript function uniqueType(arr) { const seen = new Map() return arr.filter(item => { const key = typeof item + JSON.stringify(item) return seen.has(key) ? false : seen.set(key, true) }) } ``` 2. **对象数组去重** 指定唯一标识字段： ```javascript function uniqueByKey(arr, key) { return [...new Map(arr.map(item => [item[key], item])).values()] } // 示例：根据id去重 const users = [{id:1}, {id:1}, {id:2}] console.log(uniqueByKey(users, 'id')) // [{id:1}, {id:2}] ``` 3. **大数据量优化** 使用空间换时间的哈希算法： ```javascript function uniqueHash(arr) { const hash = new Set() const result = [] arr.forEach(item => { if (!hash.has(item)) { hash.add(item) result.push(item) } }) return result } ``` --- ### 相关问题 1. 如何实现不区分大小写的字符串数组去重？ 2. 针对10万条数据的数组，哪种去重方法性能最优？ 3. 如何保留数组中的最后出现元素而非第一个？ [^1]: ES6的Set数据结构将NaN视为相同值，而普通相等比较中NaN !== NaN
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值