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 获取页面元素的位置的代码
Sep 25 Javascript
jquery 插件开发方法小结
Oct 23 Javascript
Javascript面向对象编程
Mar 18 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
JavaScript 实现继承的几种方式
Feb 19 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封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
JavaScript 自定义事件之我见
2017/09/25 Javascript
vue组件生命周期详解
2017/11/07 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
使用Python对SQLite数据库操作
2017/04/06 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
模范家庭事迹材料
2014/02/10 职场文书
个人自我剖析材料
2014/09/30 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
JavaScript 反射学习技巧
2021/10/16 Javascript