JS專題之數組去重

前言

數組去重在日常開發中的使用頻率還是較高的，也是網上隨便一抓一大把的話題，所以，我寫這篇文章目的在於歸納和總結，既然很多人都在提的數組去重，自己到底瞭解多少呢。又或者是如果自己在開發中遇到了去重的需求，自己能想到更好的解決方案嗎。

這次我們來理一理怎麼做數組去重才能做得最合適，既要考慮兼容性，也要考慮性能和代碼的優雅。

我的學習路徑是模仿冴羽(github: mqyqingfeng)的學習方式，感謝像冴羽這樣優秀的人在前面領跑，我不想光看不做，所以多實踐多輸出，希望未來能走出我自己的路。

一、入門方案

function unique(origin) {
    var result = [];
    for(var i = 0; i < origin.length; i++) {
        var arrayItem = origin[i];

        for(var j= 0; j< result.length; j++) {
            var resultItem = result[j];
            
            // 如果在結果數組循環中找到了該元素，則跳出循環，進入下一個源數組元素的判斷
            if(resultItem === arrayItem) {
                break;
            }
        }
        
        // 如果把結果數組循環完都沒有找到該元素，就將該元素壓入結果數組中
        if(j === result.length) {
            result.push(arrayItem);
        }
    }
    return result;
}

var array = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0];
console.log(unique(array));  // ["a", "b", "c", "1", 0, 1, ""]

以上代碼是最簡單實現數組去重的方式，優點在於兼容性極好，缺點就是兩次 for 循環，時間複雜度爲 O(n^2)，性能較差。

二、數組的 indexOf 屬性

數組中的 indexOf 屬性是 ES5 的規範，只有 IE8 及更早版本不支持該方法。相對來說，如果你不需要兼容 IE8 的話，儘量用 indexOf 來判斷一個元素是否在數組中。

function unique(origin){
    var result = [];
    for(var i = 0; i< origin.length; i++) {
        var item = origin[i];
        if(result.indexOf(item) === -1) {
            result.push(item);
        }
    }
    return result;
}

三、數組的 filter 屬性

數組的 filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

filter 的回調有三個參數，其中第三個參數是當前元素屬於的數組對象，這樣我們可以繼續利用 indexOf 屬性啦。

function unique(origin) {
    var result = origin.filter(function (item, index, array){
        // 獲取元素在源數組的位置，只返回那些索引等於當前元素索引的值。
        return array.indexOf(item) === index;
    });
    return result;
}

filter 兼容到 IE9, 這種方法沒有 for 循環，主要利用了 filter 和 indexOf 屬性，所以代碼相對比較優雅。

四、利用 Object 的 key value

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        // 如果鍵對應的值，爲真，意味着對象的鍵中已經有重複的鍵了。
        if(!hashTable[origin[i]]) {
        // 將元素作爲對象的鍵，默認鍵對應的值爲 true, 
            hashTable[origin[i]] = true;
            
            // 如果對象中沒有這個鍵，則將這個元素放入結果數組中去。
            result.push(origin[i]);
        }
    }
    return result;
}

這種方案的事件複雜度爲 O(n), 但是對象的鍵，默認是字符串類型，這意味着什麼呢，數字 1 和 字符串 '1'，在鍵中是相等的，所以，上面這種方法不適合字符串和數字混合的去重。

所以我們將元素的類型也放入對象的鍵中：

function unique(origin) {
    var result = [];
    var hashTable = {};
    for(var i = 0; i< origin.length; i++) {
        var current = origin[i];
        // 字符串拼接元素的類型和元素
        var key = typeof(current) + current;
        if(!hashTable[key]) {
            hashTable[key] = true;
            result.push(current);
        }
    }
    return result;
}

五、數組的 sort 方法

function unique(origin) {
    return origin.concat.sort().filter(function(item, index, array) {
        // !index 表示第 0 個元素應該被返回。
        return !index || item !== origin[index-1]
    })
}

function unique(array) {
    array.sort(); // 排序字符串
    array.sort(function(a, b) {
        return a-b; // 排序數字
    })
    
    for(let i=0; i<array.length; i++) {
        if(array[i] === array[i+1]) {
            array.splice(i, 1);
            i--; // 應該將前一個數刪除，而不是刪除後一個數。是因爲元素被刪除之後，後面元素的索引會遷移，所以要 i--;
        }
    }
    return array;
}

sort 方法的優點在於利用了排序，返回後一個和前一個不相等的元素。比較簡潔和直觀。缺點在於改變了元素的本來的排序位置。

六、ES6 Set

ES6 提供了新的數據結構 Set,它類似於數組，但是成員的值都是唯一的，沒有重複的值。向 Set 加入值的時候，不會發生類型轉變，所以 5 和 '5' 是兩個不同的值。Set內部判斷兩個值是否相同，用的是類似於 "==="的算法，但是區別是，在set內部認爲NaN 等於 NaN ；

Set 可以轉換爲數組，所以很容易實現去重

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

七、ES6 Map

ES6 新增了 Map 數據結果，通過 has 和 set 方法就能很方便的對前面的 object key value 方案進行優化。

function unique(origin){
    const map = new Map()
    return origin.filter((item) => !map.has(item) && map.set(item, true))
}

八、類型判斷

一些常見的數據類型是 === 和 indexOf 是無法檢測的，舉個例子：

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

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

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

console.log(1 === new String('1'))  // false;

var arr = [NaN];
console.log(arr.indexOf(NaN)); // -1

所以在判斷的時候，如果數據裏有 NaN 和對象時要避免使用 indexOf 和 ===;

前面 Set 那裏說過了，所以 Set 方法是可以去重 NaN的。

總結

數據去重在網上已經看煩了，但還是想專門寫一篇文章來實踐和總結，能在工作中多幾個思路也是極好的。感謝那些熱愛分享和喜歡輸出的人。

歡迎關注我的個人公衆號“謝南波”，專注分享原創文章。

掘金專欄 JavaScript 系列文章

1. JavaScript之變量及作用域
2. JavaScript之聲明提升
3. JavaScript之執行上下文
4. JavaScript之變量對象
5. JavaScript之原型與原型鏈
6. JavaScript之作用域鏈
7. JavaScript之閉包
8. JavaScript之this
9. JavaScript之arguments
10. JavaScript之按值傳遞
11. JavaScript之例題中徹底理解this
12. JavaScript專題之模擬實現call和apply
13. JavaScript專題之模擬實現bind
14. JavaScript專題之模擬實現new
15. JS專題之事件模型
16. JS專題之事件循環
17. JS專題之去抖函數
18. JS專題之節流函數
19. JS專題之函數柯里化
20. JS專題之數組去重