javascript数组去重3种方法的性能测试与比较


Posted in Javascript onMarch 26, 2013

昨天参加的一个前端面试,其中有一题数组去重,首先想到的是对象存键值的方法,代码如下
方法一:(简单存键值)

Array.prototype.distinct1 = function() { 
var i=0,tmp={},that=this.slice(0) 
this.length=0; 
for(;i<that.length;i++){ 
if(!(that[i] in tmp)){ 
this[this.length]=that[i]; 
tmp[that[i]]=true; 
} 
} 
return this; 
};

上面的方法不复杂,思路也简单,可是遇到不同类型又能转换成同样的字符串的就完了,比如1和"1";于是又用了传统的双重循环,代码如下
方法二:(双重循环)
Array.prototype.distinct2 = function() { 
var i=0,flag,that=this.slice(0); 
this.length=0; 
for(;i<that.length;i++){ 
var tmp=that[i]; 
flag=true; 
for(var j=0;j<this.length;j++){ 
if(this[j]===tmp){flag=false;break} 
} 
if(flag)this[this.length]=tmp; 
} 
return this; 
};

上面这种方法得到了想要的结果,但是两层循环效率比较低,我们再想办法从第一种方法上上手,然后加上用字符串来保存数组项的类型,有新类型就连接字符串加上去,查找的时候就发现一个有保存的类型就把存的类型的字符串替换为空,代码如下
方法三:(存键值和类型)
Array.prototype.distinct4 = function() { 
var i=0,tmp={},t2,that=this.slice(0),one; 
this.length=0; 
for(;i<that.length;i++){ 
one=that[i]; 
t2=typeof one; 
if(!(one in tmp)){ 
this[this.length]=one; 
tmp[one]=t2; 
}else if(tmp[one].indexOf(t2)==-1){ 
this[this.length]=one; 
tmp[one]+=t2; 
} 
} 
return this; 
};

为了区别下不同数据的各种算法的效率差距,取几种极端的例子来验证下,首先看看1-80全部数组项都不一样循环1000次的情况,好吧,IE6弱爆了

IE9:javascript数组去重3种方法的性能测试与比较Chrome: javascript数组去重3种方法的性能测试与比较
Firefox:
javascript数组去重3种方法的性能测试与比较 IE6:javascript数组去重3种方法的性能测试与比较


下面是80项全部重复的循环1000次的情况,综合上面的数据一起发现除了IE6-8其它浏览器的双重循环表现都不错,而IE6-8双重循环要慢10-20倍左右,悲催啊。如果你的网站只支持IE9以上的就可以放心用双循环的方法了,否则还是使用健值的方法,根据数据的情况选择使用方法一或方法三(图中的方法四,才发现来不及改图,原来的方法三是用了Array的indexOf,因为速度慢且不兼容就没放出来了)

IE9:javascript数组去重3种方法的性能测试与比较 Chrome:javascript数组去重3种方法的性能测试与比较
Firefox:javascript数组去重3种方法的性能测试与比较 IE6:javascript数组去重3种方法的性能测试与比较

Javascript 相关文章推荐
JS 修改URL参数(实现代码)
Jul 08 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
两种常用的javascript数组去重方法思路及代码
Mar 26 #Javascript
javascript变量作用域使用中常见错误总结
Mar 26 #Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 #Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 #Javascript
jquery 无限级联菜单案例分享
Mar 26 #Javascript
JSON辅助格式化处理方法
Mar 26 #Javascript
html+css+js实现xp window界面及有关功能
Mar 26 #Javascript
You might like
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
javascript通过class来获取元素实现代码
2013/02/20 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
Angular+Node生成随机数的方法
2017/06/16 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python实现根据月份和日期得到星座的方法
2015/03/27 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python实现名片管理系统
2020/02/14 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python计算auc的方法
2020/09/09 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
汽车机电维修工求职信
2014/09/30 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
春季运动会开幕词
2015/01/28 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
导游词之任弼时故居
2020/01/07 职场文书
golang中的空接口使用详解
2021/03/30 Python
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android