Array.
Mappe chaque élément et aplatit le résultat d’un niveau.
- Renvoie
- Un nouveau tableau avec les résultats, aplati d’un niveau.
- Modifie l’original
- Non
Exemple
#const courses = [
{ name: 'HTML', tags: ['web', 'bases'] },
{ name: 'Python', tags: ['données', 'ia'] }
]
console.log(courses.flatMap((course) => course.tags))Définition et utilisation
#La méthode flatMap() combine map() et flat() en une seule étape. La fonction peut renvoyer un tableau, et ses éléments seront insérés directement dans le résultat.
Un élément peut ainsi se transformer en plusieurs éléments, ou en aucun (quand la fonction renvoie un tableau vide). C’est un moyen pratique de transformer et filtrer des données en même temps.
L’aplatissement ne porte que sur un niveau. Si la fonction renvoie des tableaux imbriqués plus profondément, le reste reste imbriqué.
Syntaxe
#array.flatMap(callbackFn)
array.flatMap(callbackFn, thisArg)Paramètres
#callbackFn
function (element, index, array)
Fonction qui renvoie une valeur ou un tableau de valeurs.thisArg
optionnel
Valeur dethisà l’intérieur de la fonction.
Plus d’exemples
#const inputs = ['12', 'abc', '7', '']
const numbers = inputs.flatMap((value) => {
const n = Number.parseInt(value, 10)
return Number.isNaN(n) ? [] : [n]
})
console.log(numbers)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Renvoyer
[]depuis la fonction supprime l’élément du résultat, et[a, b]transforme un élément en deux. - Quand vous n’avez pas besoin d’aplatissement, un simple
map()est plus clair.
Entrées associées
#- Array.prototype.map()Crée un nouveau tableau avec les résultats de l’appel d’une fonction pour chaque élément.
- Array.prototype.flat()Aplatit des tableaux imbriqués jusqu’à la profondeur indiquée.
- Array.prototype.filter()Crée un nouveau tableau avec les éléments pour lesquels la fonction a renvoyé true.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.