溫故js系列（7）-數組去重由慢到快由繁到簡

前端學習：教程&開發模塊化/規範化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源彙總

歡迎提issues斧正：數組去重

JavaScript-數組去重由慢到快由繁到簡演化

indexOf去重

Array.prototype.unique1 = function() {
      var arr = [];
      for (var i = 0; i < this.length; i++) {
        var item = this[i];
        if (arr.indexOf(item) === -1) {
              arr.push(item);
        }
      }
      return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique1(); //[1, 2, 3, "4", 4, "34"]

//filter+indexOf寫法，箭頭函數爲ES6新寫法。
Array.prototype.unique1 = function() {
    return this.filter((item, index, arr) => arr.indexOf(item) === index);
}

indexOf的思想就是遍歷一個數組的字符，判斷這個字符在另外一個數組存不存在，不存在就把這個字符也弄一個到結果數組裏去。在 IE6-8 下，數組的 indexOf 方法還不存在（雖然這已經算有點古老的話題了O(∩_∩)O~），可是，程序員就要寫一個indexOf方法：

var indexOf = [].indexOf ? function(arr, item) {
      return arr.indexOf(item);
} :
function indexOf(arr, item) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] === item) {
              return i;
        }
      }
      return -1;
}
 
Array.prototype.unique2 = function() {
      var arr = [];
      for (var i = 0; i < this.length; i++) {
        var item = this[i];
        if (arr.indexOf(item) === -1) {
              arr.push(item);
        }
      }
      return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique2(); //[1, 2, 3, "4", 4, "34"]

indexOf還能夠以這樣的去重思路：判斷當前字符在數組中出現的位置是否是第一次出現的位置，若是是就把字符放到結果數組中。在去重過程當中，原數組都是不變的。

Array.prototype.unique3 = function(){
    var arr = [this[0]]; 
    for(var i = 1; i < this.length; i++){
        if (this.indexOf(this[i]) == i){
            arr.push(this[i]);
        } 
    }
    return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique3(); //[1, 2, 3, "4", 4, "34"]

hash去重

以上indexOf正確性沒問題，但性能上，兩重循環會下降性能。那咱們就用hash。

Array.prototype.unique4 = function() {
      var arr = [];
      var hash = {};
      for (var i = 0; i < this.length; i++) {
        var item = this[i];
        var key = typeof(item) + item
        if (hash[key] !== 1) {
              arr.push(item);
              hash[key] = 1;
        }
      } 
      return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique4(); //[1, 2, 3, "4", 4, "34"]

hash去重的核心是構建了一個 hash 對象來替代 indexOf。以空間換時間。注意在 JavaScript 裏，對象的鍵值只能是字符串，所以須要var key = typeof(item) + item 來區分數值 1 和字符串 '1' 等狀況。（固然，ES6提供了Map數據結構。它相似於對象，也是鍵值對的集合，可是「鍵」的範圍不限於字符串，各類類型的值（包括對象）均可以看成鍵。也就是說，Object結構提供了「字符串—值」的對應，Map結構提供了「值—值」的對應，是一種更完善的Hash結構現。）

那若是你想要'4' 和 4 被認爲是相同的話（其餘方法同理）

Array.prototype.unique5 = function(){
    var arr=[];
    var hash={};
    for(var i=0,len=this.length;i<len;i++){
        if(!hash[this[i]]){ 
            arr.push(this[i]);
            hash[this[i]]=true;
        }
    }
    return arr;
}
[1,2,3,'4',3,4,3,1,'34',2].unique5(); //[1, 2, 3, "4", "34"]

排序後去重

Array.prototype.unique6 = 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;
}
[1,2,3,'4',3,4,3,1,'34',2].unique6(); //[1, 2, 3, "34", "4", 4]

先把數組排序，而後比較相鄰的兩個值，排序的時候用的JS原生的sort方法，因此很是快。而這個方法的缺陷只有一點，比較字符時按照字符編碼的順序進行排序。因此會看到10排在2前面這種狀況。不過在去重中不影響。不過，解決sort的這個問題，是sort方法接受一個參數，這個參數是一個方法：

function compare(value1,value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
[1,2,5,2,10,3,20].sort(compare);  //[1, 2, 2, 3, 5, 10, 20]

Set去重

ES6提供了新的數據結構Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。如今瀏覽器正在全面支持，服務端的node也已經支持。

Array.prototype.unique7 = function(){
    return [...new Set(this)];
}
[1,2,3,'4',3,4,3,1,'34',2].unique7(); //[1, 2, 3, "4", 4, "34"]

方法庫

推薦一個方法庫Underscore.js，在node或瀏覽器js中都很受歡迎。

const _ = require('underscore');
_.uniq([1, 2, 1, 3, 1, 4]);  //[1, 2, 3, 4]

測試時間

以上方法都可以用一個簡單的方法去測試一下所耗費的時間,而後對各個方法作比較擇優：

console.time("test");
[1,2,3,'4',3,4,3,1,'34',2].unique7();
console.timeEnd("test");
==> VM314:3 test: 0.378ms

讓數據變得大一點，就隨機建立100萬個數：

var arr = [];
var num = 0;
for(var i = 0; i < 1000000; i++){
    num = Math.floor(Math.random()*100);
    arr.push(num);
}
console.time("test");
arr.unique7();
console.timeEnd("test");
==> VM325:3 test: 108025.815ms （比較數目越多，差距越大，更好選擇）

咱們平時使用數組去重的地方，視業務不一樣，需求量不同。但使用的方法則能夠視業務場景而選擇一個正確的合適的方法來寫代碼。更重要的是咱們的代碼要寫來讓別人看得懂...寫晦澀難懂的代碼切不作註釋只是裝得一手好逼。。。