js 多对象去重(多属性去重)

需求中发现后端可能没有处理重复数据,这个时候前段可以直接解决。

在 JavaScript 中,可以使用 Set 数据结构来进行多对象的去重。Set 是 ES6 新引入的集合类型,其特点是元素不会重复且无序。

下面是一个示例代码,展示如何通过 Set 进行多对象的去重操作:

// 定义包含重复对象的数组
const arr = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
    { id: 4, name: 'Dave' },
    { id: 5, name: 'Eve' },
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
    // ...
];
 
// 创建一个空的 Set 对象
const set = new Set();
 
// 遍历原始数组,将每个对象添加到 Set 中
arr.forEach(obj => {
    set.add(JSON.stringify(obj));
});
 
// 转换为数组并输出结果
const resultArr = Array.from(set).map(strObj => JSON.parse(strObj));
console.log(resultArr);

上述代码首先创建了一个空的 Set 对象 set,然后利用 forEach() 方法遍历原始数组 arr,将每个对象转化成字符串形式(使用 JSON.stringify())再添加到 Set 中。最后,通过调用 Array.from() 方法将 Set 转换为数组,并使用 map() 方法将字符串形式的对象还原为真正的对象。

这样就完成了多对象的去重操作,得到的 resultArr 数组中只保留了没有重复的对象。

实例
在这里插入图片描述
处理后的数据对象

在这里插入图片描述

	newData = res.data
    newData?.reverse().forEach((item, i) => {
      if(item.startStopRecord && item.startStopRecord.length > 0) {
        let arr = item.startStopRecord       
        // 创建一个空的 Set 对象
        const set = new Set();        
        // 遍历原始数组,将每个对象添加到 Set 中
        arr.forEach(obj => {
          set.add(JSON.stringify(obj));
        });        
        // 转换为数组并输出结果
        const resultArr = Array.from(set).map(strObj => JSON.parse(strObj));
        console.log(resultArr, 'resultArr');
        // let newresultArr =[]
        // resultArr.forEach((v, index )=> {
        //   if(v.startTime > v.endTime){
        //     v.startTime  = v?.[index-1]?.endTime 
        //     v.endTime = v?.[index]?.endTime 
        //   }
        //   newresultArr.push(v)
        // })
      }
    })

如果是判断多个属性去重也可以用这个方法
在这里插入图片描述

const arr = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' },
    { id: 4, name: 'Alice' }
];
 
// 根据id和name两个属性进行去重
const uniqueArr = Array.from(new Set(arr.map((item) => JSON.stringify([item.id, item.name]))));
console.log(uniqueArr); // ["[1,\"Alice\"]", "[2,\"Bob\"]", "[3,\"Charlie\"]"]
// 还原成对象格式
const result = uniqueArr.map((str) => JSON.parse(str)).map(([id, name]) => ({ id, name }));
console.log(result); // [{ id: 1, name: "Alice" },{ id: 2, name: "Bob" },{ id: 3, name: "Charlie" }]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/402056.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nginx----高性能的WEB服务端

一、Nginx介绍 1、什么是Nginx Nginx Nginx是一个高性能的HTTP和反向代理服务器。是一款轻量级的高性能的web服务器/反向代理服务器/电子邮件(IMAP/POP3)代理服务器,单台物理服务器可支持30 000~50 000个并发请求。 一款高性能…

一分钟学会MobaXterm当Linux客户端使用

一、介绍 MobaXterm是一款功能强大的远程计算机管理工具,它集成了各种网络工具和远程连接协议,可以帮助用户在Windows系统上轻松管理远程计算机。MobaXterm支持SSH、Telnet、RDP、VNC等多种远程连接协议,同时还集成了X11服务器,可…

启动node服务报错Error: listen EACCES: permission denied 0.0.0.0:5000

启动node服务报错: 解决方案: 将监听端口改成3000或者其他 修改后结果: 参考原文: Error: listen EACCES: permission denied_error when starting dev server: error: listen eacc-CSDN博客

并发编程入门指南

文章目录 并发编程进程和线程的区别并发和并行的区别创建线程的方式线程之间的状态,状态之间的转换新建三个线程,如何保证按顺序执行wait方法和sleep的区别如何停止一个正在运行的线程synchronized关键字底层原理Monitor属于重量级锁,了解过锁…

外贸邮件群发软件有效果吗?邮件群发平台?

外贸邮件群发软件怎么选?国外邮箱群发平台如何选择? 外贸业务已成为许多企业发展的重要方向。在这个过程中,各种工具和技术层出不穷,其中外贸邮件群发软件因其能够高效、批量地发送邮件而备受关注。那么,外贸邮件群发…

API接口测试工具的使用指南

