Filtre Javascript

| | | | | | | | | | | | | | | | | | | | | | | | |

La méthode de filtrage JavaScript () crée un tableau d’éléments à partir d’un tableau existant. La méthode filter() prend une fonction de rappel comme argument. Cette fonction évalue si un élément doit être ajouté à la nouvelle liste à partir de celle existante.

Si vous ne savez pas JavaScript , vous n’avez peut-être pas entendu parler des fonctions Javascript filter() et reduce(). Ces fonctions peuvent être utiles lorsque vous travaillez avec une liste d’objets, également appelée tableau.

Si vous souhaitez uniquement obtenir certaines valeurs d’un tableau, vous devez pouvoir utilisez la fonction filter() JavaScript. Dans ce tutoriel, nous verrons, en référence à des exemples, comment utiliser la fonction filter().

Mise à jour tableau namento

Un tableau JavaScript stocke zéro ou plus éléments. Les éléments peuvent être des nombres, d’autres tableaux, des chaaînes ou utiliser un autre type de données. Ils utilisent des index numérotés commençant par " 0 " pour accéder à des éléments spécifiques.

Les tableaux vous permettent de stocker plusieurs valeurs dans la même variable. Cela peut vous aider à écrire mieux et plus proprement car vous n’avez pas besoin d’écrire plusieurs variables pour stocker vos valeurs.

Voici un exemple de tableau en JavaScript:

Tableau de filtres JavaScript

La méthode JavaScript array filter() crée un nouveau tableau basé sur le contenu d’un tableau existant. La méthode filter() évalue une fonction de rappel sur chaque élément d’un tableau existant. Tout élément qui satisfait la condition de la fonction de rappel est ajouté à une nouvelle liste.

En utilisant la méthode de filtrage, nous sommes en mesure de récupérer les valeurs qui répondent à certains critères et de les ajouter à un nouveau tableau. < /p>

Syntaxe du filtre de tableau JavaScript

La méthode filter utilise la syntaxe suivante:

Ce code définit un tableau nommé " newArr "basé sur le contenu du tableau" oldArr ". Notre fonction de rappel renvoie une valeur au nouveau tableau si une condition est remplie. Exemples de conditions:

Vous pouvez utiliser des opérateurs de comparaison JavaScript pour créer vos conditions. Ou vous pouvez utiliser une instruction if. L’utilisation d’une instruction if vous permet de contrôler laquelle des valeurs multiples est ajoutée à une nouvelle liste.

Exemples de filtres JavaScript

Filtrer une liste de nombres

Commençons par un exemple simple . Nous avons une liste d’achats dans un café. Nous souhaitons créer une nouvelle liste indiquant les achats supérieurs à 10 $.

Notre liste de courses ressemble à ceci:

On peut utiliser la méthode filter() pour récupérer les achats de valeur supérieure à 10 $:

Notre programme vérifie si un achat vaut plus de 10 $. Un achat est ajouté à notre liste big_purchases s’il vaut plus de 10 $. Sinon, l’achat est omis.

La valeur de la variable JavaScript de big_purchases est:

La méthode filter() renvoie tous les éléments qu’elle dépasse rano le test que nous avons défini. Ce test est "item> 10". Si nous voulions accéder à chaque achat, nous pourrions nous référer à notre liste "achats" d’origine . Notre méthode filter() renvoie un tableau de valeurs supérieures à 10 $.

Filtrer un tableau d’objets

Nous avons un tableau qui contient les noms de tout le monde dans une école:

Et si on ne veut récupérer que les élèves qui sont en première année ? Filter () facilite cette opération. √âcrivons une fonction qui renverra tous les élèves de première année du tableau "students":

Filter () accepte un paramètre. Il s’agit d’une fonction qui détermine l’action que vous effectuez sur vos données.

Le filtre function () examine chaque objet du tableau "students". filter () renvoie les élèves dont la classe est égale à "Première année". L’opérateur "===" signifie égalité.

La fonction filter va créer un nouveau tableau avec ces nouvelles valeurs, accessible via la variable "firstGradeStudents".



Conclusion

Vous pouvez utiliser la méthode de tableau filter() pour créer un nouveau tableau à partir du contenu d’un tableau existant. L’ indice est dans le nom avec la méthode filter(). filter () filtre les éléments d’un tableau existant.

Et c’est tout ! Vous pouvez désormais utiliser reduce() en JavaScript avec encore plus de sécurité. Pour en savoir plus sur la façon de coder en JavaScript, lisez notre article sur les meilleurs tutoriels JavaScript pour débutants .