Array : méthode filter() - JavaScript | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Array : méthode filter()

Baseline Large disponibilité

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éthode filter() des instances de Array crée une copie 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.

Dans cet article

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

js
filter(callbackFn)
filter(callbackFn, thisArg)

Paramètres

callbackFn

Une fonction à exécuter pour chaque élément du tableau. Elle doit retourner une valeur vraie pour conserver l'élément dans le tableau résultant, et une valeur fausse sinon. La fonction est appelée avec les arguments suivants :

element

L'élément courant traité dans le tableau.

index

L'indice de l'élément courant traité dans le tableau.

array

Le tableau sur lequel filter() a été appelée.

thisArg Facultatif

Valeur à utiliser comme this lors de l'exécution de callbackFn. Voir méthodes itératives.

Valeur de retour

Une copie 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éthode filter() est une méthode itérative. Elle appelle la fonction callbackFn fournie une fois pour chaque élément d'un tableau, et construit un nouveau tableau contenant toutes les valeurs pour lesquelles callbackFn retourne une valeur vraie. Les éléments du tableau qui ne passent pas le test de callbackFn ne sont pas inclus dans le nouveau tableau. Consultez la section mé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 les tableaux creux.

La méthode filter() est générique. Elle attend seulement que la valeur de this possède une propriété length et des propriétés à clé entière.

Exemples

Filtrer toutes les petites valeurs

L'exemple suivant utilise filter() pour créer un tableau filtré dans lequel tous les éléments dont la valeur est inférieure à 10 ont été retirés.

js
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 :

js
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 de estPremier() 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 le Crible d'Ératosthène pour éviter les calculs répétés.

Filtrer les objets invalides d'un tableau d'objets

L'exemple suivant utilise filter() pour créer un tableau filtré contenant tous les objets sont différents de zéro, et des id numériques.

js
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 = 5

Recherche dans un tableau

L'exemple suivant utilise filter() pour filtrer le contenu d'un tableau selon un critère de recherche.

js
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 de callbackFn

L'argument array 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'abord map() pour extraire l'identifiant numérique de chaque nom puis utilise filter() pour sélectionner ceux qui sont supérieurs à leurs voisins.

js
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'argument array n'est pas 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.

Utiliser filter() sur des tableaux creux

filter() ignore les cases vides.

js
console.log([1, , undefined].filter((x) => x === undefined)); // [undefined]
console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined]

Appeler filter() sur des objets qui ne sont pas des tableaux

La méthode filter() lit la propriété length de this puis accède à chaque propriété dont la clé est un entier non négatif inférieur à length.

js
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' ]

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.filter dans core-js (angl.)
Prothèse d'émulation es-shims de Array.prototype.filter (angl.)

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 27 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Objets natifs standards
Array
Constructeur
1. Array()
Méthodes statiques
Propriétés statiques
1. [Symbol.species]
Méthodes d'instance
Propriétés d'instance
1. length
2. [Symbol.unscopables]
Héritage
Object/Function
Méthodes statiques
Propriétés statiques
Méthodes d'instance
Propriétés d'instance
1. Object.prototype.__proto__
2. Object.prototype.constructor