前情提要

数组去重也是前端项目在性能优化上的一个比较重要的技术点，做个总结留存下来

JavaScript 高性能数组去重

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('开始数组去重')
function distinct(a, b) {
    // 数组去重
}
console.log('去重后的长度', distinct(arr1, arr2).length)
let end = new Date().getTime()
console.log('耗时 => ', end - start)

数组去重

1、Array.filter() + indexOf

思路：将两个数组拼接为一个数组，然后使用 es6 中的 Array.filter()遍历数组，并结合 indexOf 来排除重复项

function distinct(a, b) {
    let arr = a.concat(b);
    return arr.filter((item, index)=> {
        return arr.indexOf(item) === index
    })
}
// 15W 数据
// 开始数组去重
// 去重后的长度 100000
// 耗时 =>  16597

2、双重 for 循环 外层循环遍历元素，内层循环检查是否重复 当有重复值时，可使用 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 会改变数组长度，所以要将数组长度 len 和 下标 j 减 1
                len--
                j--
            }
        }
    }
    return arr
}
// 15W 数据
// 开始数组去重
// 去重后的长度 100000
// 耗时 =>  25405   占用内存较高，效率也是最低的

3、for...of + includes()

• 双重 for 循环的升级版，外层用 for...of 语句替换 for 循环，内层循环改为 includes()
• 先创建一个空数组，当 includes() 返回 false 的时候，就将该元素 push 到空数组中
• 可用 indexOf() 代替 includes()
• 这种方法和 filter + indexOf 挺类似
  • 只是把 filter() 的内部逻辑用 for 循环实现出来，再把 indexOf 换为 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
}
// 15W 数据
// 开始数组去重
// 去重后的长度 100000
// 耗时 =>  16152

4、Array.sort() 先将数组进行排序 比较相邻元素是否相等，从而排除重复项

• 只做了一次排序和一次循环，所以效率会比上面的方法要高

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
}
// 15W 数据
// 开始数组去重
// 去重后的长度 100000
// 耗时 =>  250

5、new Set()

• es6 新增的数据结构，类似于数组，但 Set 的成员具有唯一性
• 基于这一特性，非常适合用来做数组去重

function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}
// 15W 数据
// 开始数组去重
// 去重后的长度 100000
// 耗时 =>  57

// 150W 数据
// 开始数组去重
// 去重后的长度 1000000
// 耗时 =>  544

6、for...of + Object

• 创建一个空对象，然后用 for 循环遍历
• 利用对象的属性不会重复这一特性，校验数组元素是否重复
• 比 Set() 还快

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
}
// 15W 数据
// 开始数组去重
// 去重后的长度 100000
// 耗时 =>  28

// 150W 数据
// 开始数组去重
// 去重后的长度 1000000
// 耗时 =>  152