在做项目的时候，经常会遇见对一个数组进行去重，特别是数组中包含的是对象的形式，因此就来记录一下处理方法。供我今后方便查看以及供大家采纳~

方法一：双重循环

采用两两数组进行比较的方式，如果后一个对象的莫属性和前一个对象的莫属性值相等，就把后面的对象删除，并且注意循环需减一。

export default {
    data(){
        return {
            list:[
                    {id:"001",name:'一'},
                    {id:"002",name:'二'},
                    {id:"003",name:'三'},
                    {id:"004",name:'四'},
                    {id:"005",name:'五'},
                    {id:"006",name:'六'},
                    {id:"003",name:'三'},
                    {id:"008",name:'八'},
                    {id:"009",name:'九'},
                    {id:"001",name:'一'}, 
            ],
        }
    },
    mounted(){
        this.handleList();
    },
    methods:{
        handleList(){
            for(let i = 0; i < this.list.length; i++){
                for(let j = i + 1; j < this.list.length; j++){
                    if(this.list[i].id == this.list[j].id){
                        this.list.splice(j, 1);
                        j--;//注意
                    }
                }
            }
            console.log(JSON.parse(JSON.stringify(this.list)),"去重后的数组");
     }
}

在这里插入图片描述

方法二

定义一个数组存储id的值,然后逐个比较,把id值重复的对象删除即可

export default {
    data(){
        return {
            list:[
                    {id:"001",name:'一'},
                    {id:"002",name:'二'},
                    {id:"003",name:'三'},
                    {id:"004",name:'四'},
                    {id:"005",name:'五'},
                    {id:"006",name:'六'},
                    {id:"003",name:'三'},
                    {id:"008",name:'八'},
                    {id:"009",name:'九'},
                    {id:"001",name:'一'}, 
            ],
        }
    },
    mounted(){
        this.handleList();
    },
    methods:{
        handleList(){
            let idList = [],resultList=[];
            for (let i = 0; i < this.list.length; i++) {
                if (idList.indexOf(this.list[i].id) == -1) {
                    idList.push(this.list[i].id);
                    resultList.push(this.list[i]);
                } else {
                    this.list.splice(i, 1);
                    i-- // 这个别忘咯
                }
            }
            console.log(JSON.parse(JSON.stringify(resultList)),"去重后的数组");
     }
}

在这里插入图片描述

方法三：使用reduce方法

该方法一般用来计算汇总，它接受一个函数作为参数，该函数会被应用到数组的每个元素上。该函数的返回值会存储在一个累加器中，并作为下一次迭代的输入。最终，reduce()方法会返回累加器的最终值。 reduce()方法的语法如下： array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total是累加器的值，它的初始值可以通过initialValue参数指定，也可以默认为数组的第一个元素。
currentValue是数组当前正在处理的元素。
currentIndex是当前元素的索引。
arr是原始数组。
initialValue是可选的，用于指定累加器的初始值。

总结来说，reduce()方法是一个强大的数组方法，用于对数组进行计算和汇总。它可以通过提供一个函数来自定义计算过程，并返回一个单个值作为结果。

export default {
    data(){
        return {
            list:[
                    {id:"001",name:'一'},
                    {id:"002",name:'二'},
                    {id:"003",name:'三'},
                    {id:"004",name:'四'},
                    {id:"005",name:'五'},
                    {id:"006",name:'六'},
                    {id:"003",name:'三'},
                    {id:"008",name:'八'},
                    {id:"009",name:'九'},
                    {id:"001",name:'一'}, 
            ],
        }
    },
    mounted(){
        this.handleList();
    },
    methods:{
        handleList(){
			let obj = {};
            let resultList = this.list.reduce((totalList,next)=>{
                /*判断obj对象中是否已经有该属性  没有的话 push 到 currList空数组中*/
                obj[next.id] ? "" : obj[next.id] = totalList.push(next);
                return totalList;
            },[]);
            console.log( obj,"obj对象",JSON.parse(JSON.stringify(resultList)),"去重后的数组");
     }
}

在这里插入图片描述

方法四：使用Map()集合

Map集合常用方法：

has方法可以判断Map对象中是否存在指定元素,有则返回true，否则返回false
set方法可以向Map对象添加新元素 map.set(key, value)，key为任何类型的数据
values方法可以返回Map对象值的遍历器对象

export default {
   data(){
       return {
           list:[
                   {id:"001",name:'一'},
                   {id:"002",name:'二'},
                   {id:"003",name:'三'},
                   {id:"004",name:'四'},
                   {id:"005",name:'五'},
                   {id:"006",name:'六'},
                   {id:"003",name:'三'},
                   {id:"008",name:'八'},
                   {id:"009",name:'九'},
                   {id:"001",name:'一'}, 
           ],
       }
   },
   mounted(){
       this.handleList();
   },
   methods:{
       handleList(){
   		 // 方法一：
           let map = new Map();
           for (let item of this.list) {
               if (!map.has(this.list.id)) {
                   map.set(item.id, item);
               }
           }
           let resultList = [...map.values()];
           console.log(JSON.parse(JSON.stringify(resultList)),"去重后的数组"); 
           // 方法二：
           const map = new Map();
           const resultList = this.list.filter(v => !map.has(v.id) && map.set(v.id, 1));
           console.log(JSON.parse(JSON.stringify(resultList)),"去重后的数组");   
    }
}

在这里插入图片描述

总结

以上就是我要分享的所有js涉及到对象数组去重的方法，以我的能力目前只能想到这些，若有其它更多便捷的方法或写的不足请多多指教！

JS中对象数组去重的一些方法

方法一：双重循环

方法二

方法三：使用reduce方法

方法四：使用Map()集合

总结