Javascript reduce() comment ça marche ?

Dans cet article, je vais vous expliquer comment utiliser la méthode Javascript reduce, nous allons à travers des exemples vous montrer comment ça fonctionne et quand l’utiliser.
La méthode javascript reduce est utilisée pour appliquer une fonction à chaque élément du tableau afin de réduire le tableau à une seule valeur.
Voyons un exemple :

 

let result = array.reduce((acc, v, i, a) => {
  // retourne la nouvelle valeur à la variable 
}, initVal);

// result - la valeur unique qui est renvoyée. 
// array - le tableau sur lequel la fonction de réduction est exécutée. 
// acc - l'accumulateur accumule toutes les valeurs retournées. 
// v - la valeur courante en cours de traitement 
// i - l'index courant de la valeur en cours de traitement. 
// a - le tableau d'origine 
// initVal - une valeur initiale fournie de manière facultative. 
// Si la valeur initiale n'est pas fournie, 
// l'élément 0 est utilisé comme valeur initiale.

La méthode javascript reduce peut être considérée comme une boucle for, qui est spécifiquement destinée à utiliser les valeurs d’un tableau pour créer quelque chose de nouveau. Jetez un coup d’œil à cet exemple.

var array = [11, 12, 13, 14];
var sum = 0;
for(var i = 0; i  < array.length; i++) {
      sum += array[i];
 }

// sum = 50

Le but du code ci-dessus est de trouver la somme de toutes les valeurs de notre tableau. Oui, cela fonctionne, mais il existe un moyen plus simple d’archiver le même résultat.

Refactoriser la fonction précédente en utilisant la méthode javascript reduce().

let array = [11, 12, 13, 14];
let sum = array.reduce((bcc, v) => bcc + v); 
// sum = 50

Même résultat sans aucune boucle.

Nous avons utilisé la variable bcc pour représenter notre concaténation. Comme notre reduce() travaille dans le tableau, La valeur bcc augmentera jusqu’à ce que la fonction soit terminée.

Vous vous souvenez que j’ai précisé que nous pouvions utiliser une valeur initiale facultative ? C’est assez facile à mettre en place. Nous allons utiliser le même exemple que précédemment. Nous allons additionner notre tableau, mais cette fois, nous voulons commencer avec une valeur initiale de 250.

A quoi cela ressemble-t-il lorsque nous commençons avec une valeur initiale de 250 ? Il suffit de voir l’exemple ci-dessous pour le savoir.

let array = [11, 12, 13, 14]; 
let sum = array.reduce((bcc, v) => bcc + v, 250);

Comme vous pouvez le constater, le code ci-dessus est presque identique à l’exemple précédent. Tout ce qui a changé, c’est que nous avons ajouté un deuxième argument après notre callback. J’ai passé le nombre 250 comme point de départ. Maintenant, lorsque nous exécutons la fonction, la somme sera égale à 300.

J’espère que cela vous sera utile, vous pouvez retrouver plusieurs articles dans le thème du Javascript et notamment avec des tableaux javascript, par exemple pour savoir comment fusionner deux tableaux Javascript.

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.