摘要：基本操作數(shù)組去重寫在前面數(shù)組去重經(jīng)常出現(xiàn)在前端招聘的筆試題里，比如有數(shù)組，請(qǐng)用實(shí)現(xiàn)去重函數(shù)，使得返回作為筆試題，考點(diǎn)有二正確。基本介紹文章主要是對(duì)數(shù)組去重的常用方法進(jìn)行介紹。

JavaScript 數(shù)組去重經(jīng)常出現(xiàn)在前端招聘的筆試題里，比如：

有數(shù)組 var arr = ["a", "b", "c", "1", 0, "c", 1, "", 1, 0]，請(qǐng)用 JavaScript 實(shí)現(xiàn)去重函數(shù) unqiue，使得 unique(arr) 返回 ["a", "b", "c", "1", 0, 1, ""]

作為筆試題，考點(diǎn)有二：

正確。別小看這個(gè)考點(diǎn)，考慮到 JavaScript 經(jīng)常要在瀏覽器上運(yùn)行，在千姿百態(tài)的各種瀏覽器環(huán)境下要保障一個(gè)函數(shù)的正確性可不是一件簡(jiǎn)單的事，不信你繼續(xù)讀完這篇博客。
性能。雖然大部分情況下JavaScript語(yǔ)言本身（狹義范疇，不包含DOM等延拓）不會(huì)導(dǎo)致性能問(wèn)題，但很不幸這是一道考題，因此面試官們還是會(huì)把性能作為一個(gè)考點(diǎn)。

所有的方法都來(lái)自網(wǎng)上，學(xué)到了才是自己的！！
然后，寫在前面，帶上我們可愛的小伙伴。

文章主要是對(duì)js數(shù)組去重的常用方法進(jìn)行介紹。JS去重，看起來(lái)簡(jiǎn)單，但是其實(shí)暗藏許多的小竅門。考的不僅僅是實(shí)現(xiàn)這個(gè)功能，更能看出你對(duì)計(jì)算機(jī)程序執(zhí)行的深入理解。下面將從數(shù)組去重的方法進(jìn)行詳細(xì)的了解。

兩層for循環(huán)，for循環(huán)中每次從原數(shù)組中取出一個(gè)元素，用這個(gè)元素循環(huán)與結(jié)果數(shù)組對(duì)比。若結(jié)果數(shù)組中沒(méi)有該元素，則存到結(jié)果數(shù)組中。

Array.prototype.unique_towFor = Array.prototype.unique_towFor || function(){
    var result = [];
    if(this.length <= 0) return result;
    result.push(this[0]);
    for(var i = 1; i < this.length; i++){
        var notIn = true;
        for(var j = 0; j < result.length; j++){
            if(this[i] == result[j]){
                notIn = false;
                break;
            }
        }
        if(notIn){
            result.push(this[i]);
        }
    }
    return result;
}

算法的基本思想，就是，把去重后的結(jié)果放在一個(gè)臨時(shí)數(shù)組中，對(duì)原來(lái)數(shù)組的元素與臨時(shí)數(shù)組元素比較，臨時(shí)數(shù)組中不存在這個(gè)元素的，放入臨時(shí)數(shù)組。

Array.prototype.unique_tempArray = Array.prototype.unique_tempArray || function(){
    var result = [];//臨時(shí)數(shù)組
    for(var i = 0; i < this.length; i++){
        if(result.indexOf(this[i]) == -1){
            result.push(this[i]);
        }
    }
    return result;
}

創(chuàng)建一個(gè)新的數(shù)組存放結(jié)果，和一個(gè)空對(duì)象。for循環(huán)時(shí)，每次取出一個(gè)元素與對(duì)象進(jìn)行對(duì)比，如果這個(gè)元素不重復(fù)，則把它存放到結(jié)果數(shù)組中，同時(shí)把這個(gè)元素的內(nèi)容作為對(duì)象的一個(gè)屬性，并賦值，存入到對(duì)象中。這個(gè)方法用作統(tǒng)計(jì)也很方便。

Array.prototype.unique_objectArray = Array.prototype.unique_objectArray || function(){
    var result = [];
    var obj = {};
    for(var i = 0; i < this.length; i++){
        if(!obj[this[i]]){
            obj[this[i]] = 1;
            result.push(this[i]);
        }else{
            obj[this[i]] ++;
        }
    }
    return result;
}

先把數(shù)組排序，然后比較相鄰的兩個(gè)值。 排序的時(shí)候用的JS原生的sort方法，JS引擎內(nèi)部用的是快速排序，此方法速度比較快！無(wú)語(yǔ)中。

