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 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
jquery拖动改变div大小
Jul 04 jQuery
JavaScript实现旋转轮播图
Aug 18 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
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代码收集表单内容并写入文件的代码
2012/01/29 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php图片添加水印例子
2016/07/20 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
使用python接入微信聊天机器人
2020/03/31 Python
Python实现Restful API的例子
2019/08/31 Python
详解Python3中的 input() 函数
2020/03/18 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
总裁办公室主任职责
2014/01/02 职场文书
《自然之道》教学反思
2014/02/11 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
小学作文之描写天气
2019/08/15 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
Nginx进程调度问题详解
2021/09/25 Servers