javascript數(shù)組去重方法終極總結(jié)
有時(shí)會(huì)碰上這種需求,需要將數(shù)組中重復(fù)的元素刪除掉,而只保留一個(gè)。最先想到的辦法很可能就是用2個(gè)for循環(huán)來做比較然后去除掉重復(fù)的元素,代碼如下所示:
方法1:
Array.prototype.distinct = function(){
var arr = [],
len = this.length;
for ( var i = 0; i < len; i++ ){
for( var j = i+1; j < len; j++ ){
if( this[i] === this[j] ){
j = ++i;
}
}
arr.push( this[i] );
}
return arr;
};
使用方法1如果碰到數(shù)據(jù)比較多時(shí)性能上會(huì)差很多。那么請繼續(xù)看下面的方法。
方法2:
Array.prototype.distinct = function(){
var self = this,
arr = self.concat().sort(); // 創(chuàng)建一個(gè)新數(shù)組并排序
arr.sort(function( a, b ){
if( a === b ){
var n = self.indexOf( a ); //獲取索引值
self.splice( n, 1 );
}
});
return self;
};
方法2使用了 sort 的自定義回調(diào)函數(shù),也用到了 indexOf 這個(gè)IE6/7/8不支持的方法。當(dāng)然,indexOf可以自己模擬,但是更大的問題是IE6/7/8的sort方法和標(biāo)準(zhǔn)瀏覽器之間也有差別。在IE6/7/8中使用 sort 方法的自定義回調(diào)函數(shù)陷阱比較多,上面的自定義 sort 的回調(diào)函數(shù)的代碼在IE6/7/8中會(huì)直接報(bào)“缺少數(shù)字”的錯(cuò)誤,回調(diào)函數(shù)的返回是NaN的話就會(huì)報(bào)這個(gè)錯(cuò),因?yàn)槔碚撋?sort 的回調(diào)函數(shù)只能返回整數(shù)。就算忽略返回值的問題還是有其他問題,最后也沒有過多的去糾結(jié)了,方法2在IE6/7/8中行不通。
從愚人碼頭那里看來了方法3,下面是他的代碼:
Array.prototype.delRepeat=function(){
var newArray=[];
var provisionalTable = {};
for (var i = 0, item; (item= this[i]) != null; i++) {
if (!provisionalTable[item]) {
newArray.push(item);
provisionalTable[item] = true;
}
}
return newArray;
};
方法3使用了一個(gè)臨時(shí)的對象來存儲(chǔ)數(shù)組的元素,如果碰上重復(fù)的數(shù)組元素,將會(huì)忽略掉。但是,如果碰到下面這種數(shù)組:
var arr = [ 'firefox', 1, '1' ];
上面的數(shù)組如果用方法3會(huì)誤將 1 和 “1” 當(dāng)成重復(fù)元素而刪除掉,于是有將方法3做了一點(diǎn)點(diǎn)的小修改,可以解決這個(gè)BUG。
方法3的修改版:
Array.prototype.distinct = function(){
var arr = [],
obj = {},
i = 0,
len = this.length,
result;
for( ; i < len; i++ ){
result = this[i];
if( obj[result] !== result ){
arr.push( result );
obj[result] = result;
}
}
return arr;
};
之后又看了愚人碼頭文章后面的評(píng)論,該方法和Rekey提供的方法是一樣的,但是這個(gè)方法也有BUG,如果碰到這樣的2B數(shù)組就杯具了:
var arr = [ 'firefox', 1, '1', 1 ];
上面的數(shù)組用方法3的修改版,將不會(huì)刪除后3個(gè)元素,不過這種數(shù)組有點(diǎn)極端了,如果碰到字符串字面量和數(shù)字相同的數(shù)據(jù)應(yīng)該預(yù)先處理下以規(guī)避這種BUG。使用臨時(shí)對象的方法比 sort 在標(biāo)準(zhǔn)瀏覽器中略快,sort 方法在各瀏覽器中的算法應(yīng)該也有區(qū)別。
- JavaScript數(shù)組去重的兩種方法推薦
- JavaScript數(shù)組去重的五種方法
- javascript數(shù)組去重的六種方法匯總
- javascript數(shù)字?jǐn)?shù)組去重復(fù)項(xiàng)的實(shí)現(xiàn)代碼
- 詳解javascript數(shù)組去重問題
- JavaScript 數(shù)組去重并統(tǒng)計(jì)重復(fù)元素出現(xiàn)的次數(shù)實(shí)例
- Javascript中數(shù)組去重與拍平的方法示例
- javascript 數(shù)組去重復(fù)(在線去重工具)
- javascript數(shù)組去重小結(jié)
- JavaScript使用indexOf()實(shí)現(xiàn)數(shù)組去重的方法分析
- JavaScrip數(shù)組去重操作實(shí)例小結(jié)
相關(guān)文章
es6學(xué)習(xí)筆記之Async函數(shù)的使用示例
async 函數(shù),使得異步操作變得更加方便。它是 Generator 函數(shù)的語法糖。下面這篇文章主要給大家介紹了es6學(xué)習(xí)筆記之Async函數(shù)使用的相關(guān)資料,文中給出了詳細(xì)的示例代碼,需要的朋友們下面來一起看看吧。2017-05-05
JS中注入eval, Function等系統(tǒng)函數(shù)截獲動(dòng)態(tài)代碼
這篇文章主要介紹了JS中注入eval, Function等系統(tǒng)函數(shù)截獲動(dòng)態(tài)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
基于Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法
不知道大家有沒有發(fā)現(xiàn)在現(xiàn)在的移動(dòng)頁面上,有很多情況需要加載大量的資源。但是移動(dòng)端的訪問速度和pc還是有很大的差距,有些時(shí)候需要一些取巧的方式來提升用戶體驗(yàn),而實(shí)時(shí)顯示加載進(jìn)度就是其中一種。這篇文章就給大家分享了Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法。2016-10-10
小程序雙頭slider選擇器的實(shí)現(xiàn)示例
這篇文章主要介紹了小程序雙頭slider選擇器的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
uniapp退出關(guān)閉當(dāng)前小程序或APP的簡單實(shí)現(xiàn)
最近通過Uniapp開發(fā)APP又一個(gè)非常實(shí)用的功能,這篇文章主要給大家介紹了關(guān)于uniapp退出關(guān)閉當(dāng)前小程序或APP的簡單實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
WebGL利用FBO完成立方體貼圖效果完整實(shí)例(附demo源碼下載)
這篇文章主要介紹了WebGL利用FBO完成立方體貼圖效果的方法,以完整實(shí)例形式分析了WebGL實(shí)現(xiàn)立方體貼圖的具體步驟與相關(guān)技巧,并附帶了demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
JavaScript實(shí)現(xiàn)三級(jí)級(jí)聯(lián)特效
這篇文章主要介紹了JavaScript實(shí)現(xiàn)三級(jí)級(jí)聯(lián)特效,選擇省會(huì)出現(xiàn)相應(yīng)的縣下拉框,同時(shí)市的下拉框改變,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11

