JavaScript:交集和差集的应用场景

news2025/1/14 1:20:19

在集合A和集合B中,属于集合A,同时也属于集合B的元素组成的集合,就是交集

在A中所有不属于集合B元素,组合成集合,就是差集

那么在平时的开发中,如何使用差集和交集来解决问题呢?

现在有这样的场景,在一个表格编辑数据后,要把编辑前的数据和修改后的数据,汇总。

源数据为:

const arr1 = [{ name: 11, id: 1 }, { name: 21, id: 2 }, { name: 31, id: 3 }, { name: 41, id: 4 }, { name: 51, id: 5 }, { name: 61, id: 6 }];

在页面中表现为:

在这里插入图片描述

现在删除第一行数据,第二行的名字改为2109,第三行的名字改为3321;然后新增两行,分别为:71、81。

数据如下:

const arr2 = [{ name: 2109, id: 2 }, { name: 3321, id: 3 }, { name: 41, id: 4 }, { name: 51, id: 5 }, { name: 61, id: 6 }, { name: 71, id: null }, { name: 81, id: null }];

页面为:

在这里插入图片描述
由于是新增数据还没有提交保存,所以对应的序号,也就是ID为空。

最终想要的效果图下图所示:

在这里插入图片描述
需要在表格中体现那些数据是修改、删除、新增,哪些数据没有改变。

思路:

  1. 源数据是一个数组arr1;
  2. 修改后的数据也是一个数组arr2;
  3. 删除的数据,在数组arr1中有,数组arr2中没有;
  4. 修改的数据,在数组arr1和arr2中,都找对应的ID;
  5. 新增的数据,只出现在数组arr2中。

那么数组arr2与数组arr1的差集,就是新增的数据:

let add = arr2.filter(x => arr1.every(y => y.id != x.id))

数组arr1与数组arr2的差集,就是删除的数据:

let del = arr1.filter(x => arr2.every(y => y.id != x.id))

修改或者没有修改数据,就是数组arr1和数组arr2的交集:

// arr1、arr2的交集
let arr12Inter = arr1.filter(x => arr2.some(y => x.id === y.id))
let arr21Inter = arr2.filter(x => arr1.some(y => x.id === y.id))

最后一步,就是组合所有的差集、交集,汇总成新的数组:

for (let index = 0; index < arr12Inter.length; index++) {
    newArr.push({ oldData: arr21Inter[index], newData: arr12Inter[index] })
}

del.forEach(item => newArr.push({ oldData: item, newData: null }))
add.forEach(item => newArr.push({ oldData: null, newData: item }))

完整代码:

const arr1 = [{ name: 11, id: 1 }, { name: 21, id: 2 }, { name: 31, id: 3 }, { name: 41, id: 4 }, { name: 51, id: 5 }, { name: 61, id: 6 }];

const arr2 = [{ name: 2109, id: 2 }, { name: 3321, id: 3 }, { name: 41, id: 4 }, { name: 51, id: 5 }, { name: 61, id: 6 }, { name: 71, id: null }, { name: 81, id: null }];
let newArr = [];
// arr1——>arr2的差集:删除
let del = arr1.filter(x => arr2.every(y => y.id != x.id))

// arr2——>arr1的差集:新增
let add = arr2.filter(x => arr1.every(y => y.id != x.id))

// arr1、arr2的交集:修改
let arr12Inter = arr1.filter(x => arr2.some(y => x.id === y.id))
let arr21Inter = arr2.filter(x => arr1.some(y => x.id === y.id))

console.log("arr1与arr2的差集:", del)
console.log("arr2与arr1的差集:", add)
console.log("交集", arr12Inter, arr21Inter)

for (let index = 0; index < arr12Inter.length; index++) {
    newArr.push({ oldData: arr21Inter[index], newData: arr12Inter[index] })
}

del.forEach(item => newArr.push({ oldData: item, newData: null }))
add.forEach(item => newArr.push({ oldData: null, newData: item }))

console.log("汇总:", newArr)

