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
英文地址,請注明出處:http://en.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是烏魯木齊金維圖文信息科技有限公司…