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
Copier après la connexion
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>
Copier après la connexion
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;
}
})
}
Copier après la connexion
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>
Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