在这里插入图片描述

使用交集、差集,仅仅是一种方式!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Fixed Price Incentive Fee (FPIF)

总价加激励费用 (FPIF)。这种总价合同为买方和卖方提供了一定的灵活性&#xff0c;允许一定的绩 效偏离&#xff0c;并对实现既定目标给予相关的财务奖励&#xff08;通常取决于卖方的成本、进度或技术 绩效&#xff09;。FPIF 合同中会设置价格上限&#xff0c;高于此价格上限…

剑指 Offer 61. 扑克牌中的顺子(C++实现)

剑指 Offer 61. 扑克牌中的顺子https://leetcode.cn/problems/bu-ke-pai-zhong-de-shun-zi-lcof/ 优雅写法 bool isStraight(vector<int>& nums) {int maxVal INT_MIN, minVal INT_MAX;unordered_set<int> s;for (const int num : nums){if (num 0) // 跳过…

基于STM32+FreeRTOS的四轴机械臂

目录 项目概述&#xff1a; 一 准备阶段&#xff08;都是些废话&#xff09; 二 裸机测试功能 1.摇杆控制 接线&#xff1a; CubeMX配置&#xff1a; 代码&#xff1a; 2.蓝牙控制 接线&#xff1a; CubeMX配置 代码&#xff1a; 3.示教器控制 4.记录动作信息 5.执…

Matlab 频谱图中如何设置频率刻度

Matlab 频谱图中如何设置频率刻度&#xff08;横坐标&#xff09; 1、概述 时域信号经FFT 变换后得到了频谱&#xff0c;在作图时还必须设置正确的频率刻度&#xff0c;这样才能从图中得到正确的结果。下面来介绍如何设置正确的频率刻度。 2、案例分析 有一个余弦信号&#…

浏览器渲染原理 - 输入url 回车后发生了什么

目录 渲染时间点渲染流水线1&#xff0c;解析&#xff08;parse&#xff09;HTML1.1&#xff0c;DOM树1.2&#xff0c;CSSOM树1.3&#xff0c;解析时遇到 css 是怎么做的1.4&#xff0c;解析时遇到 js 是怎么做的 2&#xff0c;样式计算 Recalculate style3&#xff0c;布局 la…

Android Studio实现解析HTML获取json,解析json图片URL,将URL存到list,进行瀑布流展示

目录 效果build.gradle&#xff08;app&#xff09;添加的依赖&#xff08;用不上的可以不加&#xff09;AndroidManifest.xml错误activity_main.xmlitem_image.xmlMainActivityImage适配器ImageModel 接收图片URL 效果 build.gradle&#xff08;app&#xff09;添加的依赖&…

STM32 printf函数

printf函数输出流程 用户调用printf()函数到C标准库调用printf函数相关部分&#xff0c;printf函数由编译器提供的stdio.h解析。包含在usart.h文件中。fputc()最终实现输出。用户需要根据最终输出的硬件重新定义该函数&#xff0c;此过程为&#xff1a;printf重定向。 printf的…

用它来画文档插图简直太方便了

支持常用的12864接口&#xff0c;图像可保存&#xff0c;鼠标左键可delete键删除选区&#xff0c;鼠标右键抓取坐标。 支持快捷撤销操作CtrlZ、回退操作CtrlY&#xff0c;可点击此处下载软件。

Educational Codeforces Round 153 (Rated for Div. 2)ABC

Educational Codeforces Round 153 (Rated for Div. 2) 目录 A. Not a Substring题目大意思路核心代码 B. Fancy Coins题目大意思想核心代码 C. Game on Permutation题目大意思想核心代码 A. Not a Substring 题目大意 给定一个只包含“&#xff08;”和“&#xff09;”这两…

EV PV AC SPI CPI TCPI

SPI EV / PV CPI EV / ACCPI 1.25 SPI 0.8 PV 10 000 BAC 100 000EV PV * SPI 10 000 * 0.8 8000 AC EV / CPI 8000 / 1.25 6400TCPI (BAC - EV) / (BAC -AC) (100 000 - 8 000) / (100 000 - 6 400) 92 000 / 93 600 0.98290598

