DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 關於js數組去重的問題小結
關於js數組去重的問題小結
編輯:JavaScript綜合知識     

 在項目開發過程中經常會遇到數組中包含很多重復的內容,即髒數據去髒的操作,本文著重講解了數組去重的幾種方法。需要的朋友可以過來參考下,希望對大家有所幫助

1.根據js對象中key不重復的原則,構思出數組去重的方法,按照最常規的思維如下:   代碼如下: function distinctArray(arr){ var obj={},temp=[]; for(var i=0;i<arr.length;i++){ if(!obj[arr[i]]){ temp.push(arr[i]); obj[arr[i]] =true; } } return temp;    }    var testarr=[1,2,3,2];    console.log(distinctArray(testarr));// [1,2,3]   看起來還不錯的樣子哦,但是如果變成一下情況: var testarr1=[1,2,3,"2"]; console.log(distinctArray(testarr));// [1,2,3] 竟然還是一樣的結果,這就並非我們想要的了,我們需要的結果應該是[1,2,3,"2"].即去重的過程中需要保證類型的完整性。   針對以上情況,我們對上述方法進行改進:   代碼如下: function distinctArrayImprove(arr){ var obj={},temp=[]; for(var i=0;i<arr.length;i++){ if(!obj[typeof (arr[i])+arr[i]]){ temp.push(arr[i]); obj[typeof (arr[i])+arr[i]] =true; } } return temp; }   以上方法在向對象中放key的時候加了typeof的前綴,那麼讓我們看看效果吧。 var testarr1=[1,2,3,"2"]; console.log(distinctArray(testarr));// [1,2,3,"2"] 哎呦,不錯哦!那麼是不是這個函數就徹底ok呢,讓我們再看一種情況! var testarr1=[1,2,3,"2",{a:1},{b:1}]; console.log(distinctArray(testarr));// [1,2,3,"2",{a:1}] 竟然出現這個結果,怎麼把{b:1}給莫名其妙的刪掉了呢,去重的過程中如果出現誤刪除有用的數據可是很嚴重的問題,所以以上方法也不是perfect的一種,那就讓我們接著往下看吧。   2.在1中我們的主要思想是利用js對象中key不重復的理念來指導我們的思維,但是最終沒有解決所有的問題,那麼接著我們可以考慮換一種思維模式來實現我們想要的功能。   用slice和splice方法來實現數組的去重,如下:   代碼如下: function distinctArray2(arr){ var temp=arr.slice(0);//數組復制一份到temp for(var i=0;i<temp.length;i++){ for(j=i+1;j<temp.length;j++){ if(temp[j]==temp[i]){ temp.splice(j,1);//刪除該元素 j--; } } } return temp; }   測試: var testarr1=[1,2,3,"2"]; console.log(distinctArray(testarr));// [1,2,3]  var testarr2=[1,2,2,{a:1},{a:1},{a:1,b:2},function(){alert("b");},function(){alert("b");}]; //[1,2,{a:1},{a:1},{a:1,b:2},function(){alert("b");},function(){alert("b");}]   測試結果仍然不能滿足我們的需求,腫麼辦?經過我們隊以上方法的研究,我們發現主要的問題出在比較兩個對象相等的操作上,distinctArray2中利用”==“來比較,並不能區分大對象的內容是否相等,鑒於此種情況,我們另外寫了一個方法:   代碼如下: function distinctArrayAll(arr){ var isEqual=function(obj1,obj2){ //兩個對象地址相等,必相等 if(obj1===obj2){ return true; } if(typeof(obj1)==typeof(obj2)){ if(typeof(obj1)=="object"&&typeof(obj2)=="object"){ var pcount=0; for(var p in obj1){ pcount++; if(!isEqual(obj1[p],obj2[p])){ return false; } } for(var p in obj2){ pcount--; } return pcount==0; }else if(typeof(obj1)=="function"&&typeof(obj2)=="function"){ if(obj1.toString()!=obj2.toString()){ return false; } }else { if(obj1!=obj2){ return false; } } }else{ return false; } return true; } var temp=arr.slice(0);//數組復制一份到temp for(var i=0;i<temp.length;i++){ for(j=i+1;j<temp.length;j++){ if(isEqual(temp[j],temp[i])){ temp.splice(j,1);//刪除該元素 j--; } } } return temp; }   測試: var testArr3=[1,2,2,{a:1},{a:1},{a:1,b:2},function(){alert("b");},function(){alert("b");}]; console.log(distinctArrayAll(testArr3)); //結果 [1,2,{a:1},{a:1,b:2},function(){alert("b");}]   哎呀,終於順利完成去重的任務了,至於每個方法的性能問題,我們留待下一次討論!我們可以看出最後一種方法是萬能去重法,可以針對復雜數組來去重,但是相應的執行開銷也是相當大的,在實際的項目開發中有時我們需要的可能僅僅是純數字或者純字符串的去重,這就要求我們根據需求靈活選用相應的算法,不求太perfect,只求在滿足需求的基礎上使程序效率更高!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved