Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Array : méthode filter()
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthodefilter() des instances deArray crée unecopie superficielle d'une portion d'un tableau donné, filtrée pour ne contenir que les éléments du tableau d'origine qui passent le test implémenté par la fonction fournie.
Exemple interactif
const words = ["pulvériser", "élite", "exubérant", "destruction", "présent"];const result = words.filter((word) => word.length > 6);console.log(result);// Résultat attendu : Array ["exubérant", "destruction", "présent"]Syntaxe
filter(callbackFn)filter(callbackFn, thisArg)Paramètres
callbackFnUne fonction à exécuter pour chaque élément du tableau. Elle doit retourner une valeurvraie pour conserver l'élément dans le tableau résultant, et une valeurfausse sinon. La fonction est appelée avec les arguments suivants :
thisArgFacultatifValeur à utiliser comme
thislors de l'exécution decallbackFn. Voirméthodes itératives.
Valeur de retour
Unecopie superficielle du tableau donné contenant uniquement les éléments qui passent le test. Si aucun élément ne passe le test, un tableau vide est renvoyé.
Description
La méthodefilter() est uneméthode itérative. Elle appelle la fonctioncallbackFn fournie une fois pour chaque élément d'un tableau, et construit un nouveau tableau contenant toutes les valeurs pour lesquellescallbackFn retourne une valeurvraie. Les éléments du tableau qui ne passent pas le test decallbackFn ne sont pas inclus dans le nouveau tableau. Consultez la sectionméthodes itératives pour plus d'informations sur le fonctionnement général de ces méthodes.
callbackFn n'est appelée que pour les indices du tableau qui ont une valeur assignée. Elle n'est pas appelée pour les cases vides dans lestableaux creux.
La méthodefilter() estgénérique. Elle attend seulement que la valeur dethis possède une propriétélength et des propriétés à clé entière.
Exemples
Filtrer toutes les petites valeurs
L'exemple suivant utilisefilter() pour créer un tableau filtré dans lequel tous les éléments dont la valeur est inférieure à 10 ont été retirés.
function assezGrand(valeur) { return valeur >= 10;}const filtré = [12, 5, 8, 130, 44].filter(assezGrand);// filtré vaut [12, 130, 44]Trouver tous les nombres premiers dans un tableau
L'exemple suivant retourne tous les nombres premiers du tableau :
const tableau = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];function estPremier(n) { if (n < 2) { return false; } if (n % 2 === 0) { return n === 2; } for (let facteur = 3; facteur * facteur <= n; facteur += 2) { if (n % facteur === 0) { return false; } } return true;}console.log(tableau.filter(estPremier)); // [2, 3, 5, 7, 11, 13]Note :L'implémentation deestPremier() est uniquement à des fins de démonstration. Pour une application réelle, il serait préférable d'utiliser un algorithme fortement mémoïsé comme leCrible d'Ératosthène pour éviter les calculs répétés.
Filtrer les entrées invalides d'un JSON
L'exemple suivant utilisefilter() pour créer un JSON filtré contenant tous les éléments dont l'id est numérique et non nul.
const arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }, {}, { id: null }, { id: NaN }, { id: "undefined" },];let entréesInvalides = 0;function filtrerParID(item) { if (Number.isFinite(item.id) && item.id !== 0) { return true; } entréesInvalides++; return false;}const arrByID = arr.filter(filtrerParID);console.log("Tableau filtré\n", arrByID);// Tableau filtré// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]console.log("Nombre d'entrées invalides =", entréesInvalides);// Nombre d'entrées invalides = 5Recherche dans un tableau
L'exemple suivant utilisefilter() pour filtrer le contenu d'un tableau selon un critère de recherche.
const fruits = ["pomme", "banane", "raisin", "mangue", "orange"];/** * Filtrer les éléments du tableau selon un critère de recherche (requête) */function filtrerÉléments(arr, requête) { return arr.filter((el) => el.toLowerCase().includes(requête.toLowerCase()));}console.log(filtrerÉléments(fruits, "po")); // ['pomme']console.log(filtrerÉléments(fruits, "an")); // ['banane', 'mangue', 'orange']Utiliser le troisième argument decallbackFn
L'argumentarray est utile si vous souhaitez accéder à un autre élément du tableau, en particulier lorsque vous n'avez pas de variable existante qui fait référence au tableau. L'exemple suivant utilise d'abordmap() pour extraire l'identifiant numérique de chaque nom puis utilisefilter() pour sélectionner ceux qui sont supérieurs à leurs voisins.
const noms = ["JC63", "Bob132", "Ursula89", "Ben96"];const grandsIDs = noms .map((nom) => parseInt(nom.match(/\d+/)[0], 10)) .filter((id, idx, arr) => { // Sans l'argument arr, il n'y a pas de moyen simple d'accéder // au tableau intermédiaire sans le stocker dans une variable. if (idx > 0 && id <= arr[idx - 1]) return false; if (idx < arr.length - 1 && id <= arr[idx + 1]) return false; return true; });console.log(grandsIDs); // [132, 96]L'argumentarray n'estpas le tableau en cours de construction — il n'est pas possible d'accéder au tableau en cours de construction depuis la fonction de rappel.
Utiliserfilter() sur des tableaux creux
filter() ignore les cases vides.
console.log([1, , undefined].filter((x) => x === undefined)); // [undefined]console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined]Appelerfilter() sur des objets qui ne sont pas des tableaux
La méthodefilter() lit la propriétélength dethis puis accède à chaque propriété dont la clé est un entier non négatif inférieur àlength.
const objetSimilaireTableau = { length: 3, 0: "a", 1: "b", 2: "c", 3: "a", // ignoré par filter() car length vaut 3};console.log( Array.prototype.filter.call(objetSimilaireTableau, (x) => x <= "b"),);// [ 'a', 'b' ]Spécifications
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-array.prototype.filter |
Compatibilité des navigateurs
Voir aussi
- Guide des collections indexées
- L'objet global
Array - La méthode
Array.prototype.forEach() - La méthode
Array.prototype.every() - La méthode
Array.prototype.map() - La méthode
Array.prototype.some() - La méthode
Array.prototype.reduce() - La méthode
TypedArray.prototype.filter() - Prothèse d'émulation de
Array.prototype.filterdans core-js(angl.) - Prothèse d'émulation es-shims de
Array.prototype.filter(angl.)