JS數組去重詳情

Posted on by

1 測試用例

// 測試用例
const a = {};
const b = { c: 1 };
const array = [
  1, 1, "1", "1",
  {}, {}, { c: 1 }, { c: 1},
  a, a, b, b, 
  [], [], [1], [1],
  undefined, undefined,
  null, null,
  NaN, NaN,
];

2 JS 數組去重4大類型

2.1 元素比較型

此類型通過數組元素之間進行比較來去重

2.1.1 雙層 for 循環逐一比較（es5常用）

使用雙層for循環逐一比較數組元素，用splice方法去除重復的元素

// 雙層for循環
function uniq1(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1)
                j--
            }
        }
    }
    return arr
}

// 去重結果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

通過對比去重前後結果，重復的NaN沒有去掉，因為NaN === NaN為false

2.1.2 排序相鄰比較

使用sort()方法對數組元素進行排序，然後比較相鄰元素，用splice方法去除重復的元素。

function uni2(arr) {
    arr.sort();
    for (let i = 0; i < arr.length - 1; i++) {
        arr[i] === arr[i + 1] && arr.splice(i + 1, 1) && i--;
    }
    return arr;
}

也可以創建新數組，將不重復的元素放入新數組中

function uniq3(arr) {
    arr = arr.sort()
    const newArr = [arr[0]]
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i - 1]) {
            newArr.push(arr[i])
        }
    }
    return newArr
}

// 去重結果
// [[],[],1,'1',[1],[1],NaN,NaN,{},{},{c:1},{c:1},{},{c:1},null,undefined]

重復的NaN沒有去掉，因為NaN === NaN為false
sort默認排序順序是將元素轉換為字符串，對象轉換為字符串都是[object Object] ，所以sort方法不能對數組中的對象進行排序，也就有可能無法去除重復的對象，除非重復的對象本就相鄰

2.2 查找元素位置型

此類型通過查找元素第一次出現的位置來去重

2.2.1 indexOf

通過indexOf查找當前元素第一次出現的位置是否為當前位置，若是，則放入新數組

function uniq4(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.indexOf(arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}

// 去重結果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同樣，因為NaN === NaN為false，所以用indexOf查找NaN結果總是-1，從而在新數組中不會有NaN

2.2.2 findIndex

通過findIndex查找當前元素第一次出現的位置是否為當前位置，若是，則放入新數組

function uniq5(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (arr.findIndex(item => item === arr[i]) === i) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重結果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

同樣，因為NaN === NaN為false，所以用findIndex查找NaN結果總是-1，從而在新數組中不會有NaN

2.3 元素是否存在型

此類型通過判斷在新數組中是否存在當前元素來去重

2.3.1 includes

includes方法用來判斷一個數組是否包含一個指定的值

function uniq6(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重結果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

includes使用零值相等算法來確定是否找到給定的元素，所以可以判斷NaN是否在新數組中存在

2.3.2 some

some方法用來測試數組中是否至少有1個元素通過瞭被提供的函數測試

function uniq7(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.some(item => item === arr[i])) {
            res.push(arr[i])
        }
    }
    return res
}
// 去重結果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

同樣，這裡仍舊使用瞭===來比較元素，因為NaN === NaN為false，所以新數組中會有多個NaN

2.4 依托數據結構特性

此類型通過ES6提供的數據結構Map、Set本身不可重復特性來去重

2.4.1 Map

ES6提供的Map結構可以用各種類型的值（包括對象）當作鍵，且鍵是唯一的

function uniq8(arr) {
    const map = new Map()
    for (let i = 0; i < arr.length; i++) {
        !map.has(arr[i]) && map.set(arr[i], true)
    }
    return [...map.keys()]
}
// 去重結果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

map.has方法對NaN也有效

2.4.2 Set（ES6 最常用）

Set結構的成員的值都是唯一的，沒有重復的值。

function uniq9(arr) {
    return [...new Set(arr)]
}

// 去重結果
// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

3 補充

上面所說的方法可以使用不同的Api進行改動，比如使用splice方法去除數組元素的地方，我們可以通過filter方法來過濾數組得到新數組；

再比如includes的方法中不用for循環遍歷數組，通過reduce方法來代替等等。

總之，方法有很多，但是萬變不離其宗

有些去重方法對NaN無效，因為NaN === NaN為false，如果有需求，可以使用Object.is(NaN, NaN)為true來進行修改

實際應用中，最常用的方法就是使用Set，也可以使用第三方庫lodash來處理

到此這篇關於JS數組去重詳情的文章就介紹到這瞭,更多相關JS數組去重內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：