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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • MessageDigest用法

    MessageDigest用法为什么要使用MessageDigest?某些金融行业用于进行简单的密码加密。例如:需求某银行对数据库账户取款密码加密。为了保护客户信息的安全,客户取款密码只能客户自己知道,银行方面对此加密,加密后数据保存的数据库。此时可以用MessageDigest进行加密,以及后续其他方案再次加密。MessageDigest是什么?java.security.MessageDigest类…

    2022年7月11日
    16
  • STL库简述

    STL库简述STL简述STL库包含六个大类:容器库算法库迭代器库配置器(allocator)适配器(adaptor)仿函数(函数对象)其中后四个类主要为前两个类服务。其中使用频率最高的就是容器库,迭代器库,算法库。容器库为我们提供了存储数据的数据结构,算法库则是我们操作数据结构的算法,迭代器库作为容器库和算法库的黏合剂。容器库容器库整体分为序列型容器,关联型容器,容器适配器。1.序列型容器主要包括list,vector,deque,set。以vector作为学习实例:S

    2022年10月11日
    4
  • ios 越狱 真机调试

    ios 越狱 真机调试开发环境:Xcode4.5.2ios设备需要越狱并从Cydia安装appsync安装appsync步骤:1、找到安装的cydia,第一次运行将会弹出提示,选择开发者即可2、在工具栏中选择软件源(iphone/itouch选管理),然后点右上角的编辑3、点左上角添加4、输入源:http://yuan.duowan.com/(多玩的源),点添加源,等待添加完成,然后点返回C

    2022年5月17日
    39
  • 图形的遍历

    图形的遍历一个图形G=(V,E),存在某一顶点v,希望从v开始,通过此顶点相邻的顶点而去访问G中其他顶点直达全部的顶点遍历完毕。在遍历的过程中可能会重复经过某些顶点及边线,经由图形的遍历可以判断该图形是否连通,并找出连通单元和路径。图形遍历有两种方法:深度优先搜索Deep-First-Search广度优先搜索Breadth-First-Search一、深度优先搜索从图形的某一顶点开始遍历,被访问过的

    2022年6月8日
    52
  • 多态的基本知识<多态的前提是继承哟!!!!>

    多态的基本知识<多态的前提是继承哟!!!!>

    2021年5月24日
    147
  • bitr函数的用法_average函数怎么用

    bitr函数的用法_average函数怎么用BitBlt函数用法  2010-03-0510:25:51|  分类: VC学习|举报|字号 订阅      下载LOFTER我的照片书  |(一)BOOLBitBlt(intx,inty,intnWidth,intnHe

    2022年10月19日
    4

发表回复

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

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