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.
Comparaison point par point
#Ce qu’elle renvoie
- Array.prototype.find()
- Le premier élément correspondant ou
undefined - Array.prototype.filter()
- Un nouveau tableau avec tous les éléments correspondants
Quand rien ne correspond
- Array.prototype.find()
undefined- Array.prototype.filter()
- Tableau vide
[]
S’arrête à la première correspondance
- Array.prototype.filter()
- Non, vérifie chaque élément
Performance sur de grands tableaux
- Array.prototype.find()
- Plus rapide, termine à la première correspondance
- Array.prototype.filter()
- Plus lente, vérifie tout
Chaînage de méthodes
- Array.prototype.find()
- Peu pratique, le résultat est un seul élément
- Array.prototype.filter()
- Oui, par ex.
.filter().map()
Usage typique
- Array.prototype.find()
- Recherche d’un seul enregistrement par
id - Array.prototype.filter()
- Liste d’éléments qui satisfont une condition
Exemple
#const users = [
{ id: 1, name: 'Léa', active: true },
{ id: 2, name: 'Lucas', active: false },
{ id: 3, name: 'Emma', active: true }
]
const oneUser = users.find((user) => user.active)
const activeUsers = users.filter((user) => user.active)
console.log(oneUser)
console.log(activeUsers)Définition et utilisation
#Les deux méthodes testent les éléments du tableau avec la même fonction de test (element, index, array) et ne modifient pas l’original. Elles diffèrent par ce qu’elles font du résultat du test : find() s’arrête au premier élément pour lequel la fonction renvoie une valeur vraie, tandis que filter() vérifie tous les éléments et les rassemble dans un nouveau tableau.
find() renvoie l’élément lui-même, ou undefined si aucun ne correspond. filter() renvoie toujours un tableau, même vide [], donc vous pouvez immédiatement continuer avec map() ou compter avec .length. Comme find() termine son travail dès la première correspondance, il peut être plus rapide sur de grands tableaux que filter(), qui parcourt toujours tous les éléments.
Le choix dépend du nombre d’éléments dont vous avez besoin. Vous cherchez un enregistrement précis, par exemple un utilisateur par id ? Utilisez find(). Vous avez besoin d’une liste d’éléments qui satisfont une condition, par exemple des utilisateurs actifs à afficher ? Utilisez filter().
Syntaxe
#array.find(callbackFn)
array.filter(callbackFn)Plus d’exemples
#const products = [
{ slug: 'html', price: 0 },
{ slug: 'react', price: 199 }
]
const missing = products.find((product) => product.slug === 'vue')
const free = products.filter((product) => product.price === 0)
console.log(missing)
console.log(free.length)
console.log(missing?.price ?? 'Aucun produit')const numbers = [1, 2, 3, 4, 5]
const checkedByFind = []
numbers.find((number) => {
checkedByFind.push(number)
return number > 2
})
const checkedByFilter = []
numbers.filter((number) => {
checkedByFilter.push(number)
return number > 2
})
console.log(checkedByFind)
console.log(checkedByFilter)find() s’arrête après avoir trouvé 3 et ne vérifie plus 4 et 5. filter() parcourt toujours tout le tableau.
Bonnes pratiques
#- Le résultat de
find()peut êtreundefined. Sécurisez la lecture de ses propriétés avec l’opérateur?.. - Vous vérifiez seulement si un élément existe, sans avoir besoin de l’utiliser ?
some()est plus lisible que de comparer le résultat defind()àundefined. - Quand vous avez besoin de la position de l’élément correspondant, et non de sa valeur, utilisez
findIndex().
Entrées associées
#- Array.prototype.find()Renvoie le premier élément qui remplit la condition, ou undefined.
- Array.prototype.filter()Crée un nouveau tableau avec les éléments pour lesquels la fonction a renvoyé true.
- Array.prototype.some()Vérifie si au moins un élément remplit la condition.
- Array.prototype.findIndex()Renvoie l’indice du premier élément qui remplit la condition, ou -1.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.