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编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
javascript实现拖放效果
Dec 16 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
小程序如何构建骨架屏
May 29 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
两种常用的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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php实现简单文件下载的方法
2015/01/30 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
教师求职信范文分享
2013/12/27 职场文书
《荷花》教学反思
2014/04/16 职场文书
村级换届选举方案
2014/05/10 职场文书
班主任工作实习计划
2015/01/16 职场文书
债务追讨律师函
2015/06/24 职场文书
论语读书笔记
2015/06/26 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python