Home >Web Front-end >JS Tutorial >How to compare two objects in JavaScript to determine if the first object contains the same property value as the second object?

How to compare two objects in JavaScript to determine if the first object contains the same property value as the second object?

王林forward: 2023-08-24 21:09:021055browse

如何在 JavaScript 中比较两个对象以确定第一个对象是否包含与第二个对象相同的属性值？

In JavaScript, objects contain various properties and methods. For each attribute, it contains a value. We also need to compare the values of properties to compare between two objects.

Here, we will learn to check if the first object contains all the properties that the second object contains and compare the value of each property.

Compare object attribute values one by one

The simplest way is to check if the first object contains every property of the second object. If the first object contains the property, the values of the two are compared.

This means we will compare all properties one by one in this method.

grammar

Users can follow the following syntax to check whether the first object contains all properties of the second object that have the same value in 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
}

In the above syntax, obj1 and obj2 are different objects containing different properties.

Example

In the following example, we create obj1 and obj2 objects. We use an if-else conditional statement to compare all attribute values of object2 with the attribute values of 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>

Use forEach loop to compare the properties of the second object with the properties of the first object

In this approach, we will use a JavaScript forEach loop to iterate over all the keys of the second object and match their values with the equivalent property values of the first object. We can get all the keys of the object in the array. Afterwards, we can use forEach to loop through the keys array.

grammar

Users can use the forEach loop according to the following syntax to determine whether the first object contains an equivalent property value to the second object.

Object.keys(student2).forEach((key) => {
   if (student2[key] !== student1[key]) {
      isSame = false;
   }
})

In the above syntax, we compare the value of each key of the student2 object with the student1 object.

Example

In the following example, we create student1 and student2 objects containing different properties. After that, we use the Object.keys() method to get all the keys of the student2 object. Next, we use forEach to loop through all the keys of the Student2 object.

We compare the key values of the student2 object and the student1 object. In the output, we can observe that it prints "Object attribute and value do not match" because the Student1 object does not contain the year attribute.

<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>

Use array.every() method

JavaScript array.every() method checks whether each element of the array follows a specific condition. For example, we can use the array.every() method to check if all array numbers are less than 100.

Here, we will use array.every() method to check whether object1 contains every attribute of object2 with the same value.

grammar

Users can use the array.every() method according to the following syntax to determine whether the first object contains the same attribute value as the second object.

let result = Object.keys(table2).every((key) => table1[key] != undefined && table1[key] === table2[key]);

In the above syntax, if the value of a specific property is undefined, the property does not exist in the object. After that, we compared the attribute values.

Example

In the following example, the table1 object contains all properties that have equivalent values to the table1 object. We use Object.keys() to get all the keys in the array and use the every() method on the array.

We pass the callback function as a parameter to the every() method, which takes the key as a parameter. So we are checking if the key exists in the table1 object and if it does, does it contain the same value as the table2 object?

If the table1 object contains each key of the table2 object and the values are equal, true will be returned; otherwise, false will be returned.



   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) =&gt; table1[key] != undefined &amp;&amp; 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>

In this tutorial, we learned about using different methods to check if the first object contains all the properties of the second object with the same values. The best way is to use array.every() method as it contains one line of code.

The above is the detailed content of How to compare two objects in JavaScript to determine if the first object contains the same property value as the second object?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript Array Object if foreach 回调函数循环对象

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How do closures work in JavaScript?Next article：How do closures work in JavaScript?

See more

How to compare two objects in JavaScript to determine if the first object contains the same property value as the second object?

Compare object attribute values ​​one by one

grammar

Example

Use forEach loop to compare the properties of the second object with the properties of the first object

grammar

Example

Use array.every() method

grammar

Example

Using the array.every to compare the first object's property values with the second object's property value.

Related articles

Compare object attribute values one by one