DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript常見的五種數組去重的方式
JavaScript常見的五種數組去重的方式
編輯:關於JavaScript     

大致介紹

JavaScript的數組去重問題在許多面試中都會遇到,現在做個總結

先來建立一個數組

var arr = [1,2,3,3,2,'我','我',34,'我的',NaN,NaN];

第一種

思路:建立一個臨時數組,用for循環去依次判斷arr中的每個項在臨時數組中是否有相同的值,如果沒有則將這個值添加到臨時數組,如果有相同的值則不添加,最後返回這個臨時數組

代碼:

Array.prototype.removeDuplicate = function(){
  var n = [];
  for(var i=0;i<this.length;i++){
  if(n.indexOf(this[i]) == -1 ){
  n.push(this[i]);
  }
  }
 return n;
}
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, "我", 34, "我的", NaN, NaN]

注意:不會去掉重復的NaN值

第二種   

思路:建立一個臨時數組,用for循環利用indexOf()方法去依次判斷arr中的每個項在arr中第一次出現的位置,如果這個項在arr中第一次出現的位置就是它的位置,表明在它之前沒有相同的值則把它添加到臨時數組中,如果這個項在arr中第一次出現的位置不是他的位置則表明在它之前有相同的值,則不把他添加到臨時數組中;最後返回臨時數組

代碼:

Array.prototype.removeDuplicate = function(){
  var n = [];
  for(var i=0;i<this.length-1;i++){
  if(this.indexOf(this[i]) == i){
  n.push(this[i]);
  }
  }
 return n;
 }
 var m = arr.removeDuplicate();
 console.log(m);//[1, 2, 3, "我", 34, "我的"]

注意:會把NaN值刪除

第三種

思路:建立一個臨時對象,利用for循環檢測這個臨時對象有沒有arr[i]這個屬性,如果沒有這個屬性表明arr[i]在它之前沒有和它重復的值。把臨時對象的arr[i]屬性設置為true,表明有這個屬性並把這個項添加到臨時數組中;最後返回臨時數組

代碼:

Array.prototype.removeDuplicate = function(){
  var n = [],m = {};
  for(var i=0;i<this.length;i++){
  if(!m[this[i]]){
  m[this[i]] = true;
  n.push(this[i]);
  }
  }
 return n;
 }
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, "我", 34, "我的", NaN]

第四種

思路:先將這個數組排序,然後比較每個項和它後面的項的值是否相等,如果不相等則添加到臨時數組中;最後返回臨時數組

代碼:

Array.prototype.removeDuplicate = function(){
 var n = [];
 this.sort();
 for(var i=0;i<this.length;i++){
 if(this[i] != this[i+1]){
  n.push(this[i]);
  }
 }
 return n;
 }
var m = arr.removeDuplicate();
console.log(m);//[1, 2, 3, 34, NaN, NaN, "我", "我的"]

注意:不會去掉重復的NaN值

第五種

思路:利用ES6的方法set方法去重,並用Array.from轉換為數組

set是一種新的數據結構,它可以接收一個數組或者是類數組對象,自動去重其中的重復項目,返回一個對象

代碼:

Array.prototype.removeDuplicate = function(){
 return (Array.from(new Set(this)));
 }
 var m = arr.removeDuplicate();
 console.log(m);//[1, 2, 3, "我", 34, "我的", NaN]

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved