js 两个数组中的指定参数(id)相同,为某个对象设置disabled属性

在JavaScript中,如果想要比较两个数组并根据它们的id属性来设置某个对象的disabled属性为true,你可以使用几种不同的方法。这里我将介绍几种常用的方法:

方法1:使用循环和条件判断

const array1 = [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }
];const array2 = [{ id: 2, name: 'Item 2' },{ id: 4, name: 'Item 4' }
];// 遍历array1,检查id是否存在于array2中
array1.forEach(item1 => {const found = array2.some(item2 => item2.id === item1.id);if (found) {item1.disabled = true;}
});console.log(array1);

方法2:使用Map或Set提高效率

如果需要多次进行这样的比较,使用Map或Set可以提高效率。

const array1 = [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }
];const array2 = [{ id: 2, name: 'Item 2' },{ id: 4, name: 'Item 4' }
];// 将array2的id存储到Set中,以便快速查找
const idsSet = new Set(array2.map(item => item.id));array1.forEach(item => {if (idsSet.has(item.id)) {item.disabled = true;}
});console.log(array1);

方法3:使用findIndex提高可读性 

如果想要一个更简洁的解决方案,可以使用findIndex,虽然它在性能上可能不如someSet,但在某些情况下代码更易读。

const array1 = [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }
];const array2 = [{ id: 2, name: 'Item 2' },{ id: 4, name: 'Item 4' }
];array1.forEach(item => {if (array2.findIndex(item2 => item2.id === item.id) !== -1) {item.disabled = true;}
});console.log(array1);

方法4:使用filter和map组合(如果只需要标记)

如果只是想标记哪些对象存在于另一个数组中,而不直接修改原数组,可以使用filtermap

const array1 = [...array1]; // 复制原数组以避免修改原数组,除非你愿意这样做。
const markedArray = array1.map(item => {if (array2.some(item2 => item2.id === item.id)) {return { ...item, disabled: true }; // 使用扩展运算符创建新对象以避免直接修改原对象。} else {return item; // 不修改原对象。}
});
console.log(markedArray); // 这将显示带有disabled属性的新数组。

选择哪种方法取决于具体业务需求和性能考虑。对于大多数实际应用场景,使用SetMap的方法通常是最快和最清晰的。特此记录一下~

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

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

相关文章

编写大模型Prompt提示词方法

明确目标和任务 // 调用LLM进行分析const prompt 你是一名严格而友好的英语口语评分官,专业背景包括语音学(phonetics)、二语习得(SLA)和自动语音识别(ASR)。你的任务是: ① 比对参…

MCP系列(一)什么是MCP?

MCP 是什么:从 USB-C 到 AI 的「万能接口」哲学 MCP(Model Context Protocol,模型上下文协议) 是Anthropic于2024年11月推出的AI跨系统交互标准,专为解决LLM(大语言模型)的「数字失语症」——让…

NoMachine 将虚拟显示器改为物理显示器

一、前言 大多数服务器需求是设置为虚拟显示器,因为服务器本身不接物理的显示器。但我的需求不太一样,服务器就在身边,有时候关闭远控也需要实时监测,所以接了物理的显示器。 NoMachine 默认会为用户创建一个新的桌面会话&#xf…

YOLOv8 优化:基于 Damo-YOLO 与 DyHead 检测头融合的创新研究

文章目录 YOLOv8 的背景与发展Damo-YOLO 的优势与特点DyHead 检测头的创新之处融合 Damo-YOLO 与 DyHead 检测头的思路融合后的模型架构融合模型的代码实现导入必要的库定义 Damo-YOLO 的主干网络定义特征金字塔网络(FPN)定义 DyHead 检测头定义融合后的…

关税冲击下,FBA国际物流企业如何靠智能拓客跑出增长“加速度”?

国际物流行业正迎来前所未有的增长机遇。据中研普华最新报告,2025年全球物流市场规模已突破6.27万亿美元,其中中国跨境物流市场预计达2.71万亿元。在全球化与数字化双轮驱动下,国际物流从“规模扩张”迈向“价值重构”。可以说,国…

《内存单位:解锁数字世界的“度量衡”》

🚀个人主页:BabyZZの秘密日记 📖收入专栏:C语言 🌍文章目入 一、基础单位:字节(Byte)二、进阶单位:千字节(KB)、兆字节(MB&#xff09…

PyQt 探索QMainWindow:打造专业的PyQt5主窗

在PyQt5的世界里,窗口的创建和管理是构建图形用户界面(GUI)的基础。QMainWindow作为主窗口类,为开发者提供了强大而灵活的应用程序框架。今天,就让我们一起深入了解QMainWindow的奥秘。 QMainWindow简介 QMainWindow…

Missashe高数强化学习笔记(随时更新)

Missashe高数强化学习笔记 说明:这篇笔记用于博主对高数强化课所学进行记录和总结。由于部分内容写在博主的日记博客里,所以博主会不定期将其重新copy到本篇笔记里。 第一章 函数极限连续 第二章 一元函数微分学 第三章 一元函数积分学 第一节 不定…

Ruby 字符串(String)

Ruby 字符串(String) 引言 在编程语言中,字符串是表示文本数据的一种基本数据类型。在Ruby中,字符串处理是日常编程中非常常见的一项任务。本文将详细介绍Ruby中的字符串(String)类型,包括其创…

【wpf】12 在WPF中实现HTTP通信:封装HttpClient的最佳实践

一、背景介绍 在现代桌面应用开发中,网络通信是不可或缺的能力。WPF作为.NET平台下的桌面开发框架,可通过HttpClient轻松实现与后端API的交互。本文将以一个实际的HttpsMessages工具类为例,讲解如何在WPF中安全高效地封装HTTP通信模块。 二、…

【2025最新】gitee+pycharm完成项目的上传与管理

再见了误删、误改以及不知道动了哪里突然就不能运行的整个项目! 之前做过一次全流程!结果没有及时记录文档,很快就忘记了,每次从头开始就觉得有很大的阻力,不想搞。导致每次误删和项目出bug都非常痛苦。 可见&#x…

ACTF2025 - Web writeup

ACTF2025 - Web writeup ACTF upload 进去后是一个登录界面,输入用户名后登录,然后到一个文件上传的界面。 在 /upload?file_path 处,可以实现任意文件读取,文件内容保存在 img 标签中的 base64 值中。 示例请求:…

BERT模型讲解

BERT的模型架构 BERT: Bidirectional Encoder Representations from Transformers BERT这个名称直接反映了:它是一个基于Transformer编码器的双向表示模型。BERT通过堆叠多层编码器来构建深度模型。举例来说: BERT-Base:堆叠了12层Encoder&a…

权限控制模型全解析:RBAC、ACL、ABAC 与现代混合方案

权限控制模型全解析:RBAC、ACL、ABAC 与现代混合方案 在企业信息系统、SaaS 应用、安全平台中,权限控制模型是确保用户访问安全和功能隔离的基础架构设计之一。本文将系统性梳理常见的权限控制模型,包括 RBAC、ACL、ABAC、DAC、MAC、ReBAC 等…

一些模型测试中的BUG和可能解决方法

一些模型测试中的BUG和可能解决方法 模型一直重复反馈相同内容的问题查找思路 如下顺序也是排查优先级 检查提示词和上下文,保证提示词中没有类似的要求,然后再查看上下文是不是占满了token长度。检查一下选择的model是不是本身就有这样的问题尝试增加repeat_penalty(1.05、…

Kafka的Log Compaction原理是什么?

Kafka的Log Compaction(日志压缩)是一种独特的数据保留策略,其核心原理是保留每个key的最新有效记录。以下是关键原理分点说明: 1. 键值保留机制 通过扫描所有消息的key,仅保留每个key对应的最新value值。例如&#…

在 MyBatis 中实现控制台输出 SQL 参数

在 MyBatis 中实现控制台输出 SQL 参数,可通过以下方案实现: # 一、使用 MyBatis-Plus 的 SqlLogInterceptor(推荐) ‌适用场景‌:项目已集成 MyBatis-Plus(3.5.3版本) ‌配置步骤‌&#xff…

黄金、碳排放期货市场API接口文档

StockTV 提供了多种期货市场的数据接口,包括获取K线图表数据、查询特定期货的实时行情等。以下为对接期货市场的详细接口说明。 一、获取K线图表数据 通过调用/futures/kline接口,您可以获取指定期货合约的历史K线数据(例如开盘价、最高价、…

“ES7+ React/Redux/React-Native snippets“常用快捷前缀

请注意,这是一个常用的列表,不是扩展提供的所有前缀。最完整和最新的列表请参考扩展的官方文档或在 VS Code 中查看扩展的详情页面。 React (通常用于 .js, .jsx, .ts, .tsx): rfce: React Functional Component with Export Defaultrafce: React Arro…

[Windows] 能同时打开多个图片的图像游览器JWSEE v2.0

[Windows] 能同时打开多个图片的图像游览器JWSEE 链接:https://pan.xunlei.com/s/VOPpO86Hu3dalYLaZ1ivcTGIA1?pwdhckf# 十多年前收藏的能同时打开多个图片的图像游览器JWSEE v2.0,官网已没有下载资源。 JWSEE v2.0是乌鲁木齐金维图文信息科技有限公司…