Comment rechercher un élément dans un tableau à l'aide de JavaScript : un guide complet avec des exemples DOM

Rechercher des éléments dans un tableau est une tâche courante dans la programmation JavaScript. ? Que vous souhaitiez vérifier si un élément existe, récupérer son index ou filtrer une liste, JavaScript propose plusieurs méthodes pour travailler avec des tableaux. ? Ce guide couvrira diverses approches pour rechercher des éléments dans des tableaux et montrera comment utiliser ces méthodes en combinaison avec le DOM pour créer des applications Web interactives. ?✨

Table des matières

1 Introduction aux tableaux JavaScript
2 méthodes de base pour trouver un élément
|- Utilisation de indexOf()
|- Utilisation de find()
|- Utilisation de findIndex()

3 méthodes avancées pour trouver un élément
|- Utilisation d'includes()
|- Utilisation du filtre()

4 Exemple simple utilisant le DOM
5 Conclusion

Introduction aux tableaux JavaScript

Les tableaux JavaScript sont des structures de données polyvalentes qui vous permettent de stocker plusieurs valeurs dans une seule variable. Les tableaux peuvent contenir des éléments de différents types de données, notamment des chaînes, des nombres, des objets et même d'autres tableaux. Voici un exemple :

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

Le tableau ci-dessus contient quatre éléments. Dans les sections suivantes, nous explorerons différentes méthodes pour rechercher des éléments dans de tels tableaux.

Méthodes de base pour trouver un élément

JavaScript propose plusieurs méthodes intégrées pour rechercher des éléments dans un tableau. Vous trouverez ci-dessous quelques méthodes couramment utilisées :

Utilisation de indexOf()
La méthode indexOf() renvoie l'index de la première occurrence d'un élément spécifié, ou -1 s'il n'est pas trouvé.

Syntaxe :

array.indexOf(searchElement, fromIndex);

Exemple

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let position = fruits.indexOf('Mango');
console.log(position); // Output: 2

Dans cet exemple, 'Mango' est situé à l'index 2.

Utilisation de find()
La méthode find() renvoie le premier élément qui satisfait une condition donnée, ou non défini si aucun ne correspond.

Syntaxe :

array.find(function(element, index, array) { /* ... */ });

Exemple

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(element => element > 10);
console.log(found); // Output: 12

Ici, le premier nombre supérieur à 10 est 12.

Utilisation de findIndex()
La méthode findIndex() est similaire à find(), mais elle renvoie l'index du premier élément qui satisfait la condition.

Syntaxe :

array.findIndex(function(element, index, array) { /* ... */ });

Exemple :

let numbers = [5, 12, 8, 130, 44];
let index = numbers.findIndex(element => element > 10);
console.log(index); // Output: 1

Dans ce cas, l'indice du premier élément supérieur à 10 est 1.

Méthodes avancées pour rechercher un élément

Utilisation d'includes()
La méthode include() vérifie si un tableau contient un élément spécifié, renvoyant vrai ou faux.

Syntaxe :

array.includes(searchElement, fromIndex);

Exemple :

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let hasBanana = fruits.includes('Banana');
console.log(hasBanana); // Output: true

Utilisation du filtre()
La méthode filter() renvoie un nouveau tableau avec des éléments qui satisfont une condition spécifiée.

Syntaxe :

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];

Exemple :

array.indexOf(searchElement, fromIndex);

Exemple simple utilisant le DOM

Pour rendre ces concepts plus pratiques, créons une application Web simple qui utilise les méthodes de tableau ci-dessus et affiche les résultats de manière dynamique sur une page Web.

Structure HTML
Créez un fichier HTML nommé index.html :

let fruits = ['Apple', 'Banana', 'Mango', 'Orange'];
let position = fruits.indexOf('Mango');
console.log(position); // Output: 2

Ce HTML comprend des boutons et des paragraphes où les résultats seront affichés.

Code JavaScript (script.js)
Créez un fichier JavaScript nommé script.js avec le code suivant :

array.find(function(element, index, array) { /* ... */ });

Explication du Code

1. findCar() : Utilise indexOf() pour trouver l'index de « Ford » et met à jour le contenu de result1 en conséquence.
2. findLongNameCar() : Utilise find() pour localiser un nom de voiture comportant plus de quatre lettres et affiche le résultat dans result2.
3. checkForAudi() : Utilise include() pour vérifier si « Audi » est dans le tableau, affichant le résultat dans result3.
4. filterCars() : Utilise filter() pour rechercher toutes les voitures commençant par « B » et met à jour le résultat.

Exécuter l'exemple
Ouvrez le fichier index.html dans un navigateur Web. Cliquez sur les boutons pour voir différentes méthodes de tableau en action et observez les résultats affichés dynamiquement.

En combinant les méthodes de tableau JavaScript avec la manipulation DOM, nous pouvons créer des pages Web interactives qui répondent aux actions des utilisateurs. ? Ce guide couvrait les techniques de recherche de tableaux de base et avancées et fournissait un exemple pratique de la façon d'intégrer ces méthodes au DOM. ?? Utilisez ces techniques pour améliorer vos compétences JavaScript et créer des applications Web plus dynamiques. ?✨

Bon codage ! ?

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!