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 相关文章推荐
基于jquery用于查询操作的实现代码
May 10 Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
深入理解js数组的sort排序
May 28 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
详解webpack 多入口配置
Jun 16 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
vue使用echarts画组织结构图
Feb 06 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
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
详解参数传递四种形式
2015/07/21 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
深入浅析Python中的迭代器
2019/06/04 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
社区八一活动方案
2014/02/03 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
应用数学专业求职信
2014/03/14 职场文书
办理房产过户的委托书
2014/09/14 职场文书
钳工实训报告总结
2014/11/04 职场文书
服装店员工管理制度
2015/08/07 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
Python中for后接else的语法使用
2021/05/18 Python
python munch库的使用解析
2021/05/25 Python
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
请求模块urllib之PYTHON爬虫的基本使用
2022/04/08 Python