json对象数组的去重踩坑记

本文记录了一次在处理JSON对象数组去重时遇到的问题和解决方案。最初尝试使用ES6的Set和Array.from()方法,但在面对JSON数组时失败。原因是JSON数组中的对象需要考虑其内部属性进行去重。通过使用Map数据结构,根据对象的特定属性(如name或id)进行去重,实现了预期效果。此外,还提到了使用reduce方法作为另一种去重选择。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一次无意接受到json数组去重的帮助需求,自信满满的直接上手,不到两分钟留下代码就转身而去,不等屁股挨上座椅就被告知,无法实现去重效果。。。。立马转身再次回头梳理代码,经过各种梳理与尝试,最终完成了预期效果的实现,也意外的发现中间的一些容易忽略的坑与迷失点,现整理出来给自己梳理知识点的同时也给码友们提供参考。
json数组去重的方法其实很多,最原生的js写法就是for循环遍历,然后剔除重复的对象之后新建一个数组,最后这个新建的数组就是自己需要的,如下实例代码:

function unique(arr)
{
    var result = []; //结果数组
    for(var i = 0; i < arr.length; i++) 
    {
        //如果在结果数组result中没有找到arr[i],则把arr[i]压入结果数组result中
        if (result.indexOf(arr[i]) == -1) result.push(arr[i]);
    }
    return result;
}

但自从es6语法问世了之后,总会在不经意中或者刻意中去精简自己的代码或者提升代码体验感用es6的语法来处理问题,最开始就直接拿了数组和set的拓展方法来处理去重,语法如下:

// 去除数组的重复成员
[...new Set(array)]

const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

再通过Array.from()转换成数组就以为ok了,结果想当然的就掉坑了。
在es6的官方文档中,所有的示例基本都是用的最简单的数组(可称之为一维数组)来进行的示范,但在我这里的实际需求上是json数组,json数组与一维数组还是有根本上的区别,所以不出意外的就掉坑。
借用网上前辈的一些示例来说明:

let person = [
     {id: 0, name: "小明"},
     {id: 1, name: "小张"},
     {id: 2, name: "小李"},
     {id: 3, name: "小孙"},
     {id: 1, name: "小周"},
     {id: 2, name: "小陈"},   
];

json数组如果单纯的从数组上来看其实也就是一个一维数组,但前提是将里面的各对象看做一个整体,而我们在实际运用中需要经常将里面的对象拆开来使用里面的各种属性进行相关控制。。。。
因此,在这里,我们需要借助map来进行处理:

const map = new Map()
let list = person.filter((item) => !map.has(item['name'] + '') && map.set(item['name'] + '', 1))
console.log(list)

我这里用的是对象的name属性来进行去重筛选,其实我们也可以通过对象的其他属性来进行筛选,类似我这里的id属性:

const map = new Map()
let list = person.filter((item) => !map.has(item['id'] + '') && map.set(item['id'] + '', 1))
console.log(list)

如果对es6兴趣不高,其实也可以用js的reduce方法来实现去重:

let obj = {};
let peon = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
console.log(peon);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值