Array.
Crée un nouveau tableau avec les éléments pour lesquels la fonction a renvoyé true.
- Renvoie
- Un nouveau tableau avec les éléments qui ont passé le test (peut être vide).
- Modifie l’original
- Non
Exemple
#const scores = [45, 82, 67, 91, 30]
const passed = scores.filter((score) => score >= 60)
console.log(passed)
console.log(scores.length)Définition et utilisation
#La méthode filter() teste chaque élément du tableau avec une fonction de test. Les éléments pour lesquels la fonction renvoie une valeur vraie sont placés dans le nouveau tableau, les autres sont ignorés. L’original n’est pas modifié.
C’est l’outil de base pour sélectionner des données : utilisateurs actifs, tâches à faire, produits d’une catégorie donnée ou résultats de recherche.
Le résultat est toujours un tableau. Si aucun élément ne correspond, vous obtenez un tableau vide [], et non undefined. Si vous n’avez besoin que du premier élément correspondant, la méthode find() est plus rapide et plus claire.
Syntaxe
#array.filter(callbackFn)
array.filter(callbackFn, thisArg)Paramètres
#callbackFn
function (element, index, array)
Fonction de test. L’élément sera inclus dans le résultat si elle renvoie une valeur vraie.thisArg
optionnel
Valeur dethisà l’intérieur de la fonction. Sans effet avec les fonctions fléchées.
Plus d’exemples
#const tasks = [
{ title: 'Module HTML', done: true },
{ title: 'Module CSS', done: false },
{ title: 'Module JS', done: false }
]
const todo = tasks.filter((task) => !task.done)
console.log(todo.map((task) => task.title))const values = ['Léa', '', null, 'Lucas', undefined, 0]
console.log(values.filter(Boolean))Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#filter(Boolean)est un moyen rapide de supprimer les chaînes vides,null,undefinedet les zéros. Attention seulement si 0 est une valeur valide.- Vous pouvez enchaîner
filter()etmap(), mais chaque méthode parcourt le tableau séparément. Pour de très grandes quantités de données, envisagez un seulreduce().
Entrées associées
#- find() vs filter()find() renvoie le premier élément qui satisfait une condition, ou undefined, tandis que filter() renvoie un nouveau tableau avec tous les éléments qui ont passé le test.
- Array.prototype.map()Crée un nouveau tableau avec les résultats de l’appel d’une fonction pour chaque élément.
- Array.prototype.find()Renvoie le premier élément qui remplit la condition, ou undefined.
- Array.prototype.some()Vérifie si au moins un élément remplit la condition.
- Array.prototype.reduce()Réduit tout le tableau à une seule valeur, par exemple une somme, un objet ou un nouveau tableau.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.