JS去除數組重復值的五種不同方法

2019-11-20 22:19:35

字體：大中小

來源：轉載

供稿：網友

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

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

方法1：

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

方法2：

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

方法3：

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

方法4：

Array.prototype.method4 = function(){       //將數組進行排序       this.sort();       //定義結果數組       var arr[this[0]];       for(var i = 1; i < this.length; i++){  //從數組第二項開始循環遍歷數組         //判斷相鄰兩個元素是否相等，如果相等說明數據重復，否則將元素寫入結果數組         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都用到了數組的indexOf()方法，此方法主要用來查找元素在數組中第一次出現的位置。比較浪費資源和時間。
方法2使用的是hash表，把已經出現過的元素通過下標形式寫入到一個object內，下標的引用要比用數組indexOf()方法搜索節省時間。
方法4是先將數組排序，然后一次比較相鄰的兩個元素的值，排序使用的是js原生的sort()方法。
讀者可以自行編寫程序測試四種方法的效率如何。例如：首先利用隨機函數生成一個50000長度的隨機數數組，然后分別用四種方法進行執行，記錄程序運行時間進行比較四種方法的優劣。

方法五、個人比較喜歡的一個函數

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;}

總體思路是把數組元素逐個搬運到另一個數組，搬運的過程中檢查這個元素是否有重復，如果有就直接丟掉。從嵌套循環就可以看出，這種方法效率極低。我們可以用一個hashtable的結構記錄已有的元素，這樣就可以避免內層循環。恰好，在Javascript中實現hashtable是極為簡單的，改進如下：

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;}

完整測試代碼

<script>var h_hewenqiArray = new Array();h_hewenqiArray[0] = "VeVB.COm";h_hewenqiArray[1] = "easysector";h_hewenqiArray[2] = "VeVB.COm";h_hewenqiArray[3] = "keleyi";h_hewenqiArray[4] = "keleyi";h_hewenqiArray[5] = "武林網";h_hewenqiArray[6] = "VeVB.COm";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("原始數組元素個數："+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://VeVB.COm.com}var h_hewenqiResult = hovercUnique(h_hewenqiArray);var h_resultLength = h_hewenqiResult.length;document.write("<br />去重復后數組元素個數：" + h_resultLength + "<br />");for (var i = 0; i < h_resultLength; i++) {document.write(h_hewenqiResult[i] + "<br />");} </script>

以下是其它網友的補充

復制代碼代碼如下:

 
/// <summary>2 /// 回車鍵按鈕事件（此方法需要在頁面加載完后執行，比如在Jquery中的ready中調用）--方法一 
/// </summary> 
/// 調用示例： 
/// 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); //返回結果：, 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> 
/// 回車鍵按鈕事件（此方法需要在頁面加載完后執行，比如在Jquery中的ready中調用）--方法二 
/// </summary> 
/// 調用示例： 
/// 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); //返回結果：, 2, 3, 4, 5, 6, 7 
Array.prototype.deleteEleReg = function () { 
return this.reverse().join(",").match(/([^,]+)(?!.*/1)/ig).reverse(); 
} 
/// <summary> 
/// 回車鍵按鈕事件（此方法需要在頁面加載完后執行，比如在Jquery中的ready中調用）--方法三 
/// </summary> 
/// <param name="array">數組</param> 
/// 調用示例： 
/// 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)); //返回結果：, 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" /> 
/// 回車鍵按鈕事件（此方法需要在頁面加載完后執行，比如在Jquery中的ready中調用）--方法四 
/// </summary> 
/// 調用示例： 
/// 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); //返回結果：, 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; //防止循環到prototype 
if (b[d] != 1) { 
a.push(d); 
b[d] = 1; 
} 
} 
return a; 
} 