Comment Vérifier si un Élément est Présent dans un Tableau en JavaScript?

Un tableau est un type de données pouvant contenir plusieurs valeurs dans une seule variable. C'est une excellente solution si vous avez une liste d'éléments différents et que vous souhaitez les stocker. En triant différents éléments, cela facilite également la recherche. Il est essentiel de connaître les opérations de base sur les baies pour améliorer vos compétences en programmation. Voyons un exemple de tableau:

Exemple

<!DOCTYPE html>
<html>
  <body>
    <h2>Tableaux JavaScript</h2>
    <p id="demo"></p>
    <script>
      var fleurs= ["Rose", "Marguerite", "Lis"];
      document.getElementById("demo").innerHTML = fleurs;
    </script>
  </body>
</html>

Très souvent, nous devons vérifier si l'élément est dans un tableau en JavaScript ou non. Dans cet extrait, nous allons apprendre quelques méthodes pour le faire.

Premièrement, nous examinerons une solution simple mais efficace. Nous devons simplement définir des instructions si un élément est présent dans le tableau, comme ceci:

var array = [11, 20, 8, 6, 17];

var el = 6; //Elément à rechercher

for(var i=0; i<array.length; i++) {
	if(el === array[i]) {
		console.log('Element Found');
	}
}

Comme vous pouvez le constater, le tableau est parcouru d'index 0 à array.length - 1 index et ne remarque que l'opérateur inférieur à (<) et non inférieur à égal à (<=). Cela fonctionne comme ceci: dans la condition if, nous vérifions si un élément du tableau est égal à la valeur de l'élément à rechercher. Si tel est le cas, affichez ‘Element found’.

Maintenant, nous allons définir des conditions et prendre une variable pour dire si un élément est trouvé.

var array = [11, 20, 8, 6, 17];

var el = 6; //Elément à rechercher
var flag = 0;  // Initialement 0 - Introuvable

for(var i=0; i<array.length; i++) {
    if(el === array[i]) {
         flag = 1;
    }
}

//Vérifier si la valeur du drapeau a changé.
if(flag == 1) {
   console.log('Element Found');
} else { 
   console.log('Element Not Found');
}

Si l’élément est trouvé, la valeur du drapeau changera dans la condition if et c’est ainsi que nous pourrons vérifier s’il est présent ou non.

Voyons maintenant une autre méthode pour vérifier si l’élément est présent dans le tableau ou non. C'est la méthode includes (), qui est maintenant couramment utilisée.

Cette méthode retourne true si le tableau contient l'élément spécifié et false sinon, comme ceci:

var array = [11, 20, 8, 6, 17];
console.log( array.includes(6) ); //True

Voyons un autre exemple:

Exemple

<!DOCTYPE html>
<html>
  <body>
    <h1>includes()</h1>
    <p>Vérifiez si le tableau de fleurs contient "Marguerite":</p>
    <p id="demo"></p>
    <p><strong>Note:</strong> La méthode includes n'est pas prise en charge dans Edge 13 (et les versions antérieures).</p>
    <script>
      var fleurs= ["Rose", "Marguerite", "Lis", "Jasmine"];
      var n = fleurs.includes("Marguerite");
      
      document.getElementById("demo").innerHTML = n;
      
    </script>
  </body>
</html>
Notez que la méthode includes () est sensible à la casse.

Il existe une méthode supplémentaire qui peut être utile. La méthode indexOf est utilisée pour rechercher l'index d'un élément de tableau. Il indique si le tableau contient l'élément donné ou non. Si l'élément donné dans la méthode JavaScript indexOf est trouvé, il renverra le numéro d'index de cet élément. Sinon, indexOf renvoie la valeur -1.

Voici à quoi ressemble le code:

var myArray = ["Rose", "Lis", "Margueritte", "Jasmine"];

if (myArray.indexOf(searchTerm) === -1) {
 console.log("element doesn't exist");
}
else {
 console.log("element found");
}

Ces deux méthodes ont deux paramètres: element et start. Voyons les:

Paramètre Description
element Requis. L'élément à rechercher.
start Optionnel. Par défaut 0. À quelle position dans le tableau pour lancer la recherche.