Cet article montre comment utiliser efficacement les méthodes map() et filter() de JavaScript, individuellement et en combinaison, pour un traitement efficace des tableaux. Nous explorerons des exemples pratiques pour illustrer leur puissance et leur polyvalence dans la manipulation de données.
Table des matières
- JavaScript Map
- JavaScript Filter
- Chaînage de Map et Filter
- Exemple concret : Filtrage de produits e-commerce
- Conclusion
JavaScript Map
La méthode map() est une fonction d’ordre supérieur qui itère sur chaque élément d’un tableau et applique une fonction de rappel fournie. Cette fonction transforme chaque élément, et map() renvoie un nouveau tableau contenant les valeurs transformées. Le tableau d’origine reste inchangé.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // Le tableau d'origine est inchangé
JavaScript Filter
La méthode filter() itère également sur un tableau. Cependant, au lieu de transformer les éléments, elle inclut sélectivement les éléments en fonction d’une condition définie par une fonction de rappel. La fonction de rappel doit renvoyer true pour inclure l’élément et false pour l’exclure. filter() renvoie un nouveau tableau contenant uniquement les éléments qui satisfont à la condition.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);
Chaînage de Map et Filter
La véritable puissance de map() et filter() est révélée lorsqu’elles sont chaînées. Cela permet une manière concise et efficace d’effectuer des manipulations de données complexes. filter() est généralement appliqué en premier pour réduire le tableau, suivi de map() pour transformer les éléments restants.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
.filter(number => number % 2 === 0)
.map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);
Exemple concret : Filtrage de produits e-commerce
Imaginons une application de commerce électronique. Nous avons un tableau d’objets produit :
const products = [
{ name: "Chemise", price: 25, inStock: true, category: "vêtements" },
{ name: "Pantalon", price: 40, inStock: false, category: "vêtements" },
{ name: "Chaussures", price: 75, inStock: true, category: "chaussures" },
{ name: "Chapeau", price: 15, inStock: true, category: "accessoires" },
{ name: "Veste", price: 60, inStock: true, category: "vêtements" }
];
Nous voulons afficher uniquement les noms des articles de vêtements en stock. Nous pouvons y parvenir élégamment à l’aide de filter() et map() :
const inStockClothingNames = products
.filter(product => product.inStock && product.category === "vêtements")
.map(product => product.name);
console.log(inStockClothingNames); // ['Chemise', 'Veste']
Conclusion
La combinaison de map() et filter() offre une approche puissante et lisible de la manipulation de tableaux en JavaScript. Ce style fonctionnel favorise un code plus propre, réduit le besoin de boucles verbeuses et améliore la maintenabilité. N’oubliez pas que les deux méthodes renvoient de nouveaux tableaux, préservant l’immuabilité des données d’origine.