js刪除陣列中的重複元素

admin發表於2017-03-14
JS陣列

將陣列中的重複元素刪除是常用的操作，下面就通過例項程式碼簡單介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#thediv{
  width:100px;
  height:100px;
}
</style> 
<script type="text/javascript">
var inArray=function(arr,elt){
  for(var i=0,len=arr.length;i<len;i++) {
    if(arr[i]===elt) {
      return true;
    }
  }
  return false;
}
var unique=function(arr) {
  if(arr.length<2) return arr;
  var i=0,len=arr.length;newArray=[];
  for(; i<len;i++) {
    if(!inArray(newArray,arr)) {
      newArray.push(arr);
    }
  }
  return newArray;
};
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var arr=[9,1,'3',8,7,7,6,6,5,7,8,8,7,4,3,1];
  odiv.innerHTML=unique(arr);
}
</script>
</head> 
<body> 
  <div id="thediv"></div>
</body> 
</html>

以上程式碼實現了我們的要求，能夠刪除陣列中的重複內容，下面對實現過程做一下簡單的介紹:

一.實現原理:

實現原理非常的簡單，就是新建一個空的陣列，然後將原有的陣列中的元素從第一個開始放入陣列，然後再用將要新增到新陣列的元素和新陣列現有的元素比較，如果相等則說明重複了，否則新增到新陣列，原理大致如此，具體參閱程式碼註釋。

二.程式碼註釋:

1.var inArray=function(arr,elt){}，此函式用來判定是否重複，第一個引數是新陣列的物件引用，第二個是原來陣列的元素。

2.for(var i=0,len=arr.length;i<len;i++){}，遍歷新陣列的所有元素。

3.if(arr===elt){return true;}，如果有和新陣列中元素相等的，則返回true。

4.var unique=function(arr){}，函式的引數是將要刪除重複項的陣列物件引用。

5. if(arr.length<2) return arr，如果陣列中的元素少於2個，那麼就沒有比較的必要了，直接返回陣列。

6.var i=0,len=arr.length;newArray=[]，宣告幾個變數。

7.for(;i<len;i++) {}，遍歷每一個陣列元素。

8.if(!inArray(newArray,arr)) {}，判斷是否重複。

9.newArray.push(arr)，將元素新增到陣列。

三.相關閱讀:

1.push()函式可以參閱javascript push()一章節。 

2.innerHTML屬性可以參閱js innerHTML一章節。

在上面的程式碼中，陣列中有一個數值型的3和一個字元型的"3"在這裡並沒有被刪除，下面就介紹一個忽略型別的：

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
#thediv{
  width:100px;
  height:100px;
}
</style> 
<script type="text/javascript">
var unique=function(arr){    
  var a=[],        
    o={},i,v,len=arr.length;    
    if(len<2) {        
      return arr;    
    }    
    for(i=0;i<len;i++) {        
      v=arr[i];        
      if(o[v]!==1) {            
        a.push(v);            
        o[v]=1;       
      }    
    }    
    return a;
}
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var arr=[9,1,'3',8,7,7,6,6,5,7,8,8,7,4,3,1];
  odiv.innerHTML=unique(arr);
}
</script>
</head> 
<body> 
  <div id="thediv"></div>
</body> 
</html>

這個程式碼實現的比較巧妙，將陣列值作為物件直接量的屬性，因為物件直接量屬性帶引號和不帶引號是一樣的，所以這樣就可以判斷是否重複，並且還可以忽略型別.

相關文章