javascript数组去重的几种常见方法_前端数组去重的方法

javascript数组去重的几种常见方法_前端数组去重的方法JavaScript 高性能数组去重

大家好,又见面了,我是你们的朋友全栈君。

一、测试模版

数组去重是一个老生常谈的问题,网上流传着有各种各样的解法
为了测试这些解法的性能,我写了一个测试模版,用来计算数组去重的耗时

// distinct.js let arr1 = Array.from(new Array(100000), (x, index)=>{ return index }) let arr2 = Array.from(new Array(50000), (x, index)=>{ return index+index }) let start = new Date().getTime() console.log('开始数组去重') function distinct(a, b) { // 数组去重 } console.log('去重后的长度', distinct(arr1, arr2).length) let end = new Date().getTime() console.log('耗时', end - start) 复制代码

这里分别创建了两个长度为 10W 和 5W 的数组

然后通过 distinct() 方法合并两个数组,并去掉其中的重复项

数据量不大也不小,但已经能说明一些问题了

二、Array.filter() + indexOf

这个方法的思路是,将两个数组拼接为一个数组,然后使用

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] 复制代码

遍历数组,并结合 indexOf 来排除重复项

function distinct(a, b) { let arr = a.concat(b); return arr.filter((item, index)=> { return arr.indexOf(item) === index }) } 复制代码

这就是我被吐槽的那个数组去重方法,看起来非常简洁,但实际性能略差。

四、for…of + includes()

双重for循环的升级版,外层用 for…of 语句替换 for 循环,把内层循环改为 includes()

先创建一个空数组,当 includes() 返回 false 的时候,就将该元素 push 到空数组中

类似的,还可以用 indexOf() 来替代 includes()

function distinct(a, b) { let arr = a.concat(b) let result = [] for (let i of arr) { !result.includes(i) && result.push(i) } return result } 复制代码

这种方法和 filter + indexOf 挺类似

只是把 filter() 的内部逻辑用 for 循环实现出来,再把 indexOf 换为 includes

所以时长上也比较接近

本次给大家推荐一个最后给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

转载于:https://juejin.im/post/5bb8c6136fb9a05d082a378d

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/107277.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 一款自制的视频录制软件

    一款自制的视频录制软件是利用opencv库的,平时自己需要录制东西,但是网上大部分的软件只录制屏幕,不能录制摄像头视屏,所以自己动手弄了个不是特别好用,但也讲究这凑合程序源代码:http://download.csdn.net/source/3578833

    2022年6月17日
    26
  • 设计模式(五)适配器模式Adapter(结构型)

    设计模式(五)适配器模式Adapter(结构型)设计模式(五)适配器模式Adapter(结构型)1.概述:接口的改变,是一个需要程序员们必须(虽然很不情愿)接受和处理的普遍问题。程序提供者们修改他们的代码;系统库被修正;各种程序语言以及相关库的发展和进化。例子1:iphone4,你即可以使用UBS接口连接电脑来充电,假如只有iphone没有电脑,怎么办呢?苹果提供了iphone电源适配器。………

    2022年7月25日
    10
  • Java基础篇:封装、继承、多态三大特性

    Java基础篇:封装、继承、多态三大特性

    2021年10月4日
    60
  • HikariPool配置详解

    HikariPool配置详解HikariPool较佳配置 hikari: connection-timeout:60000 validation-timeout:3000 idle-timeout:60000 login-timeout:5 max-lifetime:60000 maximum-pool-size:10 minimum-idle:10 read-only:falsehikari各参数解释https://github.com/.

    2022年6月23日
    445
  • cpu参数_CPU核心参数有哪些

    cpu参数_CPU核心参数有哪些文章目录CPU功能:CPU的组成:CPU参数:几个重要概念计算机的存储层次:RegisterCache睿频加速技术:超线程技术:CPU功能: 要完成一个任务,先编写一段程序,然后存入计算机主存。程序的代码就会翻译成一条条指令或数据字。cpu就会执行这些指令得到最终结果。读取指令要通过地址读取,地址保存在程序计数器中,读取的某个任务的全部指令会放入指令寄存器等待处理,cpu每次从中读取一条指令或…

    2025年6月17日
    2
  • 出现将截断字符串或二进制数据怎么办_数据库从字符串转换日期失败

    出现将截断字符串或二进制数据怎么办_数据库从字符串转换日期失败原因是因为在数据库的表中进行了输入字符长度的限制,比如数据库表中的字段长度为5个varchar,而在前台的输入中超出了这个长度就会报这个错。出现此错的原因一般时:在进行数据测试时没有考虑数据的长度,只顾着测试方便乱输一通,稍有不慎就会多出一两个字节(我就是这种情况,在数据库中有一个表示状态的字段,是一个长度的int,但是我输入了双数)解决办法当然简单:只需要更改数据库中的字段长度或者在前台测试输…

    2022年10月7日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号