關(guān)于js數(shù)組去重的問題小結(jié)
1.根據(jù)js對象中key不重復(fù)的原則,構(gòu)思出數(shù)組去重的方法,按照最常規(guī)的思維如下:
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]
竟然還是一樣的結(jié)果,這就并非我們想要的了,我們需要的結(jié)果應(yīng)該是[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;
}
以上方法在向?qū)ο笾蟹舓ey的時候加了typeof的前綴,那么讓我們看看效果吧。
var testarr1=[1,2,3,"2"];
console.log(distinctArray(testarr));// [1,2,3,"2"]
哎呦,不錯哦!那么是不是這個函數(shù)就徹底ok呢,讓我們再看一種情況!
var testarr1=[1,2,3,"2",{a:1},{b:1}];
console.log(distinctArray(testarr));// [1,2,3,"2",{a:1}]
竟然出現(xiàn)這個結(jié)果,怎么把{b:1}給莫名其妙的刪掉了呢,去重的過程中如果出現(xiàn)誤刪除有用的數(shù)據(jù)可是很嚴(yán)重的問題,所以以上方法也不是perfect的一種,那就讓我們接著往下看吧。
2.在1中我們的主要思想是利用js對象中key不重復(fù)的理念來指導(dǎo)我們的思維,但是最終沒有解決所有的問題,那么接著我們可以考慮換一種思維模式來實現(xiàn)我們想要的功能。
用slice和splice方法來實現(xiàn)數(shù)組的去重,如下:
function distinctArray2(arr){
var temp=arr.slice(0);//數(shù)組復(fù)制一份到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");}]
測試結(jié)果仍然不能滿足我們的需求,腫么辦?經(jīng)過我們隊以上方法的研究,我們發(fā)現(xiàn)主要的問題出在比較兩個對象相等的操作上,distinctArray2中利用”==“來比較,并不能區(qū)分大對象的內(nèi)容是否相等,鑒于此種情況,我們另外寫了一個方法:
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);//數(shù)組復(fù)制一份到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));
//結(jié)果 [1,2,{a:1},{a:1,b:2},function(){alert("b");}]
哎呀,終于順利完成去重的任務(wù)了,至于每個方法的性能問題,我們留待下一次討論!我們可以看出最后一種方法是萬能去重法,可以針對復(fù)雜數(shù)組來去重,但是相應(yīng)的執(zhí)行開銷也是相當(dāng)大的,在實際的項目開發(fā)中有時我們需要的可能僅僅是純數(shù)字或者純字符串的去重,這就要求我們根據(jù)需求靈活選用相應(yīng)的算法,不求太perfect,只求在滿足需求的基礎(chǔ)上使程序效率更高!
- js數(shù)組去重的常用方法總結(jié)
- JS實現(xiàn)數(shù)組去重方法總結(jié)(六種方法)
- js數(shù)組去重的5種算法實現(xiàn)
- 高性能js數(shù)組去重(12種方法,史上最全)
- 史上最全JavaScript數(shù)組去重的十種方法(推薦)
- js實現(xiàn)數(shù)組去重、判斷數(shù)組以及對象中的內(nèi)容是否相同
- JavaScript數(shù)組去重的兩種方法推薦
- JS實現(xiàn)的合并多個數(shù)組去重算法示例
- JS實現(xiàn)的JSON數(shù)組去重算法示例
- JavaScript數(shù)組去重的五種方法
- js算法中的排序、數(shù)組去重詳細概述
- JS實現(xiàn)數(shù)組去重,顯示重復(fù)元素及個數(shù)的方法示例
- 兩個數(shù)組去重的JS代碼
- JS實現(xiàn)數(shù)組去重及數(shù)組內(nèi)對象去重功能示例
- JS實現(xiàn)的字符串?dāng)?shù)組去重功能小結(jié)
- JS實現(xiàn)字符串去重及數(shù)組去重的方法示例
- js數(shù)組去重的方法總結(jié)
- JS數(shù)組去重的常用4種方法
相關(guān)文章
JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
對于js初學(xué)著必須理解this和srcElement的應(yīng)用,這也是面試中經(jīng)??嫉降?。下面我們就通過幾個示例來詳細了解下2015-05-05JS 中使用Promise 實現(xiàn)紅綠燈實例代碼(demo)
本文通過實例代碼給大家介紹了JS 中使用Promise 實現(xiàn)紅綠燈效果,在文中給大家介紹了一個promise用法例子,需要的朋友可以參考下2017-10-10IE11下CKEditor在Bootstrap Modal中下拉問題的解決
這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09