fbpx
/ English
JavaScript

Javascript : manipuler vos données avec map, filter et reduce

La manière la plus simple de manipuler et transporter de gros blocs de données en Javascript (ainsi que dans plusieurs autres langages de programmation) est via les tableaux unidimensionnels et multidimensionnels. La modification et le tri de ces données requiert souvent des procédés d’itérations qui peuvent êtres lourds et relativement fastidieux. Heureusement, Javascript propose un ensemble de méthodes qui facilite plusieurs processus de manière assez élégante.

map() – Array.map()

La fonction map(), est essentiellement une boucle « for each » spécialement pour les transformations de valeurs. Pour chaque valeur entrée, on a une valeur sortie.Voici un exemple de code typique pouvant être simplifié avec la méthode map() :

var numbers = [1, 2, 3, 4];
 var new_numbers = [];
 for(var i = 0; i < numbers.length; i++) {
 new_numbers[i] = numbers[i] * 2;
 }
 console.log("Les nombres doublés sont", new_numbers); // [2, 4, 6, 8]

Ce code, bien que fonctionnel et clair peut être simplifié davantage et faire abstraction des boucles, ainsi :

var numbers = [1, 2, 3, 4];
 var new_numbers = numbers.map(function(number){
 return number * 2;
 });
 console.log("Les nombres doublés sont", new_numbers); // [2, 4, 6, 8]

Au besoin ces fonctions peuvent être enchaînées pour cumuler les effets. En voici un exemple:

var numbers = [1, 2, 3, 4];
 var new_numbers = numbers.map(function(number){
 return number * 2;
 }).map(function(number){
 return number++;
 });
 console.log("Les nombres doublés et incrémentés sont", new_numbers); // [3, 5, 7, 9]

Dans le cadre de l’usage de la fonction « map() », un certain nombre de règles est à respecter afin de ne pas obtenir des comportements inattendus ou problématiques :

  1. Le nombre de valeurs d’entrées doit être égal au nombre de de sorties.
    Ceci veut dire qu’en utilisant uniquement la fonction map(), vous ne pouvez pas vous attendre à lui fournir un nombre de valeurs de retour différent du nombre de valeurs que vous lui avez soumis. Donc, si vous envoyez 5 valeurs à map(), ce sont 5 valeurs qui vous seront retournées.
  2. Vos méthodes de retour ne doivent pas muter les valeurs.
    Ce qu’on entend par ceci, c’est que vous ne devriez pas modifier directement de valeurs à l’intérieur de votre code de callback. Voici un exemple de mutation de valeurs :
