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对象不包含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对象包含所有与table1对象等值的属性。我们使用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>