Ne garder que les commandes payées, que les fichiers d'une extension, que les utilisateurs actifs : le geste est si fréquent que le langage lui a réservé une méthode, et qu'écrire une boucle pour cela ne se justifie plus.
filter conserve ce qui passe un test et écarte le reste, sans jamais toucher au tableau d'origine.
Définition
filter est une méthode d'Array (tableau) qui appelle une fonction sur chaque élément et rend un nouveau tableau formé de ceux pour lesquels cette fonction a répondu vrai. Sa longueur est donc inférieure ou égale à celle du départ.
const commandes = [
{ id: 1, payee: true, montant: 49 },
{ id: 2, payee: false, montant: 19 },
{ id: 3, payee: true, montant: 99 },
];
const payees = commandes.filter((c) => c.payee);
console.log(payees.length); // 2
const grosses = commandes.filter((c) => c.montant > 500);
console.log(grosses); // []La dernière ligne mérite l'attention : filter rend toujours un tableau, vide le cas échéant, jamais undefined. On peut donc le parcourir ou lire sa longueur sans vérification préalable.
Ce que la fonction doit rendre
Le retour n'a pas besoin d'être un booléen : c'est sa nature Truthy et falsy qui décide. Une chaîne vide, 0, null et undefined écartent l'élément, tout le reste le conserve.
const brut = ["fr", "", null, "en", undefined, "es"];
console.log(brut.filter(Boolean)); // [ 'fr', 'en', 'es' ]Passer Boolean (booléen) directement comme fonction de test est l'idiome consacré pour nettoyer un tableau de ses valeurs vides. Il tient parce que Boolean ignore les deuxième et troisième arguments que filter lui transmet.
filter, find ou some
| Ce que vous cherchez | Méthode | Ce que vous recevez |
|---|---|---|
| Tous ceux qui passent | filter | Un tableau |
| Le premier qui passe | Array.find() | L'élément, ou undefined |
| Savoir s'il en existe un | Array.some() | Un booléen |
| Compter ceux qui passent | filter puis length | Un nombre |
La deuxième ligne est celle qu'on rate le plus souvent : écrire filter(...)[0] parcourt tout le tableau pour un seul élément, quand find s'arrête au premier trouvé.
Questions fréquentes
filter modifie-t-il le tableau d'origine ?
Jamais. Il en construit un nouveau, qui contient les mêmes objets et non des copies. Modifier une propriété d'un élément filtré se voit donc dans les deux tableaux, puisque c'est le même objet référencé deux fois.
Comment retirer un élément par identifiant ?
En gardant tous les autres, avec liste.filter((c) => c.id !== cible). Cette écriture remplace avantageusement splice, qui modifie le tableau sur place et oblige à en connaître la position exacte.
Enchaîner filter et Array.map() coûte-t-il deux parcours ?
Oui, deux parcours au lieu d'un. Sur quelques centaines d'éléments, la lisibilité de l'enchaînement vaut largement cette dépense. Au-delà de plusieurs dizaines de milliers, une seule boucle ou un Array.reduce() devient défendable.