Map

Définition

Map à été intégré avec la cinquième version du standard ECMA-262 (ECMAScript 5). C’est une fonction qui s’applique sur un tableau.

L’idée est le que la fonction de callback fourni en argument de Map s’applique sur chacun des éléments du tableau d’origine. Sur chaque éléments de ce tableau, une opération est effectué, ainsi, au fur et à mesure que les opérations de callback se produisent sur chaque élément du tableau d’origine, chaque résultats devient un élément du nouveau tableau.

Syntaxe

var newArray = OldArray.map(callback[,thisArg])

Paramètre

Callback
La fonction de callback utilisé pour créer un élément du nouveau tableau. Cette fonction prends en paramètre 3 arguments :

  1. Valeur courante
    La valeur de l’élément courant du tableau d’origine sur lequel on applique map.
  2. Index courant [Facultatif]
    L’index de l’élément courant du tableau d’origine.
  3. Tableau d’origine [Facultatif]
    Tableau d’origine sur lequel on appel la methode map.

ThisArg
C’est la valeur à utiliser pour le context This lors de l’execution de la fonction de callback. Attention, la fonction de callback doit être écrite sous forme de fonction anonyme.
En d’autres termes, si le callback est une lambda expression, la valeure de This sera ignorée et retournera toujours le contexte global window.

Exemples

  • Callback – Utilisation de valeur et index courant
    Double les éléments situés à un indice pair et renvoi le nouveau tableau modifié.

     
    var array = [0,1,2,3,4,5,6] 
    var mappedArray = array.map((elt,i)=>(i%2===0)?elt*2:elt) 
    console.log(mappedArray) 
    //Output : [0,1,4,3,8,5,12] 
    
  • Modifier le format d’objet du tableau d’origine.

    var employees = [
    { age: 20, name: 'Dgibril Diop' },
    { age: 24, name: 'Jean Edouard' },
    { age: 56, name: 'Youssef Ziad' },
    { age: 88, name: 'John Smith' }
    ];
    
    var newEmployees = employees.map(elt=>{
    var obj = {}
    obj[elt.age]=elt.name
    return obj
    })
    console.log(newEmployees)
    //Output : 
    [ { '20': 'Dgibril Diop' },
      { '24': 'Jean Edouard' },
      { '56': 'Youssef Ziad' },
      { '88': 'John Smith' } ]
    
  • Map – utilisation de ThisArg
    Reprenons l’exemple précédent.
    En second paramètre de Map, passons un objet ayant pour propriété ‘x’ et pour valeur ‘My name is’.
    On constate que This a pour context la propriété passés en paramètre.

    var employees = [
    { age: 20, name: 'Dgibril Diop' },
    { age: 24, name: 'Jean Edouard' },
    { age: 56, name: 'Youssef Ziad' },
    { age: 88, name: 'John Smith' }
    ];
    
    var newEmployees = employees.map(function(elt){
    var obj = {}
    obj[elt.age]=this.x+elt.name
    return obj
    },{x:"My name is "})
    console.log(newEmployees)
    
    //Output :
    [ { '20': 'My name is Dgibril Diop' },
    { '24': 'My name is Jean Edouard' },
    { '56': 'My name is Youssef Ziad' },
    { '88': 'My name is John Smith' } ]
    

Leave a Reply

Your email address will not be published. Required fields are marked *