Python土力学与基础工程计算.PDF-钻探泥浆制备

Python 求解代码如下&#xff1a; 1. rho1 2.5 # 黏土密度&#xff0c;单位&#xff1a;t/m 2. rho2 1.0 # 泥浆密度&#xff0c;单位&#xff1a;t/m 3. rho3 1.0 # 水的密度&#xff0c;单位&#xff1a;t/m 4. V 1.0 # 泥浆容积&#xff0c;单位&#xff1a;…

画质提升+带宽优化,小红书音视频团队端云结合超分落地实践

随着视频业务和短视频播放规模不断增长&#xff0c;小红书一直致力于研究&#xff1a;如何在保证提升用户体验质量的同时降低视频带宽成本&#xff1f; 在近日结束的音视频技术大会「LiveVideoStackCon 2023」上海站中&#xff0c;小红书音视频架构视频图像处理算法负责人剑寒向…

OpenAI 选择这家成立2年的8人团队做什么?

当地时间 8 月 16 日&#xff0c;OpenAI 发布公告称收购了 Global Illumination 的团队&#xff0c;此笔交易更成为 OpenAI 自 2015 年成立以来首次对外收购&#xff0c;但并未公开交易涉及金额。据悉&#xff0c;该团队将参与 OpenAI 核心产品产品的研发&#xff0c;包括 Chat…

第八章:联邦学习在金融保险领域的应用案例

8.1 概述 联邦学习作为一种保障数据安全的建模方法&#xff0c;在保险、金融等行业中的应用前景十分广泛&#xff0c;因为这类行业昔谝受到更为严格的监管和隐私保护法律法规的约束&#xff0c;跨部门或者跨枧构之间的数据&#xff0c;无法被直接共卓进行机器学习模型训练。因…

Go download

https://go.dev/dl/https://golang.google.cn/dl/

贝锐蒲公英助力电子公交站牌联网远程运维,打造智慧出行新趋势

在现代城市公共交通系统中&#xff0c;我们随处可见电子公交站牌的身影。作为公共交通服务的核心之一&#xff0c;电子公交站牌的稳定运行至关重要&#xff0c;公交站台的实时公交状况、公共广告信息&#xff0c;是市民候车时关注的焦点。 某交通科技公司在承接某市智能电子站牌…

Fluent-MyBatis

Fluent-MyBatis Fluent-MyBatis 简介 何为 Fluent Mybatis&#xff1f; Fluent Mybatis, 是一款 Mybatis 语法增强框架, 综合了 Mybatis Plus, Dynamic SQL, JPA 等框架特性和优点 Fluent-MyBatis 开源地址 Fluent-MyBatis 原理 Fluent-MyBatis 原理是利用 annotation pro…

商城-学习整理-高级-商城业务-商品上架es(十)

目录 一、商品上架1、sku在ES中存储模型分析2、nested数据类型场景3、构造基本数据&#xff08;商品上架&#xff09; 二、首页1、项目介绍2、整合thymeleaf&#xff08;spring-boot下模板引擎&#xff09;渲染页面3、页面修改不重启服务器实时更新4、渲染二级三级数据 三、搭建…

HCIP---路由策略

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 前文我们初步了解了重发布技术的技术的工作流程及配置方法&#xff0c;在解决路由回馈问题的同时&#xff0c;路由回馈&#xff0c;选路不佳问题仍然没有得到有效解决&#xff0c;接下来通…

HCIA---ARP协议

文章目录 目录 前言 一.ARP协议简介 二.ARP协议工作原理 交换机转发原理&#xff1a; 泛洪&#xff1a; 总结 前言 我们知道在OSI七层参考模型中&#xff0c;TCP/UDP协议作用于传输层可以用来在设备之间建立连接&#xff0c;而在连接建立的过程中&#xff0c;设备之间是如何…