摘要：前端學(xué)習(xí)教程開發(fā)模塊化規(guī)范化工程化優(yōu)化工具調(diào)試值得關(guān)注的博客面試前端資源匯總歡迎提斧正數(shù)組去重?cái)?shù)組去重由慢到快由繁到簡演化去重寫法，箭頭函數(shù)為新寫法。在去重過程中，原數(shù)組都是不變的。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。

前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：數(shù)組去重

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寫法，箭頭函數(shù)為ES6新寫法。
Array.prototype.unique1 = function() {
    return this.filter((item, index, arr) => arr.indexOf(item) === index);
}

indexOf的思想就是遍歷一個(gè)數(shù)組的字符，判斷這個(gè)字符在另一個(gè)數(shù)組存不存在，不存在就把這個(gè)字符也弄一個(gè)到結(jié)果數(shù)組里去。在 IE6-8 下，數(shù)組的 indexOf 方法還不存在（雖然這已經(jīng)算有點(diǎn)古老的話題了O(∩_∩)O~），但是，程序員就要寫一個(gè)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還可以以這樣的去重思路：判斷當(dāng)前字符在數(shù)組中出現(xiàn)的位置是不是第一次出現(xiàn)的位置，如果是就把字符放到結(jié)果數(shù)組中。在去重過程中，原數(shù)組都是不變的。

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"]

以上indexOf正確性沒問題，但性能上，兩重循環(huán)會(huì)降低性能。那我們就用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去重的核心是構(gòu)建了一個(gè) hash 對(duì)象來替代 indexOf。以空間換時(shí)間。注意在 JavaScript 里，對(duì)象的鍵值只能是字符串，因此需要var key = typeof(item) + item 來區(qū)分?jǐn)?shù)值 1 和字符串 "1" 等情況。（當(dāng)然，ES6提供了Map數(shù)據(jù)結(jié)構(gòu)。它類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。也就是說，Object結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)，Map結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的Hash結(jié)構(gòu)現(xiàn)。）

那如果你想要"4" 和 4 被認(rèn)為是相同的話（其他方法同理）

Array.prototype.unique5 = function(){
    var arr=[];
    var hash={};
    for(var i=0,len=this.length;i
排序后去重
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]
先把數(shù)組排序，然后比較相鄰的兩個(gè)值，排序的時(shí)候用的JS原生的sort方法，所以非?？臁６@個(gè)方法的缺陷只有一點(diǎn)，比較字符時(shí)按照字符編碼的順序進(jìn)行排序。所以會(huì)看到10排在2前面這種情況。不過在去重中不影響。不過，解決sort的這個(gè)問題，是sort方法接受一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)方法：
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提供了新的數(shù)據(jù)結(jié)構(gòu)Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。現(xiàn)在瀏覽器正在全面支持，服務(wù)端的node也已經(jīng)支持。
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"]

方法庫
推薦一個(gè)方法庫Underscore.js，在node或?yàn)g覽器js中都很受歡迎。
const _ = require("underscore");
_.uniq([1, 2, 1, 3, 1, 4]);  //[1, 2, 3, 4]

測試時(shí)間
以上方法均可以用一個(gè)簡單的方法去測試一下所耗費(fèi)的時(shí)間,然后對(duì)各個(gè)方法做比較擇優(yōu)：
console.time("test");
[1,2,3,"4",3,4,3,1,"34",2].unique7();
console.timeEnd("test");
==> VM314:3 test: 0.378ms
讓數(shù)據(jù)變得大一點(diǎn)，就隨機(jī)創(chuàng)建100萬個(gè)數(shù)：
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 （比較數(shù)目越多，差距越大，更好選擇）

我們平時(shí)使用數(shù)組去重的地方，視業(yè)務(wù)不同，需求量不一樣。但使用的方法則可以視業(yè)務(wù)場景而選擇一個(gè)正確的合適的方法來寫代碼。更重要的是我們的代碼要寫來讓別人看得懂...寫晦澀難懂的代碼切不做注釋只是裝得一手好逼。。。