再談 javascript 數組去重

前言

數組去重方法老生常談，既然是常談，我也來談談

雙層循環

也許咱們首先想到的是使用 indexOf 來循環判斷一遍，但在這個方法以前，讓咱們先看看最原始的方法：

var array = [1,1,'1','1'];
function unique(array) {
  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))  // [1, '1']

在這個方法中，咱們使用循環嵌套，最外層循環 array, 裏面循環 res, 若是 array[i]的值跟 res[j] 的值相等，就跳出循環，若是都不等於，說明元素是惟一的，這時候j的值就會等於 res 的長度，根據這個特色進行判斷，將值添加進 res。

看起來很簡單吧，之因此要講一講這個方法，是由於兼容性好。

indexOf

咱們能夠用 indexOf 簡化內層的循環：

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

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。

unique API

知道了這兩種方法後，咱們能夠去嘗試寫一個名爲 unique 的工具函數，咱們根據一個參數 isSorted 判斷傳入的數組是不是已排序的，若是爲 true，咱們就判斷相鄰元素是否相同，若是爲 false，咱們就使用 indexOf 進行判斷

var array1 = [1, 2, '1', 2, 1];
var array2 = [1, 1, '1', 2, 2];

// 初版
function unique(array, isSorted) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        if (isSorted) {
            if (!i || seen !== value) {
                res.push(value)
            }
            seen = value;
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }        
    }
    return res;
}

console.log(unique(array1)); // [1, 2, "1"]
console.log(unique(array2, true)); // [1, "1", 2]

優化

儘管 unqique 已經能夠試下去重功能，可是爲了讓這個 API 更增強大，咱們來考慮一個需求：

新需求：字母的大小寫視爲一致，好比'a'和'A'，保留一個就能夠了！

雖然咱們能夠先處理數組中的全部數據，好比將全部的字母轉成小寫，而後再傳入unique函數，可是有沒有方法能夠省掉處理數組的這一遍循環，直接就在去重的循環中作呢？讓咱們去完成這個需求：

var array3 = [1, 1, 'a', 'A', 2, 2];

// 第二版
// iteratee 英文釋義：迭代 重複
function unique(array, isSorted, iteratee) {
    var res = [];
    var seen = [];

    for (var i = 0, len = array.length; i < len; i++) {
        var value = array[i];
        var computed = iteratee ? iteratee(value, i, array) : value;
        if (isSorted) {
            if (!i || seen !== computed) {
                res.push(value)
            }
            seen = computed;
        }
        else if (iteratee) {
            if (seen.indexOf(computed) === -1) {
                seen.push(computed);
                res.push(value);
            }
        }
        else if (res.indexOf(value) === -1) {
            res.push(value);
        }        
    }
    return res;
}

console.log(unique(array3, false, function(item){
    return typeof item == 'string' ? item.toLowerCase() : item
})); // [1, "a", 2]

在這一版也是最後一版的實現中，函數傳遞三個參數：

• array：表示要去重的數組，必填

• isSorted：表示函數傳入的數組是否已排過序，若是爲 true，將會採用更快的方法進行去重

• iteratee：傳入一個函數，能夠對每一個元素進行從新的計算，而後根據處理的結果進行去重

至此，咱們已經仿照着 underscore 的思路寫了一個 unique 函數。

filter

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 鍵值對

去重的方法衆多，儘管咱們已經跟着 underscore 寫了一個 unqiue API，可是讓咱們看看其餘的方法拓展下視野：

這種方法是利用一個空的 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

隨着 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))
}

JavaScript 的進化

咱們能夠看到，去重方法從原始的 14 行代碼到 ES6 的 1 行代碼，其實也說明了 JavaScript 這門語言在不停的進步，相信之後的開發也會愈來愈高效。

寫在最後

雖然去重的結果有所不一樣，但更重要的是讓咱們知道在合適的場景要選擇合適的方法。