var new_numbers = numbers.map(function(number){
 numbers[1] = number * 3;
 return number * 2;
 });
  • Ne déclenchez pas d’effets secondaires.
    Ce qu’on veut dire par « effets secondaires », ce serait de modifier le contenu d’une variable hors du cadre de la fonction. Voici un exemple :
  • var xyz = 0;
     var new_numbers = numbers.map(function(number){
     xyz = number * 3;
     return number * 2;
     });

    filter() – Array.filter()

    La fonction map() est bien utile pour modifier des groupes entiers de valeurs, mais dans bien des cas on désire uniquement modifier un sous-ensemble de ces valeurs en se basant sur un énoncé conditionnel. C’est à ce moment qu’entre en jeu la fonction filter(). La fonction filter() permet de, tel que son nom l’indique, filtrer un ensemble de données.

    Voyez l’exemple suivant :

    var numbers = [1, 2, 3, 4];
     var new_numbers = [];
     for(var i = 0; i < numbers.length; i++) {
     if(numbers[i] % 2 !== 0) {
     new_numbers[i] = numbers[i] * 2;
     }
     }
     console.log("Les nombres doublés sont", new_numbers); // [2, 6]

    À l’aide des fonctions map() et filter(), le code ci-haut peut être simplifié ainsi :

    var numbers = [1, 2, 3, 4];
     var new_numbers = numbers.filter(function(number){
     return (number % 2 !== 0);
     }).map(function(number){
     return number * 2;
     });
     console.log("Les nombres doublés sont", new_numbers); // [2, 6]

    Il y a un certain nombre de différences entre les fonctions map() et filter(). Spécifiquement, au niveau des valeurs de retour, filter() ne retourne pas de données modifiées, mais doit retourner une valeur booléenne(vrai/faux). Ceci a un impact sur si les données testées seront prises en compte ou non.

    *Les fonctions map() & filter() peuvent être enchaînées les une après les autres, infiniment. Conséquemment, n’hésitez pas à en faire usage afin d’optimiser votre code.

    reduce() – Array.reduce()

    Si ce que vous désirez faire, est obtenir un sous-produit des données d’un tableau, la fonction reduce() est là pour répondre à la majeure partie de vos besoins les plus simples.

    Aimeriez-vous avoir un total? Voici un exemple d’usage où on double toutes les valeurs d’un tableau avant d’en faire le cumul. :

    var numbers = [1, 2, 3, 4];
     var total_number = numbers.map(function(number){
     return number * 2;
     }).reduce(function(total, number){
     return total + number;
     }, 0);
     console.log("Le total est", total_number); // 20

    La seconde valeur passée à la méthode est la valeur de départ de la valeur qui sera retournée. Dans ce cas-ci, la valeur de départ est 0. Pour chacune des valeurs dans le tableau, on double la valeur et la cumule à partir de 0. La résultante est de 20. ((1×2)+(2×2)+(3×2)+(4×2)).

    Dans l’exemple ci-haut, la valeur de retour est un entier, mais vous pourriez faire des concaténations textuelles, assembler un tableau, ou autre; considérez simplement de faire les retours appropriés à l’intérieur de votre callback, mais aussi d’initialiser correctement votre second paramètre avec une valeur de départ appropriée.

    En conclusion

    Ces fonctions sont d’excellents raccourcis pour la rédaction d’un code propre et optimal lors de manipulations de données dans un tableau. La pratique est clé, donc n’hésitez pas à expérimenter & poser vos questions dans la zone des commentaires, plus bas, au besoin.

    • Un merci tout particulier à l’auteur de l’articlesvg
    • suivant, duquel une bonne partie du matériel a été tiré pour l’élaboration de celui-ci.

    Auteur de l'article

    David Barbier

    Shaman programmeur
    David est un passionné qui ne perd pas une minute. À peine sont DEC d’informatique en poche, obtenu avec brio en 2004, il commence sa carrière de programmeur web et PHP. Toujours à l’affût de nouveautés technologiques, il ne cesse d’apprendre et d’engranger de nouvelles compétences afin de proposer ce qui se fait de mieux à nos clients. Rien n’arrête David. Plus le défi à relever est important, plus il y prend de plaisir. Son enthousiasme permanent est un stimulant contagieux pour le reste de l’équipe!

    À découvrir sur notre blogue

    2016-12-19

    CakePHP, soumettre un formulaire en Ajax et retourner les erreurs de validations

    Gilles Duquerroy / Flexocodeur

    Exemple de code pour soumettre un formulaire avec CakePHP en utilisant Ajax et avoir un retour des erreurs de validation.

    Lire la suite
    2016-11-22

    Marier SVG & Javascript

    David Barbier / Shaman programmeur

    SVG (Scalable Vector Graphics / Graphiques vectoriels redimensionnables) est une spécification du W3C qui date déjà de 2001.

    Lire la suite
    2016-12-02

    Visual Composer : incompatibilité avec WordPress 4.5 & 4.6

    David Barbier / Shaman programmeur

    Visual Composer est un plugin très populaire de construction/gestion de pages(Page builder) pour Wordpress.

    Lire la suite
    2017-03-17

    SQLite pour vos projets PHP

    David Barbier / Shaman programmeur

    Nous discuterons spécifiquement de SQLite, ses particularités, ses avantages et quelques cas dans lesquels sont usage est pertinent ou souhaitable.

    Lire la suite

    4 commentaires pour “Javascript : manipuler vos données avec map, filter et reduce”

    1. Andre dit:

      Merci beaucoup pour la clarté de vos explications , simple et concis , j’ ai pu avancer très vite .

    2. candide dit:

      pourquoi dit-on que la fonction map est essentiellement une boucle for each

      1. Bonjour,
        On dit que map est une boucle for each car elle exécute la fonction pour chaque itération, dans le cas de l’exemple sur chaque chiffre du tableau numbers.

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.