JS数组去重

84 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第7天,点击查看活动详情

前言

最近刷leetcode的时候有的题目需要数组去重,现在来总结一下。

数组去重作为前端面试的一个题目,有很多种方法去解决。但是归结起来,就是两层循环法、利用语法自身键不可重复性,再有就是使用JS的一些api。

两层循环法

let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]
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--
        }
    }
}
console.log(arr)

执行结果:

image.png

这种方法的原理是通过两层循环,在内层循环里进行前一个元素和后一个元素比较,如果相同的话,则删去后一个元素,通过j--,继续循环。可以看到,NaN和{}没有去重,两个null没有了

利用语法自身键不可重复性

我们都知道对象的属性不能相同,这时候我们就可以利用这个特点进行数组去重。

let arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]
let arr2 = [];
let obj = {};
for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
        arr2.push(arr[i])
        obj[arr[i]] = 1
    } else {
        obj[arr[i]]++
    }
}
console.log(arr2)

执行结果:

image.png

可以看到NaN和{}进行了去重,但是原有的两个true被去掉了。这种方式需要重新定义一个数组,空间复杂度会高一些。

调用api的方法

ES6 Set

let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]
arr = Array.from(new Set(arr))
console.log(arr)

执行结果:

image.png

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

这是MDN中对set的解释,理解起来就是set中的元素只会出现一次,set这种特性就很适合数组去重。但是这种方法无法去重{}。

简化

[...new Set(arr)]

利用indexOf进行去重

let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]
let arr2 = []
for(let i = 0;i < arr.length;i++) {
    if(arr2.indexOf(arr[i]) === -1) {
        arr2.push(arr[i])
    }
}
console.log(arr2)

执行结果:

image.png

这种方法是新建一个数组,如果新数组中不包含需要去重的数组的元素,则把这个元素push到新数组中。这种方法不能去重NaN和{}

后记

还有很多使用api的方法,以后用到的时候再来补充。