filter, map et reduce sont des méthodes disponibles pour manipuler les données d’un tableau. Depuis que JavaScript a introduit ces méthodes en 2011, elles font partie des méthodes les plus courantes utilisées pour parcourir des tableaux.
Avant 2011, les développeurs utilisaient des boucles for, et c’est encore possible aujourd’hui. Cependant, ces méthodes vous aideront à diminuer la complexité de votre code, et à le rendre plus lisible.
Comme données, j’utilise du JSON formaté sous la forme suivante :
[
{
"name": "Nigel Hooper",
"age": 21,
"country": "Belgium",
"nb_child": 1
},
{
"name": "Jessamine Franks",
"age": 46,
"country": "France",
"nb_child": 2
},
{
"name": "Lamar Turner",
"age": 37,
"country": "Belgium",
"nb_child": 3
},
{
"name": "Kieran Palmer",
"age": 75,
"country": "United Kingdom",
"nb_child": 0
},
{
"name": "Irma Glass",
"age": 65,
"country": "Germany",
"nb_child": 2
},
[...]
]J’ai une liste de 100 éléments, prenant en compte des informations simple d’une personne : son nom, son âge, son pays et le nombre d’enfants.
Les données et le code utilisé pour cet article sont sur le dépôt github suivant : functional-programming-JS.
Filter
La méthode filter fait ce que vous attendez – elle filtrera les données d’un tableau.
Par exemple, si vous souhaitez lister le nombre de personnes de moins de 45 ans habitant en France :
let getPerson = personnes.filter(
personne =>
personne.age < 45 && personne.country === "France"
);
console.log(getPerson);Je me retrouve avec le résultat suivant :
[
{ name: 'Gray Hickman', age: 38, country: 'France', nb_child: 0 },
{ name: 'Dora Rogers', age: 39, country: 'France', nb_child: 3 },
{ name: 'Plato Mcdonald', age: 36, country: 'France', nb_child: 2 },
{ name: 'Oleg Osborn', age: 37, country: 'France', nb_child: 2 }
]
Nous passons une fonction fléché dans la méthode filter. L’opérateur de filtrage acceptera normalement les paramètres des élément actuel, index et tableau entier).
Map
La méthode map est utilisée lorsque vous souhaitez effectuer la même opération sur chaque élément du tableau. Une fois que la carte a traversé le tableau, elle renvoie un nouveau tableau avec les éléments traduits.
Map accepte une fonction de rappel et, à l’instar de filter, il peut accepter l’élément en cours du tableau, son index et l’intégralité du tableau.
Voici un exemple qui ajoute un an à chaque personne de la liste :
let newBirthDay = personnes.map(personne => {
var rObj = {};
rObj["name"] = personne.name
rObj["age"] = personne.age + 1
rObj["country"] = personne.country
rObj["nb_child"] = personne.nb_child
return rObj;
});
console.log(newBirthDay);Le résultat retournera tout le tableau avec tous les âges incrémenté à plus 1.
Comme vous pouvez le constater avec map lorsque comparé à une boucle for, vous n’avez pas à vous soucier de la gestion de l’état ou de l’index correct pour l’élément souhaité.
De plus, vous n’avez pas besoin de créer un tableau vide, puis de placer toutes les nouvelles valeurs dans ce tableau. map renvoie le nouveau tableau pour vous – il vous suffit de l’affecter à une variable.
Reduce
Reduce est similaire aux méthodes map et filter présentées ci-dessus. La méthode Reduce réduit les valeurs multiples du tableau en une seule valeur.
Par exemple, si vous souhaitez calculer le nombre total d’enfant de la liste des personnes :
// Functional Reduce
let nbChildTotal = personnes.reduce((preVal,personne)
=> preVal + personne.nb_child,0)
console.log(nbChildTotal);Cela donne le résultat suivant : 188
Les paramètres de la méthode de réduction sont légèrement différents de ceux de map et filter.
Le premier paramètre est la valeur actuelle de la valeur finale (vous devez définir la valeur initiale à la fin de la fonction – dans cet exemple, 0).
Le deuxième paramètre est l’élément actuel du tableau.
Le troisième paramètre est à nouveau l’index.
Le dernier paramètre est l’ensemble du tableau.
Conclusion
Comme vous pouvez le constater, map, filter et reduce peuvent être très utiles, sinon votre code deviendra plus long et plus complexe.
Rappels rapides :
- Utilisez filter si vous avez déjà un tableau et que vous souhaitez récupérer certaines valeurs correspondant à un critère de ce tableau – par exemple, des nombres pairs, des mots de plus de 10 caractères, etc…
- Utilisez map si vous avez déjà un tableau et que vous souhaitez effectuer la même action sur tous les éléments du tableau et renvoyer le même nombre d’éléments dans un nouveau tableau.
- Utilisez reduce si vous avez déjà un tableau, mais que vous souhaitez utiliser les valeurs de ce tableau pour créer quelque chose de nouveau.
La meilleure façon de comprendre ces méthodes encore plus profondément est de les utiliser – sortez et codez!