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


相关推荐

  • WKT解读

    WKT-概念WKT(Well-knowntext)是一种文本标记语言,用于表示矢量几何对象、空间参照系统及空间参照系统之间的转换。它的二进制表示方式,亦即WKB(well-knownbinary)则胜于在传输和在数据库中存储相同的信息。该格式由开放地理空间联盟(OGC)制定。WKT-几何对象WKT可以表示的几何对象包括:点,线,多边形,TIN(不规则三角网)及多…

    2022年4月3日
    99
  • 文本域[通俗易懂]

    文本域[通俗易懂]<textarea>元素用来创建多行文本框。与其他input元素不同,<textarea>元素并非空元素,因此它包含起始标签和结束标签。

    2022年8月5日
    9
  • 播放ipod歌曲

    播放ipod歌曲

    2021年8月17日
    66
  • Nginx加密以及反向代理「建议收藏」

    Nginx加密以及反向代理「建议收藏」一、https加密算法http协议在传输过程中使用的是明文,如果传输的是用户名和密码等信息就不安全。https就是在原来http协议中加上ssl算法,来对传输的数据进行加密。https加密的核心就是通过秘钥来实现。秘钥(加密算法)的分类:1.对称算法(加密和解密用一样的密码):AES,DES(适合单机加密)2.非对称算法(公钥和私钥):RSA,DSA3.信息摘要:md5,sha256…

    2025年8月30日
    6
  • 这7个web前端开发写代码软件,你过用几个?[通俗易懂]

    群里的朋友,经常问到web前端开发写代码用那个软件好?今天在这里统一回答下,主流的web前端开发写代码的软件有这些Webstorm、Vscode、SublimeText、HBuilder、Dreamweaver、notepad++、editplus等,做前端这么多年了,下面谈下我的使用感受吧。1.WebStorm【推荐】WebStorm是jetbra…

    2022年4月11日
    79
  • 史上最简单的带流控功能的http server

    史上最简单的带流控功能的http server

    2021年11月29日
    42

发表回复

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

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