摘要：工作過程中經(jīng)常會用到數(shù)組去重，用到的時候往往一時想不到好方法，所以這里來總結(jié)一下去重方法。和方法分別為添加成員方法和得到鍵值方法。因此，利用方法也可以實現(xiàn)數(shù)組的去重。

工作過程中經(jīng)常會用到數(shù)組去重，用到的時候往往一時想不到好方法，所以這里來總結(jié)一下去重方法。
使用es6去重代碼很簡單，而且ES6已經(jīng)相當普及了。所以先來介紹一下es6中的方法。

function unique (arr) {
  const seen = new Map()
  return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
let arr = [1, 2, 1, 3, "1", NaN, NaN, null, null, undefined, undefined, {}, {}];
console.log(uniMap(arr));  //[ 1, 2, 3, "1", NaN, null, undefined, {}, {} ]

Map是es6中新增的數(shù)據(jù)結(jié)構(gòu)，它類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。也就是說，Object 結(jié)構(gòu)提供了“字符串—值”的對應，Map 結(jié)構(gòu)提供了“值—值”的對應，是一種更完善的 Hash 結(jié)構(gòu)實現(xiàn)。
Map的has方法用于判斷map是否含有該鍵。set 和get 方法分別為添加成員方法和得到鍵值方法。
上述方法一方面利用了map的has和set方法，一方面利用了數(shù)組的 filter方法，返回結(jié)果為真的元素組成的數(shù)組。
注意
Map 的鍵實際上是跟內(nèi)存地址綁定的，只要內(nèi)存地址不一樣，就視為兩個鍵。這句話不好理解的話，可以這樣說如果 Map 的鍵是一個簡單類型的值（數(shù)字、字符串、布爾值），則只要兩個值嚴格相等，Map 將其視為一個鍵，比如0和-0就是一個鍵，布爾值true和字符串true則是兩個不同的鍵， 對象是不同的鍵；另外，undefined和null也是兩個不同的鍵。雖然NaN不嚴格相等于自身，但 Map 將其視為同一個鍵

function uniMap (arr) {
  return [...new Set(arr)];
}
let arr = [1, 2, 1, 3, "1", NaN, NaN, null, null, undefined, undefined, {}, {}];
console.log(uniMap(arr));  // [ 1, 2, 3, "1", NaN, null, undefined, {}, {} ]

Set 也是ES6 提供的新的數(shù)據(jù)結(jié)構(gòu)。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復的值。
Set 本身是一個構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu)，它也接受一個數(shù)組或具有iterator接口的數(shù)據(jù)結(jié)構(gòu)作為參數(shù)初始化。上述代碼中就是利用了這個特性來實現(xiàn)對數(shù)組的去重。
Set 具有add方法來添加某個值，返回set結(jié)構(gòu)本身。因此，利用add方法也可以實現(xiàn)數(shù)組的去重。例如：

const s = new Set();
function uniMap(arr)  {
    arr.forEach( item => s.add(item));
    return [...s];  // [ 1, 2, 3, "1" ]
}
// main
let arr = [1, 2, 1, 3, "1", 2, 2, 2];
console.log(uniMap(arr));

Array.from也是ES6中的新方法可以將 Set 結(jié)構(gòu)轉(zhuǎn)為數(shù)組。這就引出第三種使用set的數(shù)組去重方法：

// set3
function uniMap(arr) {
    return Array.from(new Set(arr));
}
let arr = [1, 2, 1, 3, "1", NaN, NaN, null, null, undefined, undefined, {}, {}];
console.log(uniMap(arr));  // [ 1, 2, 3, "1", NaN, null, undefined, {}, {} ]

注意
Set 內(nèi)部判斷兩個值是否不同，使用的算法叫做“Same-value-zero equality”，它類似于精確相等運算符（===），所以上述結(jié)果中 1 和 "1" 認為是不相同的，都被保留下來，主要的區(qū)別是NaN等于自身，而精確相等運算符認為NaN不等于自身。另外，兩個對象總是不相等的。

function uniMap(arr) {
    let res = [];
    for(let i = 0, arrLen = arr.length; i < arrLen; i += 1) {
        let j = 0, resLen = res.length;
        for(; j < resLen; j +=1) {
            if(arr[i] === res[j]) {
                break;
            }
        }
        if( j === resLen) {
            res.push(arr[i]);
        }
    }
    return res;  
}
// main
let arr = [1, 2, 1, 3, "1", 2, 2, 2];
console.log(uniMap(arr)); // [ 1, 2, 3, "1" ]
arr = [1, 2, 1, 3, "1", NaN, NaN, null, null, undefined, undefined, {}, {}];
console.log(uniMap(arr)); //[ 1, 2, 3, "1", NaN, NaN, null, undefined, {}, {} ]

