如何在 JavaScript 中比較兩個物件以確定第一個物件是否包含與第二個物件相同的屬性值？
在 JavaScript 中，物件包含各種屬性和方法。對於每個屬性，它都包含一個值。我們還需要比較屬性的值來進行兩個物件之間的比較。
在這裡，我們將學習檢查第一個物件是否包含第二個物件包含的所有屬性，並比較每個屬性的值。
一一比較物件屬性值
最簡單的方法是檢查第一個物件是否包含第二個物件的每個屬性。如果第一個物件包含該屬性，則比較兩者的值。
這意味著我們將在此方法中一一比較所有屬性。
文法
使用者可以依照下列語法檢查第一個物件是否包含第二個物件在 JavaScript 中具有相同值的所有屬性。
if (obj1.prop1 === obj2.prop2 && obj1.prop2 === obj.prop2) {
// obj1 contains the all properties of obj2 with equivalent values
} else {
// property values are mismatched
}
在上述語法中，obj1 和 obj2 是包含不同屬性的不同物件。
範例
在下面的範例中，我們建立了 obj1 和 obj2 物件。我們使用 if-else 條件語句將 object2 的所有屬性值與 object1 的屬性值進行比較。
<html>
<body>
<h2>Using the <i>strict equality</i> operator to compare object properties.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let obj1 = {
prop1: "Value1",
prop2: "Value2",
prop3: 40,
prop4: false
}
let obj2 = {
prop1: "Value1",
prop3: 40
}
if (obj1.prop1 === obj2.prop2 && obj1.prop3 === obj.prop3) {
output.innerHTML += "The obj1 contains all properties of obj2 with the equivalent values.";
} else {
output.innerHTML += "The properties or property values of obj1 and obj2 are mismatched.";
}
</script>
</body>
</html>
使用 forEach 迴圈比較第二個物件的屬性與第一個物件的屬性
在這個方法中，我們將使用 JavaScript forEach 迴圈來迭代第二個物件的所有鍵，並將其值與第一個物件的等效屬性值進行匹配。我們可以取得數組中物件的所有鍵。之後，我們可以使用 forEach 迴圈遍歷鍵數組。
文法
使用者可以依照下列語法使用 forEach 迴圈來決定第一個物件是否包含與第二個物件等效的屬性值。
Object.keys(student2).forEach((key) => {
if (student2[key] !== student1[key]) {
isSame = false;
}
})
在上面的語法中，我們將student2物件與student1物件的每個鍵的值進行比較。
範例
在下面的範例中，我們建立了包含不同屬性的student1和student2物件。之後，我們使用Object.keys()方法來取得student2物件的所有鍵。接下來，我們使用 forEach 迴圈遍歷 Student2 物件的所有鍵。
我們比較student2物件和student1物件的鍵值。在輸出中，我們可以觀察到它列印“物件屬性和值不匹配”，因為 Student1 物件不包含年份屬性。
<html>
<body>
<h3>Using the <i>forEach loop</i> to compare the first object's property values with the second object's property value. </h3>
<div id = "output"></div>
<script>
let output = document.getElementById('output');
let student1 = {
id: "13",
name: "Shubham",
age: 12,
std: 6
}
let student2 = {
id: "13",
name: "shubham",
year: 12,
}
let isSame = true;
Object.keys(student2).forEach((key) => {
if (student2[key] !== student1[key]) {
isSame = false;
}
})
if (isSame) {
output.innerHTML += "Object properties and values are matched."
} else {
output.innerHTML += "Object properties and values are not matched."
}
</script>
</body>
</html>
使用 array.every() 方法
JavaScript array.every() 方法檢查陣列的每個元素是否遵循特定條件。例如，我們可以使用 array.every() 方法來檢查所有陣列數字是否都小於 100。
這裡，我們將使用 array.every() 方法來檢查 object1 是否包含 object2 具有相同值的每個屬性。
文法
使用者可以依照下列語法使用 array.every() 方法來確定第一個物件是否包含與第二個物件相同的屬性值。
let result = Object.keys(table2).every((key) => table1[key] != undefined && table1[key] === table2[key]);
在上面的語法中，如果特定屬性的值未定義，則該屬性在物件中不存在。之後，我們比較了屬性值。
範例
在下面的範例中，table1 物件包含與 table1 物件具有等效值的所有屬性。我們使用 Object.keys() 來取得陣列中的所有鍵，並對該陣列使用 every() 方法。
我們將回呼函數作為參數傳遞給 every() 方法，該方法將鍵作為參數。因此，我們正在檢查 table1 物件中是否存在該鍵，如果存在，它是否包含與 table2 物件相同的值？
如果table1物件包含table2物件的每個鍵且值相等，則傳回true；否則，將傳回 false。
Using the array.every to compare the first object's property values with the second object's property value.
<script> let output = document.getElementById('output'); let table1 = { _id: 76, colour: "#456754", size: 30 } let table2 = { _id: 76, colour: "#456754", size: 30 } function compareObjectProperties(table1, table2) { let result = Object.keys(table2).every((key) => table1[key] != undefined && table1[key] === table2[key]); if (result) { output.innerHTML += "Object properties and values are matched." } else { output.innerHTML += "Object properties and values are not matched." } } compareObjectProperties(table1, table2); </script>
在本教程中，我們學習了使用不同的方法檢查第一個物件是否包含第二個物件的所有屬性以及相同的值。最好的方法是使用 array.every() 方法，因為它包含一行程式碼。
以上是如何在 JavaScript 中比較兩個物件以確定第一個物件是否包含與第二個物件相同的屬性值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
JavaScript引擎：比較實施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
Python vs. JavaScript：學習曲線和易用性
Apr 16, 2025 am 12:12 AM
Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
從C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
JavaScript在行動中：現實世界中的示例和項目
Apr 19, 2025 am 12:13 AM
JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
了解JavaScript引擎：實施詳細信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：社區，圖書館和資源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
Python vs. JavaScript：開發環境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
