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 相关文章推荐
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
Python抽象类的新写法
2015/06/18 Python
python如何定义带参数的装饰器
2018/03/20 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
django ajax json的实例代码
2018/05/29 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python sorted方法和列表使用解析
2019/11/18 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
物流经理自我评价
2013/09/23 职场文书
机修工岗位职责
2013/11/24 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
搬迁通知
2015/04/20 职场文书
保险公司增员口号
2015/12/25 职场文书
车位出租协议书范本
2016/03/19 职场文书
创业计划书之游泳馆
2019/09/16 职场文书