Informatique


Travailler avec des tableaux

Aller à

Les 5 catégories d'exercices avec les tableaux map() filter() reduce() Comment choisir entre les 3? Quiz
 

Les 5 catégories d'exercices avec les tableaux

  • Appliquer un même traitement à tous les éléments d'un tableau, map()
  • Filtrer les éléments d'un tableau, par exemple récupérer les valeurs paires d'un tableau, et renvoyer un tableau comprenant ces valeurs, filter()
  • Tirer une valeur d'un tableau, par exemple la valeur maximum présente dans le tableau, et récupérer cette valeur dans une variable, reduce().
  • Effectuer une opération, par exemple arithmétique, sur l'ensemble des éléments du tableau, par exemple faire la somme des éléments du tableau, reduce()
  • Tirer une valeur booléenne d'un tableau, par exemple vérifier s'il y a une valeur paire dans un tableau de nombre, et récupérer cette valeur dans une variable, reduce().

map()

Nous sommes dans le cas où nous effectuons un même traitement sur tous les éléments d'un tableau.
map() ne modifie pas le tableau sur lequel on l'applique! 

Démo
<h2>map()</h2>
<script>
const myArr=[1,2,3,4,5];
const doubleArr;
for(let i=0;i<myArr.length;i++){
	doubleArr.push(myArr[i]*2);
}
console.log(myArr);
console.log(doubleArr);
</script>

Parcourir un tableau avec une boucle classique présente quelques inconvénients:

  • il s'agit d'une programmation boilerplate
  • il faut un compteur de boucle qui n'a rien à voir avec le but recherché
  • des effets de bord possibles; parcourir un tableau n'est pas anodin, a-t-on bien construit la condition?, est-on bien certain que le tableau de base ne subira aucune modification?, les variables de travail sont-elles bien scopées?, etc...
  • le code se fait sur plusieurs lignes
  • le code n'explicite pas le but recherché, il s'agit d'une technique qui doit être lue longuement avant de comprendre le but de la boucle
  • le code n'a pas de valeur de retour, il faut construire un nouveau tableau pour le résultat

Démo
<h2>map()</h2>
<script>
const myArr=[1,2,3,4,5];
const doubleArr = myArr.map(e => e*2);
console.log(myArr);
console.log(doubleArr);
</script>

Cette solution est beaucoup plus professionnelle:

  • on utilise une fonction du langage, on est plus du tout boilerplate
  • pas de variables inutiles
  • pas d'effets de bord
  • le code tient en une ligne
  • le code est explicite, à la lecture du code on sait immédiatement qu'on va appliquer un même traitement sur chaque cellule du tableau myArr et renvoyer le résultat dans le tableau doubleArr
  • map() propose automatiquement une valeur de retour, on a pas besoin de construire un nouveau tableau avec push()

filter()

Nous sommes dans le cas où nous effectuons un test sur tous les éléments d'un tableau.
filter() ne modifie pas le tableau sur lequel on l'applique! 

Démo
<h2>filter()</h2>
<script>
const myArr=[1,2,3,4,5];
const evenArr = [];
for(let i=0;i<myArr.length;i++){
	if(myArr[i] % 2 == 0){
	evenArr.push(myArr[i]);
	}
}
console.log(myArr);
console.log(evenArr);
</script>

Avec les inconvénients classiques cités plus haut... 

Démo
<h2>filter()</h2>
<script>
const myArr=[1,2,3,4,5];
const evenArr = myArr.map(e => e % 2 == 0;);
console.log(myArr);
console.log(evenArr);
</script>

Et la solution plus professionnelle...

reduce()

Le grand classique, la somme des éléments d'un tableau. 

Démo
<h2>reduce()</h2>
<script>
const myArr=[1,2,3,4,5];
let somme=myArr.reduce((acc,e) => acc + e);
console.log(myArr);
console.log(somme);
</script>

Tout de suite la solution la plus pro.

Comment choisir entre les 3?
  • Mon tableau de sortie est différent mais de même longueur que mon tableau initial, --> map()
  • Mon tableau de sortie est plus petit que mon tableau initial, --> filter()
  • La sortie est une valeur quel que soit son type, --> reduce()

Quiz