如何在 JavaScript 中比較兩個物件以確定第一個物件是否包含與第二個物件相同的屬性值？
- 王林轉載
- 2023-08-24 21:09:021057瀏覽
在 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中文網其他相關文章！