數(shù)組去重是一個(gè)經(jīng)常會(huì)用到的方法，我寫(xiě)了一個(gè)測(cè)試模板，測(cè)試一下常見(jiàn)的數(shù)據(jù)去重的方法的性能

測(cè)試模板

let arr1 = Array.from(new Array(100000), (x, index)=>{
    return index
})

let arr2 = Array.from(new Array(50000), (x, index)=>{
    return index+index
})

let start = new Date().getTime()
console.log('開(kāi)始數(shù)組去重')

function distinct(a, b) {
    // 數(shù)組去重
}

console.log('去重后的長(zhǎng)度', distinct(arr1, arr2).length)

let end = new Date().getTime()
console.log('耗時(shí)', end - start)

1、Array.filter() + indexOf
方法思路：將兩個(gè)數(shù)組拼接為一個(gè)數(shù)組，然后使用 ES6 中的 Array.filter() 遍歷數(shù)組，并結(jié)合 indexOf 來(lái)排除重復(fù)項(xiàng)

function distinct(a, b) {
    let arr = a.concat(b);
    return arr.filter((item, index)=> {
        return arr.indexOf(item) === index
    })
}

1.png

2、雙重 for 循環(huán)
方法思路：外層循環(huán)遍歷元素，內(nèi)層循環(huán)檢查是否重復(fù)，當(dāng)有重復(fù)值的時(shí)候，可以使用 push()，也可以使用 splice()

function distinct(a, b) {
    let arr = a.concat(b);
    for (let i=0, len=arr.length; i<len; i++) {
        for (let j=i+1; j<len; j++) {
            if (arr[i] == arr[j]) {
                arr.splice(j, 1);
                // splice 會(huì)改變數(shù)組長(zhǎng)度，所以要將數(shù)組長(zhǎng)度 len 和下標(biāo) j 減一
                len--;
                j--;
            }
        }
    }
    return arr
}

2.png

3、for...of + includes()
方法思路：雙重for循環(huán)的升級(jí)版，外層用 for...of 語(yǔ)句替換 for 循環(huán)，把內(nèi)層循環(huán)改為 includes()。先創(chuàng)建一個(gè)空數(shù)組，當(dāng) includes() 返回 false 的時(shí)候，就將該元素 push 到空數(shù)組中 。類(lèi)似的，還可以用 indexOf() 來(lái)替代 includes()

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    for (let i of arr) {
        !result.includes(i) && result.push(i)
    }
    return result
}

3.png

4、Array.sort()
方法思路：首先使用 sort() 將數(shù)組進(jìn)行排序，然后比較相鄰元素是否相等，從而排除重復(fù)項(xiàng)

function distinct(a, b) {
    let arr = a.concat(b)
    arr = arr.sort()
    let result = [arr[0]]

    for (let i=1, len=arr.length; i<len; i++) {
        arr[i] !== arr[i-1] && result.push(arr[i])
    }
    return result
}

4.png

5、new Set()
ES6 新增了 Set 這一數(shù)據(jù)結(jié)構(gòu)，類(lèi)似于數(shù)組，但Set 的成員具有唯一性

function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}

5.png

6、for...of + Object
方法思路：首先創(chuàng)建一個(gè)空對(duì)象，然后用 for 循環(huán)遍歷，利用對(duì)象的屬性不會(huì)重復(fù)這一特性，校驗(yàn)數(shù)組元素是否重復(fù)

function distinct(a, b) {
    let arr = a.concat(b)
    let result = []
    let obj = {}

    for (let i of arr) {
        if (!obj[i]) {
            result.push(i)
            obj[i] = 1
        }
    }
    return result
}

6.png

測(cè)試結(jié)果一目了然，幾種方法的性能 6>5>4>3>1>2

數(shù)組對(duì)象去重

let arrObj = [
    { id: 1, book: '語(yǔ)文' },
    { id: 1, book: '語(yǔ)文' },
    { id: 4, book: '數(shù)學(xué)' },
    { id: 3, book: '英語(yǔ)' },
    { id: 1, book: '語(yǔ)文' },
    { id: 4, book: '語(yǔ)文' }
];
let map = new Map();
for (let item of arrObj) {
    if (!map.has(item.id)) {
        map.set(item.id, item);
    };
};
arr = [...map.values()];
console.log(arr);

去重結(jié)果

[
 {id: 1, book: '語(yǔ)文'}
 { id: 3, book: '英語(yǔ)'}
 { id: 4, book: '數(shù)學(xué)'}
]