JavaScript 高性能数组去重的方法


Posted in Javascript onSeptember 20, 2018

中午和同事吃饭,席间讨论到数组去重这一问题

我立刻就分享了我常用的一个去重方法,随即被老大指出这个方法效率不高

回家后我自己测试了一下,发现那个方法确实很慢

于是就有了这一次的高性能数组去重研究

一、测试模版

数组去重是一个老生常谈的问题,网上流传着有各种各样的解法

为了测试这些解法的性能,我写了一个测试模版,用来计算数组去重的耗时

// 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

这个方法的思路是,将两个数组拼接为一个数组,然后使用 ES6 中的 Array.filter() 遍历数组,并结合 indexOf 来排除重复项

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

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

JavaScript 高性能数组去重的方法

是的,现实就是这么残酷,处理一个长度为 15W 的数组都需要 8427ms

三、双重 for 循环

最容易理解的方法,外层循环遍历元素,内层循环检查是否重复

当有重复值的时候,可以使用 push(),也可以使用 splice()

function distinct(a, b) {
 let arr = a.concat(b);
 for (let i=0, len=arr.length; i<len; i++) {
 for (let j=i+1; j<len; j++) {
  if (arr[i] == arr[j]) {
  arr.splice(j, 1);
  // splice 会改变数组长度,所以要将数组长度 len 和下标 j 减一
  len--;
  j--;
  }
 }
 }
 return arr
}

但这种方法占用的内存较高,效率也是最低的

JavaScript 高性能数组去重的方法

四、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

所以时长上也比较接近

JavaScript 高性能数组去重的方法

五、Array.sort()

首先使用 sort() 将数组进行排序

然后比较相邻元素是否相等,从而排除重复项

function distinct(a, b) {
 let arr = a.concat(b)
 arr = arr.sort()
 let result = [arr[0]]
 for (let i=1, len=arr.length; i<len; i++) {
 arr[i] !== arr[i-1] && result.push(arr[i])
 }
 return result
}

这种方法只做了一次排序和一次循环,所以效率会比上面的方法都要高

JavaScript 高性能数组去重的方法

六、new Set()

ES6 新增了 Set 这一数据结构,类似于数组,但 Set 的成员具有唯一性

基于这一特性,就非常适合用来做数组去重了

function distinct(a, b) {
 return Array.from(new Set([...a, ...b]))
}

那使用 Set 又需要多久时间来处理 15W 的数据呢?

JavaScript 高性能数组去重的方法

喵喵喵??? 57ms ??我没眼花吧??

然后我在两个数组长度后面分别加了一个0,在 150W 的数据量之下...

JavaScript 高性能数组去重的方法

居然有如此高性能且简洁的数组去重办法?!

七、for...of + Object

这个方法我只在一些文章里见过,实际工作中倒没怎么用

首先创建一个空对象,然后用 for 循环遍历

利用对象的属性不会重复这一特性,校验数组元素是否重复

function distinct(a, b) {
 let arr = a.concat(b)
 let result = []
 let obj = {}
 for (let i of arr) {
 if (!obj[i]) {
  result.push(i)
  obj[i] = 1
 }
 }
 return result
}

当我看到这个方法的处理时长,我又傻眼了

JavaScript 高性能数组去重的方法

15W 的数据居然只要 16ms ??? 比 Set() 还快???

然后我又试了试 150W 的数据量...

JavaScript 高性能数组去重的方法

总结

以上所述是小编给大家介绍的JavaScript 高性能数组去重的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS delegate与live浅析
Dec 21 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
简单的三步vuex入门
May 20 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
vue封装数字翻牌器
Apr 20 Vue.js
vue2 设置router-view默认路径的实例
Sep 20 #Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 #Javascript
vuejs router history 配置到iis的方法
Sep 20 #Javascript
关于单文件组件.vue的使用
Sep 20 #Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 #Javascript
jQuery pjax 应用简单示例
Sep 20 #jQuery
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 #Javascript
You might like
PHP新手上路(九)
2006/10/09 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
vue ssr 指南详读
2018/06/29 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
python爬虫用mongodb的理由
2020/07/28 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
保护校园环境倡议书
2015/04/28 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers