Maison >interface Web >js tutoriel >Comment comparer deux objets en JavaScript pour déterminer si le premier objet contient la même valeur de propriété que le deuxième objet ?
Comment comparer deux objets en JavaScript pour déterminer si le premier objet contient la même valeur de propriété que le deuxième objet ?
- 王林avant
- 2023-08-24 21:09:021056parcourir
En JavaScript, les objets contiennent diverses propriétés et méthodes. Pour chaque attribut, il contient une valeur. Nous devons également comparer les valeurs des propriétés pour comparer deux objets.
Ici, nous allons apprendre à vérifier si le premier objet contient toutes les propriétés que contient le deuxième objet et comparer la valeur de chaque propriété.
Comparez les valeurs des attributs d'objet une par une
Le moyen le plus simple est de vérifier si le premier objet contient toutes les propriétés du deuxième objet. Si le premier objet contient la propriété, les valeurs des deux sont comparées.
Cela signifie que nous comparerons toutes les propriétés une par une dans cette méthode.
Grammaire
Les utilisateurs peuvent suivre la syntaxe suivante pour vérifier si le premier objet contient toutes les propriétés du deuxième objet qui ont la même valeur en 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
}
Dans la syntaxe ci-dessus, obj1 et obj2 sont des objets différents contenant des propriétés différentes.
Exemple
Dans l'exemple ci-dessous, nous avons créé des objets obj1 et obj2. Nous utilisons une instruction conditionnelle if-else pour comparer toutes les valeurs d'attribut de l'objet2 avec les valeurs d'attribut de l'objet1.
<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>
Utilisez une boucle forEach pour comparer les propriétés du deuxième objet avec les propriétés du premier objet
Dans cette méthode, nous utiliserons la boucle JavaScript forEach pour parcourir toutes les clés du deuxième objet et faire correspondre leurs valeurs avec les valeurs de propriété équivalentes du premier objet. Nous pouvons récupérer toutes les clés de l’objet dans le tableau. Ensuite, nous pouvons utiliser forEach pour parcourir le tableau de clés.
Grammaire
Les utilisateurs peuvent utiliser la boucle forEach en suivant la syntaxe suivante pour déterminer si le premier objet contient une valeur de propriété équivalente à celle du deuxième objet.
Object.keys(student2).forEach((key) => {
if (student2[key] !== student1[key]) {
isSame = false;
}
})
Dans la syntaxe ci-dessus, nous comparons la valeur de chaque clé de l'objet student2 avec l'objet student1.
Exemple
Dans l'exemple ci-dessous, nous avons créé des objets student1 et student2 contenant des propriétés différentes. Après cela, nous utilisons la méthode Object.keys() pour obtenir toutes les clés de l'objet student2. Ensuite, nous utilisons forEach pour parcourir toutes les clés de l’objet Student2.
Nous comparons les valeurs clés de l'objet student2 et de l'objet student1. Dans la sortie, nous pouvons observer qu'il affiche « L'attribut et la valeur de l'objet ne correspondent pas » car l'objet Student1 ne contient pas l'attribut année.
<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>
Utilisez la méthode array.every()
La méthode JavaScript array.every() vérifie si chaque élément d'un tableau suit une condition spécifique. Par exemple, nous pouvons utiliser la méthode array.every() pour vérifier si tous les numéros de tableau sont inférieurs à 100.
Ici, nous utiliserons la méthode array.every() pour vérifier si object1 contient tous les attributs de object2 avec la même valeur.
Grammaire
Les utilisateurs peuvent utiliser la méthode array.every() selon la syntaxe suivante pour déterminer si le premier objet contient la même valeur d'attribut que le deuxième objet.
let result = Object.keys(table2).every((key) => table1[key] != undefined && table1[key] === table2[key]);
Dans la syntaxe ci-dessus, si la valeur d'une propriété particulière n'est pas définie, alors la propriété n'existe pas dans l'objet. Après cela, nous avons comparé les valeurs des attributs.
Exemple
Dans l'exemple ci-dessous, l'objet table1 contient toutes les propriétés qui ont des valeurs équivalentes à l'objet table1. Nous utilisons Object.keys() pour obtenir toutes les clés du tableau et utilisons la méthode each() sur le tableau.
Nous passons la fonction de rappel en paramètre à la méthode each(), qui prend la clé en paramètre. Nous vérifions donc si la clé existe dans l'objet table1 et si c'est le cas, contient-elle la même valeur que l'objet table2 ?
Renvoie vrai si l'objet table1 contient toutes les clés de l'objet table2 et que les valeurs sont égales, sinon, faux sera renvoyé ;
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) => 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>
Dans ce tutoriel, nous avons appris à utiliser différentes méthodes pour vérifier si le premier objet contient toutes les propriétés du deuxième objet avec les mêmes valeurs. La meilleure façon est d’utiliser la méthode array.every() car elle contient une ligne de code.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript