Fonction de filtre à tableau JavaScript
Dans cet article, nous saisirons le concept du javascript filtre() fonction. Qu'est-ce qu'un filtre() fonction, et comment pouvons-nous l'utiliser pour aider à simplifier le code JavaScript et à effectuer les tâches efficacement et le plus rapidement.
Quel est le filtre fonction dans javascript
Javascript filtre() La fonction du tableau est utilisée pour filtrer les données en fonction de la condition donnée ou du test.
- Le filtre() La fonction prend l'élément d'un tableau un par un et applique la condition sur chaque élément.
- Le filtre() La fonction maintient les éléments qui passent la condition dans un tableau différent et renvoient le tableau résultant après avoir itérant tout le tableau entier.
- Ce filtre() La fonction du tableau n'affecte pas le tableau d'origine.
Explorons-y plus pour comprendre la syntaxe et ses fonctionnalités, ainsi que quelques exemples.
Syntaxe de la fonction filtrante en javascript
déployer.filter (function_name, thisValue);Tableau filtre() La fonction prend une fonction comme une fonction de rappel avec trois arguments. La syntaxe de la fonction de rappel et la séquence des arguments se déroulent comme ceci:
function function_name (valeur, index, array)condition de retour;
Dans la fonction de rappel de filtre() méthode:
- Le premier paramètre est le courant valeur de l'élément de tableau pendant l'itération.
- Le deuxième paramètre est le paramètre facultatif qui est le courant indice de l'élément de tableau pendant l'itération.
- Enfin, nous pouvons également passer le déployer lui-même à la fonction de rappel pour avoir des fonctionnalités personnalisées à l'intérieur de la fonction de rappel.
Nous pouvons également transmettre «thisvalue» à la fonction, où le mot clé «ce» fait référence au bloc / objet parent.
Nous allons maintenant utiliser quelques exemples pour voir ses implémentations réelles.
Note: Nous utiliserons la console du navigateur pour démontrer des exemples effectués dans ce post. Pour ouvrir la console du navigateur:
- Utilisez le F12 Clé dans Chrome et autres navigateurs à base de chrome.
- Utiliser Ctrl + shift + k Clés de raccourci clavier pour Mozilla.
- Utiliser Option + ⌘ + C Clés de raccourci clavier dans Safari (si le menu du développeur n'apparaît pas, alors ouvrez les préférences en appuyant sur ⌘ +, et en Avancé chèque d'onglet "Afficher le menu de développement dans la barre de menus").
Comment utiliser la fonction filtre () en javascript
Le meilleur exemple pour comprendre le filtre() La fonction consiste à filtrer certains nombres à partir d'un tableau de nombres en fonction de la condition donnée.
Exemple 1:
Supposons que nous ayons un tableau de chiffres et que nous voulons obtenir des nombres supérieurs à un nombre spécifique:
nombres var = [23,16,38,5,10,19]La première méthode pour obtenir la plage de nombres souhaitée consiste à parcourir tout le tableau et à mettre une condition à l'intérieur de la boucle pour vérifier si le nombre passe le test donné (supérieur à 18 ou non). Si le numéro passe le test, il sera ajouté / annexé à un nouveau tableau. Le code de la boucle FOR pour filtrer les nombres est donné ci-dessous:
varFilteredArray = [];pour (leti = 0; i18)
filtrer.push (nombres [i])
console.Log (filterArray);
Dans le code ci-dessus, nous mettons d'abord une boucle sur le tableau «nombres», puis mettons une condition en utilisant l'instruction IF, et si l'élément de tableau passe la condition, il sera annexé / poussé vers la variable «filteredArray».
Bien que nous ayons la plage souhaitée comme sortie. Mais, pourquoi ne pas utiliser un moyen intelligent et facile d'obtenir le tableau filtré en utilisant le filtre() Méthode du tableau, où nous n'avons pas à muter les variables comme «filtrer."
Utilisation de la fonction filtrante ()
Le filtre() La fonction pour obtenir les chiffres supérieurs à 18 ira comme ceci:
varFilteredArray = nombres.filtre (getAdults);functiongetAdults (n)
retour n> 18;
console.Log (filterArray);
Dans le code ci-dessus, vous pouvez voir que nous avons d'abord transmis la fonction «getAdults» à la filtre() fonction, et dans la définition de la fonction «getAdults», nous avons juste vérifié si le nombre est supérieur à 18 ou non et si cette condition renvoie vrai, renvoyez cet élément de tableau.
Une fois que la fonction «filtre» vérifie tous les nombres du tableau «Nombres», il stockera le résultat final dans la variable «filteredArray».
Enfin, nous venons de consoler la variable «filteredArray» pour vérifier si notre filtre() La fonction a bien fonctionné ou non.
Vous pouvez vérifier en regardant dans la capture d'écran fournie ci-dessus que le filtre() La fonction a renvoyé tous les nombres supérieurs à 18.
Un autre moyen plus court et plus facile d'écrire filtre() La fonction consiste à faire la fonction de rappel de filtre() Fonction une fonction flèche:
La syntaxe de l'écriture de la fonction de rappel dans le filtre() Les parenthèses de la fonction seront comme ceci:
varFilteredArray = nombres.filtre ((n) =>Retour n> 18
);
console.Log (filterArray);
Très bien, c'était le simple exemple dans lequel nous avons un tableau de nombres uniquement; Qu'en est-il de la table d'objets. Essayons aussi celui-là.
Exemple 2:
Supposons que nous ayons une liste d'étudiants dans un tableau, et nous voulons obtenir la liste des étudiants dont les frais sont supérieurs à 8 000 $:
var étudiants = [ID: 1,
Nom: "John,"
Âge: 12,
Frais: 8500
,
ID: 2,
Nom: "Bob",
Âge: 15,
Frais: 4500
,
ID: 3,
Nom: "Steve",
Âge: 10,
Frais: 7500
,
ID: 4,
Nom: "Harry",
Âge: 13,
Frais: 10500
,
ID: 5,
Nom: "Tom",
Âge: 14,
Frais: 9000
,
ID: 6,
Nom: "Ron",
Âge: 11,
Frais: 6000
,
]]
Le filtre() La fonction pour obtenir la liste des étudiants filtrées ira comme ceci:
VarfilteredStudents = étudiants.filtre ((étudiant) =>retour de retour.Frais> 8000
);
console.log (filteredStudents);
Maintenant, la seule différence dans ce code est qu'un seul objet est passé comme valeur à la fonction de rappel, et à l'intérieur de la définition de la fonction de rappel, nous mettons une condition et renvoyons l'objet où les frais de l'étudiant sont supérieurs à 8000 $.
En regardant la capture d'écran ci-dessus, vous pouvez voir que les frais des étudiants sont supérieurs à 8000 $ et sont affichés en sortie. C'est donc ainsi que nous pouvons accéder aux objets d'un tableau dans le filtre() fonction.
Conclusion
Dans cet article, nous avons appris ce qu'un filtre() La fonction est et comment nous pouvons l'utiliser pour aider à simplifier le code JavaScript.
Nous avons appris que le filtre() La fonction filtre les éléments du tableau en fonction de la condition donnée. Le filtre() La fonction prend l'élément d'un tableau un par un, prend une fonction de rappel appliquée à chaque élément du tableau et renvoie le nouveau tableau filtré.
Ce message est tout au sujet de JavaScript filtre() fonction et son utilisation. Il contient quelques exemples de base qui aident à comprendre filtre() fonctionne facilement.