Maison > Article > interface Web > Comment comparer deux objets tableau JavaScript en utilisant jQuery/JavaScript ?

Comment comparer deux objets tableau JavaScript en utilisant jQuery/JavaScript ?

PHPzavant: 2023-08-22 21:49:021338parcourir

En JavaScript, un tableau est un objet avec un index comme clé et une valeur de tableau comme valeur d'une clé spécifique de l'objet tableau. Parfois, nous devons vérifier si deux tableaux sont identiques.

La première solution qui me vient à l'esprit est d'utiliser l'opérateur égal et de comparer comme array1 == array2. oups! Cela ne fonctionnera pas car un tableau est un objet et en JavaScript, nous ne pouvons pas comparer directement deux objets. Nous devons donc comparer chaque élément du tableau.

Dans ce tutoriel, nous apprendrons différentes méthodes pour comparer deux objets tableau JavaScript.

Utilisez la méthode sort() de JavaScript et comparez chaque élément

La méthode

sort() nous permet de trier les valeurs d'un tableau en JavaScript. Après cela, nous pouvons utiliser une boucle for pour comparer les éléments à chaque index du tableau. Si les éléments d’un index ne correspondent pas, nous pouvons dire que les deux objets du tableau sont différents.

Syntaxe

Les utilisateurs peuvent utiliser la méthode sort() et la boucle for pour comparer deux objets tableau selon la syntaxe suivante.

// sort arrays first
arra1.sort();
array2.sort();
   if (array1.length != array2.length) {
      // arrays are not the same
   } else {
      for () {
         // if elements at index i are not the same, return false
      }
   }
}
// both arrays are the same

Algorithme

Les utilisateurs peuvent fonctionner selon l'algorithme suivant.

Étape 1 - Utilisez la méthode sort() pour trier les deux tableaux.
Étape 2 - Comparez les longueurs des deux tableaux ; si les longueurs ne sont pas les mêmes, renvoyez false, indiquant que les deux tableaux ne sont pas identiques.
Étape 3 - Si la longueur des deux tableaux est la même, utilisez une boucle for pour parcourir les deux tableaux.
Étape 4 - Comparez les éléments des deux tableaux à chaque index, et si les éléments de l'index ne correspondent pas, renvoyez false.
Étape 5 - Deux tableaux sont identiques si tous les éléments des deux tableaux correspondent.

Exemple

Dans l'exemple ci-dessous, nous avons créé deux tableaux de nombres et les avons triés à l'aide de la méthode sort(). Nous utilisons ensuite une boucle for pour comparer chaque élément des deux tableaux.

Dans la sortie, les utilisateurs peuvent voir que les deux tableaux sont identiques car les deux tableaux contiennent les mêmes valeurs.

<html>
<body>
   <h3>Using the <i>array.sort()</i> method and <i>for</i> loop to check if two arrays are the same using JavaScript </h2>
   <button onclick = "checkArray()"> Compare arrays </button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = [32, 32, 54, 1, 2, 3, 4];
      let array2 = [1, 2, 3, 4, 32, 54, 32];
      output.innerHTML += "The first array values are " + array1 + "<br>";
      output.innerHTML += "The second array values are " + array2 + "<br>";
      function checkArray() {
         array1.sort();
         array2.sort();
         if (array1.length != array2.length) {
            output.innerHTML += "Both arrays are not same!";
            return false;
         } else {
            for (let i = 0; i < array1.length; i++) {
               if (array1[i] != array2[i]) {
                  output.innerHTML += "Both arrays are not same!";
                  return false;
               }
            }
         }
         output.innerHTML += "Both arrays are the same!";
         return true;
      }
   </script>
</body>
</html>

Utilisez la boucle forEach et la méthode indexOf()

Nous pouvons utiliser la boucle forEach pour parcourir chaque élément du tableau. La méthode indexOf() trouve la première occurrence de l'élément dans le tableau et renvoie -1 si le tableau de référence ne contient pas l'élément.

Syntaxe

Les utilisateurs peuvent utiliser la boucle forEach et la méthode indexOf() pour comparer deux objets tableau selon la syntaxe suivante.

if (array2.length != array1.length) {
   // array are not the same
   return false;
} else {
   array1.forEach((element) => {
      if (array2.indexOf(element) == -1) {
         return false;
      }
   })
}

Algorithme

Dans cet algorithme, nous n'avons pas besoin de trier les tableaux comme dans la première approche.

Étape 1 - Vérifiez si les longueurs des deux tableaux sont les mêmes ; sinon, renvoyez false.
Étape 2 - Si les longueurs sont les mêmes, utilisez la boucle forEach() pour parcourir chaque élément.
Étape 3 - Pour chaque élément du tableau 1, utilisez la méthode indexOf() pour vérifier s'il existe dans le tableau 2.
Étape 4 - Si la méthode indexOf() renvoie -1 pour n'importe quel élément, cela signifie que les deux tableaux ne sont pas identiques.

Exemple

Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur le bouton, il appellera une fonction compareArray(). La fonction compareArray() compare les deux tableaux d'éléments de chaîne.

Dans la sortie, l'utilisateur peut observer que les deux tableaux ne sont pas identiques car les valeurs des deux tableaux sont différentes.

<html>
<body>
   <h3>Using the <i>forEach() loop and indexOf() method</i> to check if two arrays are the same using JavaScript </h3>
   <button onclick = "compareArray()"> Compare arrays</button>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array1 = ["Hello", "Hi", "How"];
      let array2 = ["Are", "You", "!"];
      output.innerHTML += "The first array values are " + array1 + " <br>";
      output.innerHTML += "The second array values are " + array2 + " <br>";
      function compareArray() {
         var isSame = true;
         if (array2.length != array1.length) {
            output.innerHTML += "Both arrays are not same!";
            return false;
         } else {
            array2.forEach((element) => {
               if (array1.indexOf(element) == -1) {
                  isSame = false;
               }
            })
         }
         if (isSame) {
            output.innerHTML += "Both arrays are the same!";
         } else {
            output.innerHTML += "Both arrays are not same!";
         }
         return true;
      }
   </script>
</body>
</html>

Nous avons appris deux manières différentes de comparer deux tableaux en JavaScript. Les utilisateurs peuvent utiliser la première méthode pour comparer des tableaux contenant des valeurs en double, tandis que la seconde méthode ne convient que pour comparer des tableaux contenant des valeurs uniques.

En outre, les utilisateurs peuvent utiliser la méthode JSON.stringify() pour comparer le tableau d'objets et les tableaux triés.

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!

JavaScript json jquery String Array if sort for foreach 循环 function 对象 this 算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Ajoutez des motifs avec des images et des couleurs aux polygones à l'aide de FabricJSArticle suivant：Ajoutez des motifs avec des images et des couleurs aux polygones à l'aide de FabricJS

Articles Liés

Voir plus