JS数组去重的方法

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

写在前面

数组去重是我们开发中一个经常用的操作,也是面试中经常会问的问题.
记得之前在开发的时候,做过一个实时投票的系统,后来因为mysql实时的数据不断的去插入 .导致会出现当用户在下拉加载的时候,就会出现很多重复性的数据
紧接着前后端在不断的去相互甩锅...
最后还是让前端去做了一个数组去重...
下面说一说,数组去重的几种方式 ,以及一些逼格比较高的方式..hhhh

利用Es6的Set() 方法进行去重

let newArr = Array.from(new Set(arr)) (生成的是Set格式的对象)==>
[object Set] 因为生成的是Set格式的对象,所以需要用Array.from 去转成数组的形式
这种方法只适用于基本数据类型,复杂数据类型确实没啥用

利用for循环+splice进去数组去重

let arr = [1,2,3,3,{},21,2,34,2,3,1,'万千瓦']
let len = arr.length
for(leti = 0 ; i<len;i++){
    for(letj = i+1 ;j<len;j++){
        if(arr[i]===arr[j]){
            arr.splice(j,1)
            len--;
            j--;
        }

    }
}

每删除一个数，j--保证j的值经过自加后不变。同时，len--，减少循环次数以提升自己的性能

利用index of 进行数组去重

const delSameArr = (arr) => {
let res = []
for (let ite mof arr) {
if (res.indexOf(item) == -1) {
    res.push(item)
 }
 }
return res
}

include、filter，,findIndex思路大同小异。

利用Include

const delSameArr = (arr) => {
let res = []
for (let item of arr) {
if (!res.includes(item)) {
res.push(item)
}
}
return res
}

利用filter

/ filter 返回的是一个新数组\
const delArr = arr => {
return arr.filter((item, index) => {
// filter 返回的是一个新数组
// 返回的是 arr 里 ,item 是第一次出现的
return arr.indexOf(item) === index;
});
}

利用Map

// 数组去重 Map 的方法
const delArr = (arr)=>{
    let res =[];
    let map = new Map()
    for (let item of arr){
        if(!map.has(item)){
            res.push(item)
            map.set(item,true)
        }
    }
    return res
}

Map 是一个es6 的 构造函数
是对象的类型 ,普通对象的key值只能是字符串或者数组 ,但是Map 对象的key值可以为任何数据类型
其次,Map 也有get ,set , has 等方法
Map的方法 是可以对复杂数据类型进行处理的.
所以 ,一般基本数据类型,我都是用Set 的方法去进行去重 ,复杂数据类型的话,除了可以用递归+递归的方法以外
还可以用的Map 的这种方法