JS去除數(shù)組重復(fù)值的五種不同方法

更新時(shí)間：2013年09月06日 17:32:40 投稿：whsnow

去除數(shù)組重復(fù)值的方法有很多，本文整理了四種不同方式，在此與大家分享下，希望對(duì)大家有所幫助

今天工作遇到此問題，嘗試多個(gè)方法不盡人意，故此寫個(gè)博客來總結(jié)一下如何在js中去除重復(fù)元素。

Array類型并沒有提供去重復(fù)的方法，如果要把數(shù)組的重復(fù)元素干掉，那得自己想辦法：

方法1：

  Array.prototype.method1 = function(){ 
      var arr[];  //定義一個(gè)臨時(shí)數(shù)組 
      for(var i = 0; i < this.length; i++){  //循環(huán)遍歷當(dāng)前數(shù)組 
        //判斷當(dāng)前數(shù)組下標(biāo)為i的元素是否已經(jīng)保存到臨時(shí)數(shù)組 
        //如果已保存，則跳過，否則將此元素保存到臨時(shí)數(shù)組中 
        if(arr1.indexOf(this[i]) == -1){ 
          arr.push(this[i]); 
        } 
      } 
      return arr; 
    }

方法2：

Array.prototype.method2 = function(){ 
      var h{};  //定義一個(gè)hash表 
      var arr[]; //定義一個(gè)臨時(shí)數(shù)組 
       
      for(var i = 0; i < this.length; i++){  //循環(huán)遍歷當(dāng)前數(shù)組 
        //對(duì)元素進(jìn)行判斷，看是否已經(jīng)存在表中，如果存在則跳過，否則存入臨時(shí)數(shù)組 
        if(!h[this[i]]){ 
          //存入hash表 
          h[this[i]] = true; 
          //把當(dāng)前數(shù)組元素存入到臨時(shí)數(shù)組中 
          arr.push(this[i]); 
        } 
      } 
      return arr; 
    }

方法3：

Array.prototype.method3 = function(){ 
      //直接定義結(jié)果數(shù)組 
      var arr[this[0]]; 
      for(var i = 1; i < this.length; i++){  //從數(shù)組第二項(xiàng)開始循環(huán)遍歷此數(shù)組 
        //對(duì)元素進(jìn)行判斷： 
        //如果數(shù)組當(dāng)前元素在此數(shù)組中第一次出現(xiàn)的位置不是i 
        //那么我們可以判斷第i項(xiàng)元素是重復(fù)的，否則直接存入結(jié)果數(shù)組 
        if(this.indexOf(this[i]) == i){ 
          arr.push(this[i]); 
        } 
      } 
      return arr; 
     
    }

方法4：

Array.prototype.method4 = function(){ 
      //將數(shù)組進(jìn)行排序 
      this.sort(); 
      //定義結(jié)果數(shù)組 
      var arr[this[0]]; 
      for(var i = 1; i < this.length; i++){  //從數(shù)組第二項(xiàng)開始循環(huán)遍歷數(shù)組 
        //判斷相鄰兩個(gè)元素是否相等，如果相等說明數(shù)據(jù)重復(fù)，否則將元素寫入結(jié)果數(shù)組 
        if(this[i] !== arr[arr.length - 1]){ 
          arr.push(this[i]); 
        }       
      } 
      return arr; 
       
    }

例如：

 var arr = [112,112,34,'你好',112,112,34,'你好','str','str1']; 
    alert(arr.method3());

方法1和方法3都用到了數(shù)組的indexOf()方法，此方法主要用來查找元素在數(shù)組中第一次出現(xiàn)的位置。比較浪費(fèi)資源和時(shí)間。
方法2使用的是hash表，把已經(jīng)出現(xiàn)過的元素通過下標(biāo)形式寫入到一個(gè)object內(nèi)，下標(biāo)的引用要比用數(shù)組indexOf()方法搜索節(jié)省時(shí)間。
方法4是先將數(shù)組排序，然后一次比較相鄰的兩個(gè)元素的值，排序使用的是js原生的sort()方法。
讀者可以自行編寫程序測(cè)試四種方法的效率如何。例如：首先利用隨機(jī)函數(shù)生成一個(gè)50000長度的隨機(jī)數(shù)數(shù)組，然后分別用四種方法進(jìn)行執(zhí)行，記錄程序運(yùn)行時(shí)間進(jìn)行比較四種方法的優(yōu)劣。

方法五、個(gè)人比較喜歡的一個(gè)函數(shù)

function unique(arr) {
  var result = [], isRepeated;
  for (var i = 0, len = arr.length; i < len; i++) {
    isRepeated = false;
    for (var j = 0, len = result.length; j < len; j++) {
      if (arr[i] == result[j]) {  
        isRepeated = true;
        break;
      }
    }
    if (!isRepeated) {
      result.push(arr[i]);
    }
  }
  return result;
}

總體思路是把數(shù)組元素逐個(gè)搬運(yùn)到另一個(gè)數(shù)組，搬運(yùn)的過程中檢查這個(gè)元素是否有重復(fù)，如果有就直接丟掉。從嵌套循環(huán)就可以看出，這種方法效率極低。我們可以用一個(gè)hashtable的結(jié)構(gòu)記錄已有的元素，這樣就可以避免內(nèi)層循環(huán)。恰好，在Javascript中實(shí)現(xiàn)hashtable是極為簡單的，改進(jìn)如下：

