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


相关推荐

  • pycharm django环境搭建_宝塔Linux怎么搭建asp程序

    pycharm django环境搭建_宝塔Linux怎么搭建asp程序今天来简单总结一下使用Pycharm和Django来搭建一个最简单的PythonWeb应用(就是我们所说的‘HelloWorld’)。在这里,我们首先假设已经安装好了Python(2.x和3.x版本均可)。安装Django  无论是Python2.x还是Python3.x版本,都可以使用pip来安装Django。在控制台使用如下命令:pipinstalldjango安装成功后,在i

    2022年8月28日
    3
  • rpm 安装Logstash

    rpm 安装Logstash下载地址 https www elastic co cn downloads past releases logstash 安装 rpm ivhlogstash 7 8 1 rpm 配置 vi etc logstash logstash sample conf 启动 systemctlsta 启动失败查看日志 couldnotfind setJAVA HOMEorensure 使用 java v

    2025年7月15日
    3
  • 中兴新支点Linux国产操作系统安装windows字体的方法「建议收藏」

    中兴新支点操作系统是一款非常好用易上手的国产操作系统,重易用体验和美观设计,因此对于大多数用户来说,它易用安装和使用,还能够很好的代替Windows系统进行工作与娱乐。用Windows的用户都知道,在使用过程中经常要用到各种字体,那中兴新支点国产操作系统如何安装这些字体呢,小编给大家整理了下面的教程。第一步:将Windows下喜欢的字体文件copy到一个文件夹中,例如将Windows…

    2022年4月9日
    63
  • wireshark抓取arp包分析_dns协议抓包分析

    wireshark抓取arp包分析_dns协议抓包分析使用Wireshark工具抓取ARP协议的数据包,分析ARP协议的地址解析过程、自主学习逻辑以及初次访问和多次访问的区别。

    2025年9月27日
    2
  • Java中static的作用详解_Java中static变量作用和用法详解

    Java中static的作用详解_Java中static变量作用和用法详解Java中static变量作用和用法详解发布于2020-7-23|复制链接Java中被static修饰的成员称为静态成员或类成员。它属于整个类所有,而不是某个对象所有,即被类的所有对象所共享。静态成员可以使用类名直接访问,也可以使用对象名进行访问.下面我们来详细了解一下吧前言static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Jav…

    2022年7月15日
    15
  • python︱六款中文分词模块尝试:jieba、THULAC、SnowNLP、pynlpir、CoreNLP、pyLTP「建议收藏」

    python︱六款中文分词模块尝试:jieba、THULAC、SnowNLP、pynlpir、CoreNLP、pyLTP「建议收藏」公众号“素质云笔记”定期更新博客内容:THULAC四款python中中文分词的尝试。尝试的有:jieba、SnowNLP(MIT)、pynlpir(大数据搜索挖掘实验室(北京市海量语言信息处理与云计算应用工程技术研究中心))、thulac(清华大学自然语言处理与社会人文计算实验室)四款都有分词功能,本博客只介绍作者比较感兴趣、每个模块的内容。jieba在这不做介绍,可见博客:…

    2022年5月6日
    84

发表回复

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

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