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操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js获取 type=radio 值的方法
May 09 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
两种常用的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
如何去掉文章里的 html 语法
2006/10/09 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
php xhprof使用实例详解
2019/04/15 PHP
php链式操作的实现方式分析
2019/08/12 PHP
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python如何为图片添加水印
2016/11/25 Python
浅析Python数据处理
2018/05/02 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
python中partial()基础用法说明
2018/12/30 Python
Django框架 querySet功能解析
2019/09/04 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
留守儿童工作方案
2014/06/02 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
欢迎词怎么写
2015/01/23 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
冰雪公主观后感
2015/06/16 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python