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 学习笔记(onchange等)
Nov 14 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
理解javascript正则表达式
Mar 08 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
vue如何限制只能输入正负数及小数
Jul 04 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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 表单数据的获取代码
2009/03/10 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python实现程序的单一实例用法分析
2015/06/03 Python
Python实现简单的代理服务器
2015/07/25 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
浅析python的优势和不足之处
2018/11/20 Python
python批量读取文件名并写入txt文件中
2020/09/05 Python
Tensorflow累加的实现案例
2020/02/05 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
大学活动总结范文
2014/04/29 职场文书
暂住证证明
2015/06/19 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Javascript之datagrid查询详解
2021/09/15 Javascript