Quatre façons différentes de rechercher un tableau en JavaScript

Il existe différentes méthodes en JavaScript que vous pouvez utiliser pour rechercher un élément dans un tableau. La méthode que vous choisissez dépend de votre cas d'utilisation spécifique.

Par exemple, souhaitez-vous obtenir tous les éléments d'un tableau qui répondent à une condition spécifique? Voulez-vous vérifier si un article remplit la condition? Voulez-vous vérifier si une valeur spécifique se trouve dans le tableau? Ou voulez-vous trouver l'index de la valeur dans le tableau?

Pour tous ces cas d'utilisation, les méthodes Array.prototype de JavaScript vous ont couvert. Dans cet article, nous allons discuter de quatre méthodes que nous pouvons utiliser pour rechercher un élément dans un tableau. Ces méthodes sont:

  1. Filtre
  2. Trouver
  3. Comprend
  4. Indice de

Discutons de chacun d'eux.

Array.filter ()

Nous pouvons utiliser la méthode Array.filter () pour trouver des éléments dans un tableau qui remplissent une certaine condition. Par exemple, si nous voulons obtenir tous les éléments dans un tableau de nombres supérieurs à 10, nous pouvons le faire:

const array = [10, 11, 3, 20, 5]; const greaterThanTen = array.filter(element => element > 10); console.log(greaterThanTen) //[11, 20]

La syntaxe d'utilisation de la méthode array.filter () est la suivante:

let newArray = array.filter(callback);

  • newArray est le nouveau tableau qui est retourné
  • array est le tableau sur lequel la méthode de filtrage est appelée
  • callback est la fonction de rappel appliquée à chaque élément du tableau

Si aucun élément du tableau ne remplit la condition, un tableau vide est renvoyé. Vous pouvez en savoir plus sur cette méthode ici.

Il y a des moments où nous n'avons pas besoin de tous les éléments qui remplissent une certaine condition. Nous avons juste besoin d'un élément qui correspond à la condition. Dans ce cas, vous avez besoin de la méthode find ().

Array.find ()

Nous utilisons la méthode Array.find () pour trouver le premier élément qui remplit une certaine condition. Tout comme la méthode de filtrage, elle prend un rappel comme argument et renvoie le premier élément qui répond à la condition de rappel.

Utilisons la méthode find sur le tableau dans notre exemple ci-dessus.

const array = [10, 11, 3, 20, 5]; const greaterThanTen = array.find(element => element > 10); console.log(greaterThanTen)//11

La syntaxe de array.find () est

let element = array.find(callback);

Le rappel est la fonction qui est exécutée sur chaque valeur du tableau et prend trois arguments:

  • element - l'élément en cours d'itération (obligatoire)
  • index - l'index / la position de l'élément courant (facultatif)
  • array- le tableau findappelé (facultatif)

Notez cependant que si aucun élément du tableau ne remplit la condition, il retourne undefined.

Et si, cependant, vous voulez vérifier si un certain élément est dans un tableau? Comment est-ce que tu fais ça?

Array.includes ()

La méthode includes () détermine si un tableau comprend une certaine valeur et renvoie vrai ou faux selon le cas.

Donc, dans l'exemple ci-dessus, si nous voulons vérifier si 20 est l'un des éléments du tableau, nous pouvons le faire:

const array = [10, 11, 3, 20, 5]; const includesTwenty = array.includes(20); console.log(includesTwenty)//true

Vous remarquerez une différence entre cette méthode et les autres méthodes que nous avons envisagées. Cette méthode accepte une valeur plutôt qu'un rappel comme argument. Voici la syntaxe de la méthode includes:

const includesValue = array.includes(valueToFind, fromIndex)

  • valueToFind est la valeur que vous recherchez dans le tableau (obligatoire), et
  • fromIndex est l'index ou la position dans le tableau à partir de laquelle vous souhaitez commencer la recherche de l'élément (facultatif)

Pour obtenir le concept de l'index, revoyons notre exemple. Si nous voulons vérifier si le tableau contient 10 dans d'autres positions en dehors du premier élément, nous pouvons le faire:

const array = [10, 11, 3, 20, 5]; const includesTenTwice = array.includes(10, 1); console.log(includesTenTwice)//false

Array.indexOf ()

La méthode indexOf () renvoie le premier index auquel un élément donné peut être trouvé dans un tableau. Il renvoie -1 si l'élément n'existe pas dans le tableau.

Revenons à notre exemple. Trouvons l'indice de 3 dans le tableau.

const array = [10, 11, 3, 20, 5]; const indexOfThree = array.indexOf(3); console.log(indexOfThree)//2

Sa syntaxe est similaire à celle de la includesméthode.

const indexOfElement = array.indexOf(element, fromIndex)

  • element est l'élément que vous recherchez dans le tableau (obligatoire), et
  • fromIndex est l'index ou la position dans le tableau à partir de laquelle vous souhaitez commencer la recherche de l'élément (facultatif)

Il est important de noter que les méthodes includeset indexOfutilisent une égalité stricte ('===') pour rechercher le tableau. Si les valeurs sont de types différents (par exemple «4» et 4), elles renverront respectivement falseet -1.

Sommaire

Avec ces méthodes de tableau, vous n'avez pas besoin d'utiliser une boucle for pour rechercher un tableau. En fonction de vos besoins, vous pouvez décider laquelle des méthodes est la mieux adaptée à votre cas d'utilisation.

Voici un résumé du moment où utiliser chaque méthode:

  • À utiliser filtersi vous souhaitez rechercher tous les éléments d'un tableau qui répondent à une condition spécifique.
  • À utiliser findsi vous souhaitez vérifier si au moins un élément répond à une condition spécifique.
  • À utiliser includessi vous souhaitez vérifier si un tableau contient une valeur particulière.
  • À utiliser indexOfsi vous souhaitez rechercher l'index d'un élément particulier dans un tableau.

Vous souhaitez être averti lorsque je publie un nouvel article? Cliquez ici.