摘要：數組去重雙層循環使用雙層嵌套循環是最原始的方法用來存儲結果如果是唯一的，那么執行完循環，等于外層循環內層循環當和相等時，跳出循環。否則說明元素唯一，這時成立，將此元素添加到中。它類似于數組，但是成員的值都是唯一的，沒有重復的值。

使用雙層嵌套循環是最原始的方法：

var array = ["a","b","a"];

function unique(array) {
    // res用來存儲結果
    var res = [];
    for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++ ) {
            if (array[i] === res[j]) {
                break;
            }
        }
        // 如果array[i]是唯一的，那么執行完循環，j等于resLen
        if (j === resLen) {
            res.push(array[i])
        }
    }
    return res;
}

console.log(unique(array)); // ["a","b"]

外層循環 array 內層循環 res, 當 array[i] 和 res[j] 相等時，跳出循環。否則說明元素唯一，這時 j === resLen 成立，將此元素添加到 res 中。

使用 indexOf 可以返回某個元素在數組中的索引，不存在則返回 -1，可以用來判斷某個值在數組中是否存在。

var array = ["a","b","a"];

function unique(array) {
    var res = [];
    for (var i = 0, len = array.length; i < len; i++) {
        var current = array[i];
        if (res.indexOf(current) === -1) {
            res.push(current)
        }
    }
    return res;
}

console.log(unique(array));

試想我們先將要去重的數組使用 sort 方法排序后，相同的值就會被排在一起，然后我們就可以只判斷當前元素與上一個元素是否相同，相同就說明重復，不相同就添加進 res，讓我們寫個 demo：

var array = [1, 1, "1"];

function unique(array) {
    var res = [];
    var sortedArray = array.concat().sort();
    var seen;
    for (var i = 0, len = sortedArray.length; i < len; i++) {
        // 如果是第一個元素或者相鄰的元素不相同
        if (!i || seen !== sortedArray[i]) {
            res.push(sortedArray[i])
        }
        seen = sortedArray[i];
    }
    return res;
}

console.log(unique(array));

如果我們對一個已經排好序的數組去重，這種方法效率肯定高于使用 indexOf。

ES5 提供了 filter 方法，我們可以用來簡化外層循環：

比如使用 indexOf 的方法：

var array = [1, 2, 1, 1, "1"];

function unique(array) {
    var res = array.filter(function(item, index, array){
        return array.indexOf(item) === index;
    })
    return res;
}

console.log(unique(array));

排序去重的方法：

var array = [1, 2, 1, 1, "1"];

function unique(array) {
    return array.concat().sort().filter(function(item, index, array){
        return !index || item !== array[index - 1]
    })
}

console.log(unique(array));

這種方法是利用一個空的 Object 對象，我們把數組的值存成 Object 的 key 值，比如 Object[value1] = true，在判斷另一個值的時候，如果 Object[value2]存在的話，就說明該值是重復的。示例代碼如下：

var array = [1, 2, 1, 1, "1"];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true)
    })
}

console.log(unique(array)); // [1, 2]

我們可以發現，是有問題的，因為 1 和 "1" 是不同的，但是這種方法會判斷為同一個值，這是因為對象的鍵值只能是字符串，所以我們可以使用 typeof item + item 拼成字符串作為 key 值來避免這個問題：

var array = [1, 2, 1, 1, "1"];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}

console.log(unique(array)); // [1, 2, "1"]

然而，即便如此，我們依然無法正確區分出兩個對象，比如 {value: 1} 和 {value: 2}，因為 typeof item + item 的結果都會是 object[object Object]，不過我們可以使用 JSON.stringify 將對象序列化：

var array = [{value: 1}, {value: 1}, {value: 2}];

function unique(array) {
    var obj = {};
    return array.filter(function(item, index, array){
        console.log(typeof item + JSON.stringify(item))
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (obj[typeof item + JSON.stringify(item)] = true)
    })
}

console.log(unique(array)); // [{value: 1}, {value: 2}]

隨著 ES6 的到來，去重的方法又有了進展，比如我們可以使用 Set 和 Map 數據結構，以 Set 為例，ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。

是不是感覺就像是為去重而準備的？讓我們來寫一版：

var array = [1, 2, 1, 1, "1"];

function unique(array) {
   return Array.from(new Set(array));
}

console.log(unique(array)); // [1, 2, "1"]

甚至可以再簡化下：

function unique(array) {
    return [...new Set(array)];
}

還可以再簡化下：

var unique = (a) => [...new Set(a)]

此外，如果用 Map 的話：

function unique (arr) {
    const seen = new Map()
    return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}

去重的方法就到此結束了，然而要去重的元素類型可能是多種多樣，除了例子中簡單的 1 和 "1" 之外，其實還有 null、undefined、NaN、對象等，那么對于這些元素，之前的這些方法的去重結果又是怎樣呢？

在此之前，先讓我們先看幾個例子：

var str1 = "1";
var str2 = new String("1");

console.log(str1 == str2); // true
console.log(str1 === str2); // false

console.log(null == null); // true
console.log(null === null); // true

console.log(undefined == undefined); // true
console.log(undefined === undefined); // true

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false

console.log(/a/ == /a/); // false
console.log(/a/ === /a/); // false

console.log({} == {}); // false
console.log({} === {}); // false

那么，對于這樣一個數組

var array = [1, 1, "1", "1", null, null, undefined, undefined, new String("1"), new String("1"), /a/, /a/, NaN, NaN];

以上各種方法去重的結果到底是什么樣的呢？

我特地整理了一個列表，我們重點關注下對象和 NaN 的去重情況：

想了解為什么會出現以上的結果，看兩個 demo 便能明白：

// demo1
var arr = [1, 2, NaN];
arr.indexOf(NaN); // -1

indexOf 底層還是使用 === 進行判斷，因為 NaN ==== NaN 的結果為 false，所以使用 indexOf 查找不到 NaN 元素

// demo2
function unique(array) {
   return Array.from(new Set(array));
}
console.log(unique([NaN, NaN])) // [NaN]

Set 認為盡管 NaN === NaN 為 false，但是這兩個元素是重復的。