| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter | [Back] [Original] |
Get to know MDN better
Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.
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 mthode filter() des instances de Array cre une copie superficielle d'une portion d'un tableau donn, filtre pour ne contenir que les lments du tableau d'origine qui passent le test implment par la fonction fournie.
const words = ["pulvriser", "lite", "exubrant", "destruction", "prsent"];
const result = words.filter((word) => word.length > 6);
console.log(result);
// Rsultat attendu : Array ["exubrant", "destruction", "prsent"]
filter(callbackFn)
filter(callbackFn, thisArg)
callbackFnUne fonction excuter pour chaque lment du tableau. Elle doit retourner une valeur vraie pour conserver l'lment dans le tableau rsultant, et une valeur fausse sinon. La fonction est appele avec les arguments suivants :
thisArg FacultatifValeur utiliser comme this lors de l'excution de callbackFn. Voir mthodes itratives.
Une copie superficielle du tableau donn contenant uniquement les lments qui passent le test. Si aucun lment ne passe le test, un tableau vide est renvoy.
La mthode filter() est une mthode itrative. Elle appelle la fonction callbackFn fournie une fois pour chaque lment d'un tableau, et construit un nouveau tableau contenant toutes les valeurs pour lesquelles callbackFn retourne une valeur vraie. Les lments du tableau qui ne passent pas le test de callbackFn ne sont pas inclus dans le nouveau tableau. Consultez la section mthodes itratives pour plus d'informations sur le fonctionnement gnral de ces mthodes.
callbackFn n'est appele que pour les indices du tableau qui ont une valeur assigne. Elle n'est pas appele pour les cases vides dans les tableaux creux.
La mthode filter() est gnrique. Elle attend seulement que la valeur de this possde une proprit length et des proprits cl entire.
L'exemple suivant utilise filter() pour crer un tableau filtr dans lequel tous les lments dont la valeur est infrieure 10 ont t retirs.
function assezGrand(valeur) {
return valeur >= 10;
}
const filtr = [12, 5, 8, 130, 44].filter(assezGrand);
// filtr vaut [12, 130, 44]
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'implmentation de estPremier() est uniquement des fins de dmonstration. Pour une application relle, il serait prfrable d'utiliser un algorithme fortement mmos comme le Crible d'ratosthne pour viter les calculs rpts.
L'exemple suivant utilise filter() pour crer un tableau filtr contenant tous les objets sont diffrents de zro, et des id numriques.
const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{},
{ id: null },
{ id: NaN },
{ id: "undefined" },
];
let entresInvalides = 0;
function filtrerParID(item) {
if (Number.isFinite(item.id) && item.id !== 0) {
return true;
}
entresInvalides++;
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'entres invalides =", entresInvalides);
// Nombre d'entres invalides = 5
L'exemple suivant utilise filter() pour filtrer le contenu d'un tableau selon un critre de recherche.
const fruits = ["pomme", "banane", "raisin", "mangue", "orange"];
/**
* Filtrer les lments du tableau selon un critre de recherche (requte)
*/
function filtrerlments(arr, requte) {
return arr.filter((el) => el.toLowerCase().includes(requte.toLowerCase()));
}
console.log(filtrerlments(fruits, "po")); // ['pomme']
console.log(filtrerlments(fruits, "an")); // ['banane', 'mangue', 'orange']
callbackFnL'argument array est utile si vous souhaitez accder un autre lment du tableau, en particulier lorsque vous n'avez pas de variable existante qui fait rfrence au tableau. L'exemple suivant utilise d'abord map() pour extraire l'identifiant numrique de chaque nom puis utilise filter() pour slectionner ceux qui sont suprieurs 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'accder
// au tableau intermdiaire 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'accder au tableau en cours de construction depuis la fonction de rappel.
filter() sur des tableaux creuxfilter() ignore les cases vides.
console.log([1, , undefined].filter((x) => x === undefined)); // [undefined]
console.log([1, , undefined].filter((x) => x !== 2)); // [1, undefined]
filter() sur des objets qui ne sont pas des tableauxLa mthode filter() lit la proprit length de this puis accde chaque proprit dont la cl est un entier non ngatif infrieur 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' ]
| Spcification |
|---|
| ECMAScript 2027 LanguageSpecification # sec-array.prototype.filter |
ArrayArray.prototype.forEach()Array.prototype.every()Array.prototype.map()Array.prototype.some()Array.prototype.reduce()TypedArray.prototype.filter()Array.prototype.filter dans core-js (angl.)Array.prototype.filter (angl.)Cette page a t modifie le 27 mars 2026 par les contributeurices du MDN.
Arrayat()concat()copyWithin()entries()every()fill()filter()find()findIndex()findLast()findLastIndex()flat()flatMap()forEach()includes()indexOf()join()keys()lastIndexOf()map()pop()push()reduce()reduceRight()reverse()shift()slice()some()sort()splice()toLocaleString()toReversed()toSorted()toSpliced()toString()unshift()values()with()[Symbol.iterator]()Object/FunctionObject.prototype.__defineGetter__()Object.prototype.__defineSetter__()Object.prototype.__lookupGetter__()Object.prototype.__lookupSetter__()Object.prototype.hasOwnProperty()Object.prototype.isPrototypeOf()Object.prototype.propertyIsEnumerable()Object.prototype.toLocaleString()Object.prototype.toString()Object.prototype.valueOf()Certaines parties de ce contenu sont protges par le droit d'auteur 19982026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.
| Web Proxy Viewer | New URL | Original Page |