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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
详解async/await 异步应用的常用场景
May 13 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 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实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
使用python编写监听端
2018/04/12 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python实现猜数游戏
2020/03/27 Python
python中round函数保留两位小数的方法
2020/12/04 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
一套软件测试笔试题
2014/07/25 面试题
师德模范事迹材料
2014/06/03 职场文书
学校班班通实施方案
2014/06/11 职场文书
处级干部考察材料
2014/12/24 职场文书
2014年终个人总结报告
2015/03/09 职场文书
团干部培训班心得体会
2016/01/06 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技