如何在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物件不包含year屬性。

<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物件包含table2物件所有具有等效值的屬性。我們使用Object.keys()將所有鍵獲取到陣列中,然後對該陣列使用every()方法。

我們將回調函式作為every()方法的引數傳遞,該函式以鍵作為引數。因此,我們正在檢查該鍵是否存在於table1物件中,如果存在,它是否包含與table2物件相同的值?

如果table1物件包含table2物件的每個鍵且值都相等,則返回true;否則返回false。

<html>
<body>
   <h3>Using the <i>array.every</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 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>
</body>
</html>

在本教程中,我們學習瞭如何使用不同的方法來檢查第一個物件是否包含第二個物件的所有屬性,且值相等。最好的方法是使用array.every()方法,因為它只有一行程式碼。

更新於:2023年2月16日

1K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.