快捷導(dǎo)航

javascript數(shù)組去重3種方法的性能測(cè)試與比較

更新時(shí)間：2013年03月26日 11:40:44 作者：

面試題中有一題數(shù)組去重，首先想到的是對(duì)象存鍵值的方法可是遇到不同類(lèi)型又能轉(zhuǎn)換成同樣的字符串的就完了接下來(lái)為大家介紹下雙重循環(huán)/存鍵值和類(lèi)型實(shí)現(xiàn)去重，感興趣的各位可以參考下哈

昨天參加的一個(gè)前端面試，其中有一題數(shù)組去重，首先想到的是對(duì)象存鍵值的方法，代碼如下
方法一：（簡(jiǎn)單存鍵值）

復(fù)制代碼代碼如下:

 
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; 
}; 

上面的方法不復(fù)雜，思路也簡(jiǎn)單，可是遇到不同類(lèi)型又能轉(zhuǎn)換成同樣的字符串的就完了，比如1和"1";于是又用了傳統(tǒng)的雙重循環(huán)，代碼如下
方法二：（雙重循環(huán)）

復(fù)制代碼代碼如下:

 
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; 
}; 

上面這種方法得到了想要的結(jié)果，但是兩層循環(huán)效率比較低，我們?cè)傧朕k法從第一種方法上上手，然后加上用字符串來(lái)保存數(shù)組項(xiàng)的類(lèi)型，有新類(lèi)型就連接字符串加上去，查找的時(shí)候就發(fā)現(xiàn)一個(gè)有保存的類(lèi)型就把存的類(lèi)型的字符串替換為空，代碼如下
方法三：（存鍵值和類(lèi)型）

復(fù)制代碼代碼如下:

 
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; 
}; 

為了區(qū)別下不同數(shù)據(jù)的各種算法的效率差距，取幾種極端的例子來(lái)驗(yàn)證下，首先看看1-80全部數(shù)組項(xiàng)都不一樣循環(huán)1000次的情況，好吧，IE6弱爆了

IE9:Chrome:
Firefox: IE6:

下面是80項(xiàng)全部重復(fù)的循環(huán)1000次的情況，綜合上面的數(shù)據(jù)一起發(fā)現(xiàn)除了IE6-8其它瀏覽器的雙重循環(huán)表現(xiàn)都不錯(cuò)，而IE6-8雙重循環(huán)要慢10-20倍左右，悲催啊。如果你的網(wǎng)站只支持IE9以上的就可以放心用雙循環(huán)的方法了，否則還是使用健值的方法，根據(jù)數(shù)據(jù)的情況選擇使用方法一或方法三（圖中的方法四，才發(fā)現(xiàn)來(lái)不及改圖，原來(lái)的方法三是用了Array的indexOf，因?yàn)樗俣嚷也患嫒菥蜎](méi)放出來(lái)了）

IE9： Chrome：
Firefox： IE6：