BP1 : La fonction map

La méthode Array.prototype.map() (voir documentation est une méthode très utile... Elle permet de fabriquer un nouveau tableau basé sur les résultats d'un fonction qui va agir sur tous les éléments.

Exemple d'utilisation

Vous avez une liste points (Array) d'objets de type {x, y, couleur, epaisseur} et pour un usage quelconque (recherche de xMax par exemple), vous aimeriez en extraire une liste des x. La fonction map() sert à cela.

points.map(function) va exécuter la fonction passée en argument (appelé communément callback function) sur tous les éléments de points et fabriquer une nouvelle liste avec les valeurs de retours de la fonction.

Ici, on fera :

lesX = points.map(function(element){return element.x})

Ce qui équivaut à (avec la syntaxe de fonction fléchée plus concise) :

lesX = points.map(element => element.x)

BP2 : la fonction reduce

La fonction Array.prototype.reduce() (voir la documentation) parcourt un tableau à l'aide d'une fonction (passé en argument) en gardant une trace à chaque passage via un paramètre appelé un accumulateur. Cet accumulateur est transmis d'une étape à l'autre lorsque la fonction passe le tableau en revue. Au final, la fonction reduce retournera une unique valeur (d'où son nom puisqu'elle réduit le tableau à une seule valeur).

Exemple 1 : calculer la somme d'une liste de nombres

const mesNombres = [5, 1, 7, 2, 3, 4]

const somme = mesNombres.reduce((accumulateur, valeurCourante) => 
  accumulateur + valeurCourante
)

console.log(somme) // affichage attendu: 22

Quelquefois, les nombres à additionner ne sont pas directement accessibles (par exemple, lorsque je dispose d'un tableau d'objets). Dans ce cas, on doit utiliser une valeur initiale qui va servir à initialiser l'accumulateur. Elle est passée comme deuxième argument de la fonction reduce (après la fonction callback).

const monControle = [
  { nom: 'jean', note: 12 },
  { nom: 'pierre', note: 15 },
  { nom: 'paul', note: 8 }
]

const somme = monControle.reduce(
  (accumulateur, eleveCourant) => accumulateur + eleveCourant.note,
  0 // valeur initiale pour l'accumulateur
)

console.log(somme) // affichage attendu: 35

Remarque :

dans le cas précédent, cette valeur initiale était la première valeur du tableau. Si nous avions passé malgré tout une valeur initiale dans les paramètres de la fonction reduce, la première valeur du tableau aurait été ignorée.

Exemple 2 : trouver le maximum d'une liste d'entiers

const mesNombres = [5, 1, 7, 2, 3, 4]

const maximum = mesNombres.reduce((accumulateur, valeurCourante) => {
  if (accumulateur < valeurCourante) {
    return valeurCourante
  } else {
    return accumulateur
  }
})

console.log(maximum) // affichage attendu: 7

Un équivalent plus court syntaxiquement avec l'opérateur ? :

const mesNombres = [5, 1, 7, 2, 3, 4]

const maximum = mesNombres.reduce((accumulateur, valeurCourante) =>
  accumulateur < valeurCourante ? valeurCourante : accumulateur
)

console.log(maximum) // affichage attendu: 7

Exemple 3 : compter les occurrences de valeurs dans un tableau

J'ai un tableau de couleurs et je souhaite compter combien chaque couleur apparaît dans le tableau (sans savoir au préalable quelles sont ces couleurs bien sûr). L'accumulateur sera ici un objet dont les propriétés seront les couleurs et les valeurs le décompte de la couleur. Ces propriétés sont créées et mises à jour au fur et à mesure. La valeur initiale de l'accumulateur est donc une objet vide {}.

const mesCouleurs = ['blanc', 'rouge', 'blanc', 'bleu', 'blanc', 'blanc', 'rouge', 'blanc']

const decompte = mesCouleurs.reduce(
  (accumulateur, couleurCourante) => { return 
    {
      ...accumulateur, // on décompose l'objet existant afin de le compléter
      [couleurCourante]: (accumulateur[couleurCourante] || 0) + 1 // MAJ du décompte de la couleur courante
    }
  },
  {} // valeur initiale (objet vide)
)

console.log(decompte) // affichage attendu : { blanc: 5, rouge: 2, bleu: 1 }

Exemple 4 : récupérer la liste des valeurs d'une liste d'objet.

Dans l'exemple 1, nous avions le tableau monControle qui contenait des objets {nom:..., note:...}. Nous pouvons utiliser reduce pour récupérer la liste des noms de tous les élèves ayant participé au contrôle.

const monControle = [
  { nom: 'jean', note: 12 },
  { nom: 'pierre', note: 15 },
  { nom: 'paul', note: 8 }
]

const eleves = monControle.reduce(
  (accumulateur, eleveCourant) => 
    [
      ...accumulateur, // on décompose le tableau existant afin de le compléter
      eleveCourant.nom 
    ],
  [] // valeur initiale (tableau vide)
)

console.log(eleves) // affichage attendu : [ 'jean', 'pierre', 'paul' ]