1. 程式人生 > >JavaScript專題之陣列去重

JavaScript專題之陣列去重

前言

陣列去重方法老生常談,既然是常談,我也來談談。

雙層迴圈

也許我們首先想到的是使用 indexOf 來迴圈判斷一遍,但在這個方法之前,讓我們先看看最原始的方法:

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

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)); // [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 !== value) {
                res.push(value)
            }
            seen = value;
        }
        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 函式,具體可以檢視 Github 。

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

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 這門語言在不停的進步,相信以後的開發也會越來越高效。

特殊型別比較

去重的方法就到此結束了,然而要去重的元素型別可能是多種多樣,除了例子中簡單的 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 的去重情況:

方法 結果 說明
for迴圈 [1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN] 物件和 NaN 不去重
indexOf [1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN] 物件和 NaN 不去重
sort [/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined] 物件和 NaN 不去重 數字 1 也不去重
filter + indexOf [1, "1", null, undefined, String, String, /a/, /a/] 物件不去重 NaN 會被忽略掉
filter + sort [/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined] 物件和 NaN 不去重 數字 1 不去重
優化後的鍵值對方法 [1, "1", null, undefined, String, /a/, NaN] 全部去重
Set [1, "1", null, undefined, String, String, /a/, /a/, 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,但是這兩個元素是重複的。

寫在最後

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

專題系列

JavaScript專題系列預計寫二十篇左右,主要研究日常開發中一些功能點的實現,比如防抖、節流、去重、型別判斷、拷貝、最值、扁平、柯里、遞迴、亂序、排序等,特點是研(chao)究(xi) underscore 和 jQuery 的實現方式。