API接口测试是确保软件系统正常运作的关键步骤。API接口测试工具可以帮助开发人员和测试人员验证API的功能、性能和安全性。本文将介绍API接口测试工具的基本使用方法,以便有效地进行接口测试。 1. 选择合适的API测试工具 在开始API接口测试之前,首先需要…

STM32F10X(Cortex-M3)系统定时器寄存器笔记和系统定时器精准延时函数

Cortex-M3系统定时器寄存器笔记和系统定时器精准延时函数 简介系统定时器寄存器STK_CTRLSTK_LOADSTK_VALSTK_CALIB STM32F10X(Cortex-M3)精准延时函数 简介 在STM32F10X(Cortex-M3)除了通用定时器和看门狗定时器外,还有一个系统定时器(SysTick) 拿STM32F103C8T6来说…

vue如何动态加载显示本地图片资源

在实际开发中,根据某一个变量动态展示图片的情况有很多。实现方法分打包构建工具的差异而不同。 1、webpack的项目 require引入图片资源 2、vite的项目 new URL(url,base).href 疑问解答:为什么vite项目不可以用require? 原因在于&#xf…

vue项目设置的端口号运行后会自动加一问题解决

vue项目设置的端口号运行后会自动加一问题解决 主要原因是之前运行项目后没有完全的关闭服务,导致再次运行项目端口号被占用,自动加一! 问题解决 打开任务管理器,在进程中找到node相关进程,右键结束任务

长期有效的文本二维码怎么生成?将文字做成二维码只需3步

现在经常会在扫描二维码的时候,发现很多的二维码种会展现文字的内容,比如常见的有物品信息、个人信息、信件等等。通过生成二维码的方式,来让其他人扫码获取内容,这种方式可以有效地降低成本,而且获取内容的方式也更加…

HDFS中常用的Shell命令 全面且详细

HDFS中常用的Shell命令目录 一、ls命令 二、mkdir 命令 三、put命令 四、get命令 五、mv命令 六、rm命令 七、cp命令 八、cat命令 前言 安装好hadoop环境之后,可以执行hdfs相关的shell命令对hdfs文件系统进行操作,比如文件的创建、删除、修改文…

企微hook框架

https://wwm.lanzoum.com/ipUTp1ot1twh 密码:hvev 免费的企微框架 支持文本消息,图片消息,视频消息,文件消息。 其他可自行下载测试。 有兴趣可以进群交流。720192224 BOOL WxWorkSendData(string data) { WX_GETOBJDATA ob…

Linux课程三课---Linux开发环境的使用(yum的相关)

作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 ​🎂 作者介绍: 🎂🎂 🎂 🎉🎉&#x1f389…

前端基础自学整理|HTML + JavaScript + DOM事件

目录 一、HTML 1、Html标签 2、Html元素 3、基本的HTML标签 二、CSS 样式 层叠样式表 三、JavaScript 使用示例 四、HTML DOM 通过可编程的对象模型,javaScript可以: window document 1、查找HTML元素 2、操作HTML元素 获取元素的属性 四…

基于Java jsp+mysql+Spring的汽车出租平台租赁网站平台设计和实现

基于Java jspmysqlSpring的汽车出租平台租赁网站平台设计和实现 博主介绍:5年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留…

使用JDBC操作数据库(IDEA编译器)

目录 JDBC的本质 ​ JDBC好处 JDBC操作MySQL数据库 1.创建工程导入驱动jar包 2.编写测试代码 ​相关问题 JDBC的本质 官方(sun公司) 定义的一套操作所有关系型数据库的规则,即接口各个数据库厂商去实现这套接口,提供数据库驱动jar包我们可以使用这…

【数据库】达梦数据库DM8开发版安装

目录 一、达梦数据库概述 1.1 达梦数据库简介 1.2 产品特性 1.3 产品架构 二、安装前准备 2.1 新建 dmdba 用户 2.2 修改文件打开最大数 2.3 挂载镜像 2.4 新建安装目录 2.5 修改安装目录权限 三、数据库安装 3.1 命令行安装 3.2 配置环境变量 四、配置实例 4.1…

离散数学(一) 集合

属于关系 表示 枚举法; 叙述法; 文氏图法 基数 空集 全集 全集是相对唯一的

LaunchPad 市场的复苏,Penpad 成新兴生力军

以 Fair Launch 为主要启动方式的铭文市场的爆发,推动了 LaunchPad 市场的复苏,绝多数所铭文项目都能通过 Fairr Launch 的方式筹集资金实现启动,该赛道的爆发不仅推动了数百亿美元的热钱开始在链上不断涌动,同时也进一步形成了新…

智慧工地uniapp项目管理系统源码

目录 智慧工地的核心 智慧工地特点 智慧工地的优势 智慧工地应用场景 智慧工地平台---项目版(端) 智慧工地数字栾生平台 三位一体全数据贯通 智慧工地是指应用物联网、大数据、云计算、人工智能等新兴技术,对建筑工地进行数字化、信息…