我們使用循環(huán)嵌套，最外層循環(huán) array，里面循環(huán) res，如果 array[i] 的值跟 res[j] 的值相等，就跳出循環(huán)，如果都不等于，說明元素是唯一的，這時候 j 的值就會等于 res 的長度，根據(jù)這個特點進行判斷，將值添加進 res。
這個是最基本的方法，但是第一次寫還真犯了錯，無法去重。代碼是這樣的：

function uniMap(arr) {
    let res = [];
    for(let i = 0, arrLen = arr.length; i < arrLen; i += 1) {
        let j = 0, resLen = res.length;
        for(; j < resLen; j +=1) {
            if(arr[i] === res[j]) {
                break;
            }
            res.push(arr[i]);
        }
    }
    return res;   // []
}
// main
let arr = [1, 2, 1, 3, "1", 2, 2, 2];
console.log(uniMap(arr));

和上面代碼相比，就是res.push(arr[i]);放在了內(nèi)循環(huán)里，少了 j === resLen的判斷，就得到了空數(shù)組。原因是 初始的時候res.length = 0，不會進到內(nèi)循環(huán)，所以res始終為空。果然眼高手低啊~

// 雙重循環(huán)2 
function uniMap(arr) {
    let res = [];
    for(let i = 0, arrLen = arr.length; i < arrLen; i += 1) {
        if( res.indexOf(arr[i]) === -1) {
            res.push(arr[i]);
        }
    }
    return res;    
}
// main
let arr = [1, 2, 1, 3, "1", 2, 2, 2];
console.log(uniMap(arr)); // [ 1, 2, 3, "1" ]
arr = [1, 2, 1, 3, "1", NaN, NaN, null, null, undefined, undefined, {}, {}];
console.log(uniMap(arr)); // [ 1, 2, 3, "1", NaN, NaN, null, undefined, {}, {} ]

// filter方法
function uniMap(arr) {
    let res = [];
    return res = arr.filter( (item , index) => {
        return arr.indexOf(item) === index;
    })   //[ 1, 2, 3, "1", null, undefined ]
}
// main
let arr = [1, 2, 1, 3, "1", NaN, NaN, null, null, undefined, undefined, {}, {}];
console.log(uniMap(arr)); // [ 1, 2, 3, "1", null, undefined, {}, {} ]

此處的filter方法可以和方法3，4排列組合用~~其實方法1也利用了filter方法（filter人氣高啊）filter方法原理已經(jīng)說過，忘記的往上翻~

// object
function uniMap(arr) {
    let obj = {};
    return arr.filter( item => {
        return obj.hasOwnProperty(item) ? false : (obj[item] = true);
    })  
}
// main
let arr = [1, 2, 1, 3, "1", 2, 2, 2, NaN, NaN, null, null, undefined, undefined];
console.log(uniMap(arr)); // [ 1, 2, 3, NaN, null, undefined ]

上述代碼原理是利用一個空的 Object 對象，我們把數(shù)組的值存成 Object 的 key 值，比如 Object[value1] = true，在判斷另一個值的時候，如果 Object[value2]存在的話，就說明該值是重復的。從結(jié)果可以看到，他把數(shù)字 1 和字符串 "1"當成了同一個字符，因為對象的key值均是字符串，數(shù)字1被轉(zhuǎn)換為字符串了，因此該方法適用于你想把數(shù)字和字符串去重的場合。

去重的方法就到此結(jié)束了，然而根據(jù)上面的結(jié)果可以看到，對于特殊的數(shù)據(jù)類型比如：null、undefined、NaN、對象等，不同的去重方法其實結(jié)果是不同的。那么下面給個總結(jié)和分析。
對于例子中的這樣一個數(shù)組：
[1, 2, 1, 3, "1", 2, 2, 2, NaN, NaN, null, null, undefined, undefined];

之所以出現(xiàn)上面的結(jié)果，先看一下幾個判斷：

console.log(null === null);  // true
console.log(undefined === undefined); // true
console.log(NaN === NaN);  // false
console.log({} === {});  // false

再結(jié)合 indexOf 是使用 === 判斷，以及set map 也使用 === 判斷但是認為 NaN 和 NaN 相等，便可以分析出來。

注意
對于數(shù)組元素和去重不是上述類型和結(jié)果的，那么針對你想要的去重去靈活修改代碼，不可以生搬硬套~~