function unique(arr) {
  var result = [], hash = {};
  for (var i = 0, elem; (elem = arr[i]) != null; i++) {
    if (!hash[elem]) {
      result.push(elem);
      hash[elem] = true;
    }
  }
  return result;
}

完整測(cè)試代碼

<script>
var h_hewenqiArray = new Array();
h_hewenqiArray[0] = "jb51.net";
h_hewenqiArray[1] = "easysector";
h_hewenqiArray[2] = "jb51.net";
h_hewenqiArray[3] = "keleyi";
h_hewenqiArray[4] = "keleyi";
h_hewenqiArray[5] = "腳本之家";
h_hewenqiArray[6] = "jb51.net";
h_hewenqiArray[7] = "hoverclock";
h_hewenqiArray[8] = "yestop";
h_hewenqiArray[9] = 163;
h_hewenqiArray[10] = "腳本之家";
h_hewenqiArray[11] = 163;
h_hewenqiArray[12] = "hoverclock";
h_hewenqiArray[13] = "腳本之家";

var h_arrayLength = h_hewenqiArray.length;
document.write("原始數(shù)組元素個(gè)數(shù)："+h_arrayLength + "<br />");
for (var i = 0; i < h_arrayLength; i++)
{
document.write(h_hewenqiArray[i]+"<br />");
}


function hovercUnique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
//http://jb51.net.com
}

var h_hewenqiResult = hovercUnique(h_hewenqiArray);

var h_resultLength = h_hewenqiResult.length;
document.write("<br />去重復(fù)后數(shù)組元素個(gè)數(shù)：" + h_resultLength + "<br />");
for (var i = 0; i < h_resultLength; i++) {
document.write(h_hewenqiResult[i] + "<br />");
} 
</script>

以下是其它網(wǎng)友的補(bǔ)充

復(fù)制代碼代碼如下:

 
/// <summary>2 /// 回車鍵按鈕事件（此方法需要在頁面加載完后執(zhí)行，比如在Jquery中的ready中調(diào)用）--方法一 

/// </summary> 

/// 調(diào)用示例： 

/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3); 

/// var v_ArrayResult = v_Array.deleteEle(); 

/// alert(v_ArrayResult); //返回結(jié)果：, 2, 3, 4, 5, 6, 7 

Array.prototype.deleteEle = function () { 

var o = {}, newArr = [], i, j; 

for (i = 0; i < this.length; i++) { 

if (typeof (o[this[i]]) == "undefined") { 

o[this[i]] = ""; 

} 

} 

for (j in o) { 

newArr.push(j) 

} 

return newArr; 

} 

/// <summary> 

/// 回車鍵按鈕事件（此方法需要在頁面加載完后執(zhí)行，比如在Jquery中的ready中調(diào)用）--方法二 

/// </summary> 

/// 調(diào)用示例： 

/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3); 

/// var v_ArrayResult = v_Array.deleteEleReg(); 

/// alert(v_ArrayResult); //返回結(jié)果：, 2, 3, 4, 5, 6, 7 

Array.prototype.deleteEleReg = function () { 

return this.reverse().join(",").match(/([^,]+)(?!.*\1)/ig).reverse(); 

} 

/// <summary> 

/// 回車鍵按鈕事件（此方法需要在頁面加載完后執(zhí)行，比如在Jquery中的ready中調(diào)用）--方法三 

/// </summary> 

/// <param name="array">數(shù)組</param> 

/// 調(diào)用示例： 

/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3); 

/// alert(unique(v_Array)); //返回結(jié)果：, 2, 3, 4, 5, 6, 7 

function deleteEleFunction(array) { 

var ret = [], record = {}, it, tmp, obj = "__object__", bak = [], i, len; 

var type = { 

"number": function (n) { return "__number__" + n; }, 

"string": function (n) { return "__string__" + n; }, 

"boolean": function (n) { return "__boolean__" + n; }, 

"undefined": function (n) { return "__undefined__"; }, 

"object": function (n) { 

return n === null ? "__null__" : obj in n ? n[obj] : (n[obj] = obj + bak.push(n)); 

} 

}; 

for (i = 0, len = array.length; i < len; i++) { 

it = array[i]; tmp = type[typeof it](it); 

if (!(tmp in record)) { ret.push(it); record[tmp] = true; } 

} 

for (i = 0, len = bak.length; i < len; delete bak[i++][obj]) { } 

return ret; 

}; 

/// <summary>< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 

/// 回車鍵按鈕事件（此方法需要在頁面加載完后執(zhí)行，比如在Jquery中的ready中調(diào)用）--方法四 

/// </summary> 

/// 調(diào)用示例： 

/// var v_Array = new Array(1, 2, 3, 4, 5, 6, 7, 3, 3, 2, 2, 4, 2, 1, 1, 3); 

/// var v_ArrayResult = v_Array.deleteEleDis(); 

/// alert(v_ArrayResult); //返回結(jié)果：, 2, 3, 4, 5, 6, 7 

Array.prototype.deleteEleDis = function () { 

var a = [], b = []; 

for (var prop in this) { 

var d = this[prop]; 

if (d === a[prop]) continue; //防止循環(huán)到prototype 

if (b[d] != 1) { 

a.push(d); 

b[d] = 1; 

} 

} 

return a; 

}