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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
js模拟微博发布消息
Feb 23 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 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安全配置
2006/12/06 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
js获取class的所有元素
2013/03/28 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python中必要的名词解释
2019/11/20 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
前处理组长岗位职责
2014/03/01 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
学期个人工作总结
2015/02/13 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
Node.js实现断点续传
2021/06/23 Javascript
Python进行区间取值案例讲解
2021/08/02 Python
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