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脚本学习 比较实用的基础
Sep 07 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
vant中的toast层级改变操作
Nov 04 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
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python实现从字典中删除元素的方法
2015/05/04 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
赞美老师的演讲稿
2014/05/22 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
承兑汇票延期证明
2015/06/23 职场文书
公司会议开幕词
2016/03/03 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
python基础之函数的定义和调用
2021/10/24 Python