Heim > Web-Frontend > js-Tutorial > Wie vergleiche ich zwei Objekte in JavaScript, um festzustellen, ob das erste Objekt denselben Eigenschaftswert wie das zweite Objekt enthält?

Wie vergleiche ich zwei Objekte in JavaScript, um festzustellen, ob das erste Objekt denselben Eigenschaftswert wie das zweite Objekt enthält?

王林
Freigeben: 2023-08-24 21:09:02
nach vorne
1049 Leute haben es durchsucht

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

In JavaScript enthalten Objekte verschiedene Eigenschaften und Methoden. Für jedes Attribut enthält es einen Wert. Wir müssen auch die Werte der Eigenschaften vergleichen, um sie zwischen zwei Objekten zu vergleichen.

Hier lernen wir, zu überprüfen, ob das erste Objekt alle Eigenschaften enthält, die das zweite Objekt enthält, und den Wert jeder Eigenschaft zu vergleichen.

Objektattributwerte einzeln vergleichen

Der einfachste Weg besteht darin, zu überprüfen, ob das erste Objekt alle Eigenschaften des zweiten Objekts enthält. Wenn das erste Objekt die Eigenschaft enthält, werden die Werte der beiden verglichen.

Das bedeutet, dass wir bei dieser Methode alle Eigenschaften einzeln vergleichen.

Grammatik

Benutzer können der folgenden Syntax folgen, um zu überprüfen, ob das erste Objekt alle Eigenschaften des zweiten Objekts enthält, die in JavaScript denselben Wert haben.

if (obj1.prop1 === obj2.prop2 && obj1.prop2 === obj.prop2) {
   // obj1 contains the all properties of obj2 with equivalent values
} else {
   // property values are mismatched
}
Nach dem Login kopieren

In der obigen Syntax sind obj1 und obj2 unterschiedliche Objekte mit unterschiedlichen Eigenschaften.

Beispiel

Im folgenden Beispiel haben wir die Objekte obj1 und obj2 erstellt. Wir verwenden eine if-else-Bedingungsanweisung, um alle Attributwerte von Objekt2 mit den Attributwerten von Objekt1 zu vergleichen.

<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>
Nach dem Login kopieren

Verwenden Sie eine forEach-Schleife, um die Eigenschaften des zweiten Objekts mit den Eigenschaften des ersten Objekts zu vergleichen

In dieser Methode verwenden wir die JavaScript-forEach-Schleife, um alle Schlüssel des zweiten Objekts zu durchlaufen und ihre Werte mit den entsprechenden Eigenschaftswerten des ersten Objekts abzugleichen. Wir können alle Schlüssel des Objekts im Array abrufen. Anschließend können wir forEach verwenden, um das Schlüsselarray zu durchlaufen.

Grammatik

Benutzer können die forEach-Schleife gemäß der folgenden Syntax verwenden, um festzustellen, ob das erste Objekt einen äquivalenten Eigenschaftswert zum zweiten Objekt enthält.

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

In der obigen Syntax vergleichen wir den Wert jedes Schlüssels des Objekts student2 mit dem Objekt student1.

Beispiel

Im folgenden Beispiel haben wir student1- und student2-Objekte erstellt, die unterschiedliche Eigenschaften enthalten. Danach verwenden wir die Methode Object.keys(), um alle Schlüssel des student2-Objekts abzurufen. Als nächstes verwenden wir forEach, um alle Schlüssel des Student2-Objekts zu durchlaufen.

Wir vergleichen die Schlüsselwerte des Objekts student2 und des Objekts student1. In der Ausgabe können wir beobachten, dass „Objektattribut und -wert stimmen nicht überein“ ausgegeben wird, da das Student1-Objekt das Jahresattribut nicht enthält.

<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>
Nach dem Login kopieren

Verwenden Sie die Methode array.every()

Die JavaScript-Methode array.every() prüft, ob jedes Element eines Arrays eine bestimmte Bedingung erfüllt. Beispielsweise können wir mit der Methode array.every() prüfen, ob alle Array-Nummern kleiner als 100 sind.

Hier verwenden wir die Methode array.every(), um zu prüfen, ob Objekt1 jedes Attribut von Objekt2 mit demselben Wert enthält.

Grammatik

Benutzer können die Methode array.every() gemäß der folgenden Syntax verwenden, um festzustellen, ob das erste Objekt denselben Eigenschaftswert wie das zweite Objekt enthält.

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

Wenn in der obigen Syntax der Wert einer bestimmten Eigenschaft undefiniert ist, dann ist die Eigenschaft im Objekt nicht vorhanden. Danach haben wir die Attributwerte verglichen.

Beispiel

Im folgenden Beispiel enthält das Objekt table1 alle Eigenschaften, die äquivalente Werte zum Objekt table1 haben. Wir verwenden Object.keys(), um alle Schlüssel im Array abzurufen, und verwenden die Methode every() für das Array.

Wir übergeben die Callback-Funktion als Parameter an die Methode every(), die den Schlüssel als Parameter akzeptiert. Wir prüfen also, ob der Schlüssel im Objekt Tabelle1 vorhanden ist und wenn ja, enthält er denselben Wert wie das Objekt Tabelle2?

Gibt „true“ zurück, wenn das Objekt „table1“ alle Schlüssel des Objekts „table2“ enthält und die Werte gleich sind; andernfalls wird „false“ zurückgegeben.



   

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>
Nach dem Login kopieren

In diesem Tutorial haben wir gelernt, wie man mit verschiedenen Methoden überprüft, ob das erste Objekt alle Eigenschaften des zweiten Objekts mit denselben Werten enthält. Der beste Weg ist die Verwendung der Methode array.every(), da sie eine Codezeile enthält.

Das obige ist der detaillierte Inhalt vonWie vergleiche ich zwei Objekte in JavaScript, um festzustellen, ob das erste Objekt denselben Eigenschaftswert wie das zweite Objekt enthält?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage