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

工作過(guò)程中經(jīng)常會(huì)用到數(shù)組去重，用到的時(shí)候往往一時(shí)想不到好方法，所以這里來(lái)總結(jié)一下去重方法。
使用es6去重代碼很簡(jiǎn)單，而且ES6已經(jīng)相當(dāng)普及了。所以先來(lái)介紹一下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)，它類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。也就是說(shuō)，Object 結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)，Map 結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。
Map的has方法用于判斷map是否含有該鍵。set 和get 方法分別為添加成員方法和得到鍵值方法。
上述方法一方面利用了map的has和set方法，一方面利用了數(shù)組的 filter方法，返回結(jié)果為真的元素組成的數(shù)組。
注意
Map 的鍵實(shí)際上是跟內(nèi)存地址綁定的，只要內(nèi)存地址不一樣，就視為兩個(gè)鍵。這句話不好理解的話，可以這樣說(shuō)如果 Map 的鍵是一個(gè)簡(jiǎn)單類型的值（數(shù)字、字符串、布爾值），則只要兩個(gè)值嚴(yán)格相等，Map 將其視為一個(gè)鍵，比如0和-0就是一個(gè)鍵，布爾值true和字符串true則是兩個(gè)不同的鍵， 對(duì)象是不同的鍵；另外，undefined和null也是兩個(gè)不同的鍵。雖然NaN不嚴(yán)格相等于自身，但 Map 將其視為同一個(gè)鍵

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ù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。
Set 本身是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Set數(shù)據(jù)結(jié)構(gòu)，它也接受一個(gè)數(shù)組或具有iterator接口的數(shù)據(jù)結(jié)構(gòu)作為參數(shù)初始化。上述代碼中就是利用了這個(gè)特性來(lái)實(shí)現(xiàn)對(duì)數(shù)組的去重。
Set 具有add方法來(lái)添加某個(gè)值，返回set結(jié)構(gòu)本身。因此，利用add方法也可以實(shí)現(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)部判斷兩個(gè)值是否不同，使用的算法叫做“Same-value-zero equality”，它類似于精確相等運(yùn)算符（===），所以上述結(jié)果中 1 和 "1" 認(rèn)為是不相同的，都被保留下來(lái)，主要的區(qū)別是NaN等于自身，而精確相等運(yùn)算符認(rèn)為NaN不等于自身。另外，兩個(gè)對(duì)象總是不相等的。

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)，如果都不等于，說(shuō)明元素是唯一的，這時(shí)候 j 的值就會(huì)等于 res 的長(zhǎng)度，根據(jù)這個(gè)特點(diǎn)進(jìn)行判斷，將值添加進(jìn) res。
這個(gè)是最基本的方法，但是第一次寫還真犯了錯(cuò)，無(wú)法去重。代碼是這樣的：

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ù)組。原因是 初始的時(shí)候res.length = 0，不會(huì)進(jìn)到內(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排列組合用~~其實(shí)方法1也利用了filter方法（filter人氣高啊）filter方法原理已經(jīng)說(shuō)過(guò)，忘記的往上翻~

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

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

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

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

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

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

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