前端最全陣列去重方法,面試必備
今天給大家帶來的是陣列的去重
在面試的過程中這個問題是必問的內容
但是在實際的開發中已經不用手寫了,只需要調一下方法就可以
那麼為什麼今天還要來說
主要也是為了面試,其實是對知識的回顧
廢話不多說,進入正題吧
第一種陣列去重的方法:這種方法是先拿出一個數組的值與其前面的那個值做比較,如果前面有這個值就刪掉,如果沒有則進行下一個的迴圈,這種寫法可以實現陣列的遍歷,但是要寫兩個迴圈,就效能上來說肯定是很低
var arr=[];
for(var i=0;i<10;i++){
var arr1=Math。floor(Math。random()*10);
arr。push(arr1);//這樣生成的陣列難免會出現重複的項
}
console。log(a);/* 第一種陣列去重的方法 */
for(var i=0,len=arr。length;i for(var k=0;k if(arr[i]===arr[k]){ arr。splice(i,1); i——; } } } console。log(arr); 結果是: 第二種陣列去重的方法:這種方法的實現是第一種的實現機制,只不過在查詢的時候是沒取出一個,分別與其後面的每一項進行查詢 var arr=[]; for(var i=0;i<10;i++){ var arr1=Math。floor(Math。random()*10); arr。push(arr1);//這樣生成的陣列難免會出現重複的項 } console。log(arr); /* 第二種陣列去重的方法 */ for(var i=0,len=arr。length;i for(var k=i+1;k if(arr[i]===arr[k]){ arr。splice(i,1); i——; } } } console。log(arr); 結果是: 第三種陣列去重的方法:這種利用的原理是和第二種一樣的查詢方法,但是這種方法不是找到之後刪除而是跳過這個值,上面的這三種方法其實都是差不多的,在ES3中經常使用,現在幾乎不怎麼用了,也就面試的時候會被問到 var arr=[]; for(var i=0;i<10;i++){ var arr1=Math。floor(Math。random()*10); arr。push(arr1);//這樣生成的陣列難免會出現重複的項 } console。log(arr); /* 第三種陣列去重的方法 */ var arr2=[]; for(var i=0,len=arr。length;i for(var k=i+1,ken1=arr。length;i if(arr[i]===arr[k]){ k=++i;//這種方式是如果相等的話直接跳過這個值 } } arr2。push(arr[i]) } console。log(arr2); 結果是: 第四種陣列去重的方法:上面的三種方法都是看原陣列,但是這種方法不是看原陣列,而是看去重的之後的陣列,利用indexof()這個方法進行判斷,將迴圈改成了一個,從效能來說是提高了效能 var arr=[]; for(var i=0;i<10;i++){ var arr1=Math。floor(Math。random()*10); arr。push(arr1);//這樣生成的陣列難免會出現重複的項 } console。log(arr); /* 第四種陣列去重的方法 */ var arr2=[]; for(var i=0,len=arr。length;i if(arr2。indexOf(arr[i])===-1){ arr2。push(arr[i]); } } console。log(arr2) 結果是: 第五種陣列去重的方法;這裡使用了箭頭函式的概念,傳入的引數第一個是陣列的每一項,第二個引數是陣列的索引值,其實就是判斷傳入的值用Indexof判斷之後是否等於陣列的索引值,歸根到底就是借用了indexof()方法在傳入一個引數的時候不管有多少個值只返回第一個的值的原理 var arr=[]; for(var i=0;i<10;i++){ var arr1=Math。floor(Math。random()*10); arr。push(arr1);//這樣生成的陣列難免會出現重複的項 } console。log(arr); /* 第五種陣列去重的方法 ,這裡使用了箭頭函式*/ var arr2=arr。filter((item,index)=>{return arr。indexOf(item)===index}); console。log(arr2);/* 不適用箭頭函式還可以這樣寫 */ var arr3=arr。filter(function (item,index){ return arr。indexOf(item)===index; }); console。log(arr3); 結果是: 第六種陣列去重的方法:這裡利用的是物件的屬性不能重複的原理,每遍歷一個給他設定一個true的值,這個值就只能出現一次 var arr=[]; for(var i=0;i<10;i++){ var arr1=Math。floor(Math。random()*10); arr。push(arr1);//這樣生成的陣列難免會出現重複的項 } /* 陣列的第六種去重的方法 */ console。log(arr); var obj={}; var arr2=[]; for(var i=0,len=arr。length;i if(!obj[arr[i]]){ arr2。push(arr[i]); obj[arr[i]]=true; } } console。log(arr2); console。log(obj); 結果是: 第七種陣列去重的方法:前面的幾種都是ES5或者是ES3中的方法,後面的這幾種是ES6中的方法,藉助set方法實現 var arr=[]; for(var i=0;i<10;i++){ var arr1=Math。floor(Math。random()*10); arr。push(arr1);//這樣生成的陣列難免會出現重複的項 } console。log(arr); /* 陣列的第七種去重的方法 */ var arr1=Array。from(new Set(arr));console。log(arr1) 結果是: 最後一種陣列的去重方法:同樣也是藉助set方法,這種方法是這幾種方法裡面最簡單的一種了,只需要一行程式碼就可以搞定,但是必須得是你的瀏覽器支援ES6 var arr=[]; for(var i=0;i<10;i++){ var arr1=Math。floor(Math。random()*10); arr。push(arr1); //這樣生成的陣列難免會出現重複的項 } console。log(arr); /* 陣列的第七種去重的方法 */ console。log([。。。new Set(arr)]); 結果是: 以上是陣列的八種去重的方法,每一個都有他的優點,不知道平時你用的是哪一種,或者你更喜歡用哪一種,可能陣列去重還會有其他的方法,但是那些方法都是圍繞這些寫的,本質上沒有很大的區別