js如何实现数组去重 数组去重的5种经典方法对比

数组去重的常见方法有:1. 使用set,通过将数组转为set再转回数组实现去重,优点是代码简洁但兼容性差;2. 利用indexof判断元素是否已存在,优点兼容性好但效率低;3. 使用includes替代indexof,更易读但兼容性不如indexof;4. 借助对象属性名唯一性,效率高但无法区分数字和字符串类型的数字;5. filter结合indexof,代码简洁但效率较低;对于对象元素去重,可通过序列化对象作为键存入set实现;处理nan时需特殊判断,因nan不等于自身。性能上set和对象属性方式通常更快,具体选择取决于数组大小、元素类型及兼容需求。

js如何实现数组去重 数组去重的5种经典方法对比

数组去重,简单来说,就是把数组里重复的元素去掉,只保留一个。方法有很多,但哪种最适合你,还得看具体情况。

js如何实现数组去重 数组去重的5种经典方法对比

解决方案

js如何实现数组去重 数组去重的5种经典方法对比

实现数组去重的方法五花八门,各有优劣。下面我列举几种常见的,并稍加点评:

Set大法: 这是ES6引入的新玩具,Set最大的特点就是元素唯一。所以,把数组转成Set,再转回来,就去重了。

js如何实现数组去重 数组去重的5种经典方法对比

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

优点: 简洁明了,代码量少。缺点: 兼容性问题,老版本浏览器可能不支持。

indexOf: 遍历数组,利用indexOf判断元素是否已存在。

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.push(arr[i]);  }}console.log(uniqueArr); // [1, 2, 3, 4, 5]

优点: 兼容性好,几乎所有浏览器都支持。缺点: 效率相对较低,每次都要遍历uniqueArr

includes:indexOf类似,但更简洁。

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

优点:indexOf更易读。缺点: 兼容性不如indexOf

对象属性: 利用对象的属性名唯一性。

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

优点: 效率较高。缺点: 无法区分数字和字符串类型的数字,例如1"1"会被认为是同一个。

filter + indexOf: 结合filterindexOf

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]

优点: 代码简洁。缺点: 效率相对较低,每次indexOf都要遍历数组。

数组元素是对象时,如何去重?

当数组元素是对象时,上面的方法就行不通了。因为对象是引用类型,即使属性值相同,它们在内存中的地址也不同,所以indexOfincludes等方法无法正确判断。

这时,你需要自定义比较函数。例如:

const arr = [{ id: 1, name: 'a' }, { id: 2, name: 'b' }, { id: 1, name: 'a' }];const uniqueArr = [];const seen = new Set();for (const obj of arr) {  const key = JSON.stringify(obj); // 将对象转换为字符串作为键  if (!seen.has(key)) {    uniqueArr.push(obj);    seen.add(key);  }}console.log(uniqueArr); // [{ id: 1, name: 'a' }, { id: 2, name: 'b' }]

这个方法先把对象序列化成字符串,然后利用Set的唯一性进行判断。当然,你也可以根据实际情况,自定义更复杂的比较逻辑。

考虑性能:哪种方法最快?

性能方面,通常来说,Set和对象属性的方式效率较高,indexOfincludes相对较低。但是,具体情况还要看数组的大小和元素的类型。

如果数组很大,且元素类型简单,Set可能是最好的选择。如果数组较小,或者需要兼容老版本浏览器,indexOfincludes也可以考虑。

如何处理NaN的去重?

NaN是一个特殊的值,它和自身不相等(NaN !== NaN)。所以,使用indexOfincludes等方法无法正确去重NaN

对于这种情况,可以特殊处理:

const arr = [1, 2, NaN, NaN, 3];const uniqueArr = [];for (let i = 0; i < arr.length; i++) {  if (uniqueArr.indexOf(arr[i]) === -1) {    if (Number.isNaN(arr[i])) {      if (!uniqueArr.some(isNaN)) {        uniqueArr.push(arr[i]);      }    } else {      uniqueArr.push(arr[i]);    }  }}console.log(uniqueArr); // [1, 2, NaN, 3]

这段代码首先判断元素是否为NaN,如果是,则再判断uniqueArr中是否已经存在NaN,如果不存在,才添加进去。

以上就是js如何实现数组去重 数组去重的5种经典方法对比的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 04:11:50
下一篇 2025年12月20日 04:12:01

相关推荐

发表回复

登录后才能评论
关注微信