JS简单数组去重和对象数组去重

菜鸟玩家1111

已于 2023-04-17 17:35:34 修改

阅读量99

点赞数

文章标签： javascript 前端开发语言

于 2023-04-17 17:20:22 首次发布

本文链接：https://blog.csdn.net/c000211/article/details/130204281

版权

文章介绍了多种在JavaScript中去除数组重复元素的方法，包括使用ES6的Set，双层循环配合splice，indexOf，includes，filter，Map以及reduce等。同时，还展示了对象数组去重的解决方案，利用对象属性的唯一性或Map的键值唯一性来实现。

摘要由CSDN通过智能技术生成

参数都是数组所以方法里面都没有判断形参的数据类型有需要的可自行加上

简单数组去重

let arr = [1,1,1,2,3,4,5,6,7,8,9,9,9,8,'2']

1. ES6 new Set() 方法两种使用方法

const newArr = Array.from(new Set(arr))
const newArr2 = [...new Set(arr)]

2. 双层for循环数组splice()方法删除值

function uniqueFun(arr){
    let len = arr.length
    for(let i = 0; i < len; i++){
        for(let j = i + 1; j < len; j++){
            if(arr[i]===arr[j]){
               arr.splice(j,1)
               len--
               j--
            }
        }
    }
    return arr
}
console.log(uniqueFun(arr));

3. 数组indexOf()

function uniqueFun2(arr){
    let newArr = []
    arr.forEach(ele => {
        if(newArr.indexOf(ele) === -1){
            newArr.push(ele)
         }
    });
    return newArr
}
console.log(uniqueFun2(arr));

4. 数组includes()

function uniqueFun3(arr){
    let newArr = []
    arr.forEach(ele => {
        if(!newArr.includes(ele)){
            newArr.push(ele)
        }
    });
    return newArr
}
console.log(uniqueFun3(arr));

5. 数组filter() indexOf()

function uniqueFun4(arr){
    return arr.filter((item,index)=>{
        return arr.indexOf(item) === index
    })
}
console.log(uniqueFun4(arr));

6. map has set方法

function uniqueFun5(arr){
    const map = new Map()
    let newArr = []
    arr.forEach(ele => {
        if(!map.has(ele)){
            map.set(ele,true)
            newArr.push(ele)
        }
    });
    return newArr
}
console.log(uniqueFun5(arr));

7. 数组reduce() includes()

function uniqueFun6(arr){
    return arr.reduce((res,ele)=>{
        return res.includes(ele) ? res : [...res,ele]
    },[])
}
console.log(uniqueFun6(arr));

对象数组去重

let arr = [{name:'张三'},{name:'李四'},{name:'李四'},{name:'张三'}]

1. 数组reduce() 和对象的特性

function uniqueFun6(arr,prop){
    let obj = {}
    return arr.reduce((res,ele)=>{
        obj[ele[prop]] ? '' : obj[ele[prop]] = true && res.push(ele)
        return res
    },[])
}
console.log(uniqueFun6(arr,'name'));

2. map set方法如果对同一个键多次赋值，后面的值将覆盖前面的值

function uniqueFun6(arr,prop){
    let map = new Map();
    for (let item of arr) {
        map.set(item[prop], item);
    }
    arr = [...map.values()];
    return arr
}
console.log(uniqueFun6(arr,'name'));

对其中数组方法不太熟悉的大佬们可以看下面链接

数组方法