Array.prototype.unique_sortArray = Array.prototype.unique_sortArray || function(){
    this.sort();
    var result = [this[0]];
    for(var i = 1; i < this.length; i++){
        if(this[i] !== result[result.length - 1] ){
            result.push(this[i]);
        }
    }
    return result;
}

[ ] Set對(duì)象可以是任何類型的單個(gè)值的集合。它是ES6新增的有序列表集合，它不會(huì)包含重復(fù)項(xiàng)。之前我們通常用對(duì)象(Object)或者數(shù)組(Array)來(lái)實(shí)現(xiàn)沒(méi)有重復(fù)項(xiàng)的集合。

[ ] Array.from()方法可以將一個(gè)類數(shù)組對(duì)象或可遍歷對(duì)象轉(zhuǎn)換成真正的數(shù)組。

Array.prototype.unique_es6SetArray = Array.prototype.unique_esSetArray || function(){
    return Array.from(new Set(this));
}

[ ] filter()方法使用指定的函數(shù)測(cè)試所有元素，并創(chuàng)建一個(gè)包含所有通過(guò)測(cè)試的元素的新數(shù)組。

Array.prototype.unique_filterArray = Array.prototype.unique_filterArray || function(){
    return this.filter(function(item, index, arr){
        return arr.indexOf(item) === index;
    });
}

既然可以使用filter的方法，那么也可以使用filter加object的方法，這里使用Map對(duì)象。

Array.prototype.unique_es6MapArray = Array.prototype.unique_es6MapArray || function(){
    const seen = new Map();
    return this.filter(function(item, index, arr){
        !seen.has(item) && seen.set(item, 1);
    });
}

這里的filter函數(shù)可以簡(jiǎn)化，當(dāng)然也有人這樣寫

Array.prototype.unique_es6MapArray = Array.prototype.unique_es6MapArray || function(){
    const seen = new Map();
    return this.filter(
        (a) => !seen.has(a) && seen.set(a, 1)
    );
}

最后，可以使用第三方庫(kù)函數(shù)jquery和underscore或者lodash
下面以lodash和underscore為例

Array.prototype.unique_3partyArray = Array.prototype.unique_3partyArray || function(){
    return _.uniq(arr);//要先引入lodash.js或者underscore.js
}

以上的所有方法，都來(lái)自網(wǎng)上。
所有的方法，都必須腳踏實(shí)地，在具體應(yīng)用場(chǎng)景下去分析、去選擇，我們應(yīng)該按照具體的情況，來(lái)選擇方法。
因?yàn)闉g覽器的多樣性，前端的應(yīng)用場(chǎng)景經(jīng)常很復(fù)雜，性能優(yōu)化充滿挑戰(zhàn)，也充滿機(jī)遇。
學(xué)會(huì)了才是自己的，知道會(huì)用會(huì)寫，才是我們最終的目標(biāo)。

方法中，建議參考underscore.js的源代碼的方法。以下是underscore.js中uniq的源碼。

// Produce a duplicate-free version of the array. If the array has already
  // been sorted, you have the option of using a faster algorithm.
  // Aliased as `unique`.
  _.uniq = _.unique = function(array, isSorted, iteratee, context) {
    if (!_.isBoolean(isSorted)) {
      context = iteratee;
      iteratee = isSorted;
      isSorted = false;
    }
    if (iteratee != null) iteratee = cb(iteratee, context);
    var result = [];
    var seen = [];
    for (var i = 0, length = getLength(array); i < length; i++) {
      var value = array[i],
          computed = iteratee ? iteratee(value, i, array) : value;
      if (isSorted) {
        if (!i || seen !== computed) result.push(value);
        seen = computed;
      } else if (iteratee) {
        if (!_.contains(seen, computed)) {
          seen.push(computed);
          result.push(value);
        }
      } else if (!_.contains(result, value)) {
        result.push(value);
      }
    }
    return result;
  };

文檔說(shuō)明如下：

uniq_.uniq(array, [isSorted], [iteratee]) Alias: unique

Produces a duplicate-free version of the array, using === to test object equality. In particular only the first occurence of each value is kept. If you know in advance that the array is sorted, passing true for isSorted will run a much faster algorithm. If you want to compute unique items based on a transformation, pass an iteratee function.

_.uniq([1, 2, 1, 4, 1, 3]);
=> [1, 2, 4, 3]

本文僅只用于學(xué)習(xí)、研究和交流目的，我也是學(xué)習(xí)過(guò)后慢慢總結(jié)過(guò)來(lái)的，如果有什么錯(cuò)誤或者好的建議，歡迎大家批評(píng)指正！