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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • leetcode第一刷_Permutations II

    leetcode第一刷_Permutations II

    2021年12月14日
  • php中浮点数计算问题

    php中浮点数计算问题

    2021年10月31日
  • Java课程设计之 学生成绩管理系统「建议收藏」

    Java课程设计之 学生成绩管理系统「建议收藏」实现内容:设计开发一个学生成绩管理系统(1)根据实现的功能,划分出合理的对象类,明确各个对象类之间的关系。为各个对象类设计正确的域和方法,为每个方法设计合理的方法体。同时,为对象类及内部的域和方法运用正确的修饰符。功能要求:(1)录入成绩(2)查询成绩(3)成绩排序(4)修改成绩(5)删除成绩(6)将数据保存在数据库表中该课程设计涉及MySQL数据库,建表操作,java操作SQL语句(JDBC数据库操作)以及JavaS

  • string数组怎么定义对象_定义二维字符型数组

    string数组怎么定义对象_定义二维字符型数组这里是IT修真院分享课,今天要分享的主题是【string数组怎么定义】string数组的定义有三种:Stringarr[]=newString[10];//创建一个长度为10的String类型数组。Stringarr[]={“张三”,”李四”};String[]str=newString[]{“”,””,””,””,””};Stringar…

  • 图解Kafka的服务端的网络通信模型

    图解Kafka的服务端的网络通信模型在开始讲解Kafka的网络通信模型之前,我们有必要先简单了解一下:线程模型Reactor模式Reactor模式Reactor模式,是指通过一个或多个输入同时传递给服务处理器的服务请求的事件驱动处理模式。服务端程序处理传入多路请求,并将它们同步分派给请求对应的处理线程,Reactor模式也叫Dispatcher模式。即I/O多了复用统一监听事件,收到事件后分发(Dispatch给某进程),是编写高性能网络服务器的必备技术之一。根据Reactor的数量和处理资源池线程的数量不同,有

  • 视频转gif mac_有没有录屏时生成gif的软件

    视频转gif mac_有没有录屏时生成gif的软件Mac自带QuicktimePlayer上次完成word添加好看的格式化代码后,又想着做一个gif图演示功能效果,展示出来会更好。就来摸索摸索了…简单的工具图示如下:1、Launched中搜索2、双击触摸板3、按照工具提示来随意录屏吧~AppStore下载工具PicGIFLite双击图标简单的界面,更深入我心,实测有效,就是gif图片分辨率不高。下图是我做的实测的效果(这个滑动的功能后…

发表回复

您的电子邮箱地址不会被公开。

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