如何在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+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告