Un Guide de la méthode de Réduction en Javascript

par Josh Pitzalis

La méthode reduce de JavaScript est l’une des pierres angulaires de la programmation fonctionnelle. Explorons comment cela fonctionne, quand vous devriez l’utiliser, et certaines des choses cool qu’il peut faire.

une réduction de base

utilisez-la quand: vous avez un tableau de montants et vous voulez les additionner tous.,

const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

Comment l’utiliser:

• Dans cet exemple, Réduire accepte deux paramètres, le nombre total et le montant actuel.
• la méthode reduce parcourt chaque nombre du tableau comme elle le ferait dans une boucle for.
• lorsque la boucle démarre, la valeur totale est le nombre à l’extrême gauche (29.76) et le montant actuel est celui à côté (41.85).
• Dans cet exemple particulier, nous voulons ajouter le montant actuel du total.,
• Le calcul est répété pour chaque montant dans le tableau, mais chaque fois que la valeur actuelle passe au nombre suivant dans le tableau, en se déplaçant vers la droite.
• Lorsqu’il ne reste plus de nombres dans le tableau, la méthode renvoie la valeur totale.

la version ES5 de la méthode Reduce en JavaScript

Si vous n’avez jamais utilisé la syntaxe ES6 auparavant, ne laissez pas l’exemple ci-dessus vous intimider., C’est exactement la même que l’écriture:

var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11

Nous utilisons la balise const au lieu de var et de remplacer le mot function avec un « fat flèche” (=>) après les paramètres, et nous omettons le mot « retour ».

j’utiliserai la syntaxe ES6 pour le reste des exemples, car elle est plus concise et laisse moins de place aux erreurs.

trouver une moyenne avec la méthode Reduce en JavaScript

Au lieu de consigner la somme, vous pouvez diviser la somme par la longueur du tableau avant de renvoyer une valeur finale.,

la façon de le faire est de tirer parti des autres arguments de la méthode reduce. Le premier de ces arguments est l’indice. Tout comme une boucle for, l’index fait référence au nombre de fois que le réducteur a bouclé le tableau. Le dernier argument est le tableau lui-même.

mappez et filtrez en tant que réductions

Si vous pouvez utiliser la fonction de réduction pour cracher une moyenne, vous pouvez l’utiliser comme vous le souhaitez.,

par exemple, vous pouvez doubler le total, ou la moitié de chaque nombre avant de les ajouter ensemble, ou utiliser une instruction if à l’intérieur du réducteur pour ajouter uniquement des nombres supérieurs à 10. Mon point est que la méthode Reduce en JavaScript vous donne un mini CodePen où vous pouvez écrire la logique que vous voulez. Il répétera la logique pour chaque montant du tableau, puis retournera une seule valeur.

le fait est que vous n’avez pas toujours à renvoyer une seule valeur. Vous pouvez réduire un tableau en un nouveau tableau.,

Par exemple, permet de réduire un tableau des montants dans un autre tableau où chaque montant est doublé. Pour ce faire, nous devons définir la valeur initiale de notre accumulateur sur un tableau vide.

La valeur initiale est la valeur du total des paramètre lorsque la réduction commence. Vous définissez la valeur initiale en ajoutant une virgule suivie de votre valeur initiale à l’intérieur des parenthèses mais après les accolades (en gras dans l’exemple ci-dessous).

const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);

Dans les exemples précédents, la valeur initiale était de zéro donc j’ai omise., En omettant la valeur initiale, le total sera par défaut au premier montant du tableau.

en définissant la valeur initiale sur un tableau vide, nous pouvons ensuite pousser chaque montant dans le total. Si nous voulons réduire un tableau de valeurs dans un autre tableau où chaque valeur est doublée, nous devons pousser le montant * 2. Ensuite, nous retournons le total quand il n’y a plus de montants à pousser.

const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // 

Nous avons créé un nouveau tableau où chaque montant est doublé. Nous pourrions également filtrer les nombres que nous ne voulons pas doubler en ajoutant une instruction if à l’intérieur de notre réducteur.,

ces opérations sont les méthodes map et filter réécrites en méthode reduce.

pour ces exemples, il serait plus logique d’utiliser map ou filter car ils sont plus simples à utiliser. L’avantage de l’utilisation de reduce entre en jeu lorsque vous souhaitez cartographier et filtrer ensemble et que vous avez beaucoup de données à parcourir.

Si vous enchaînez la carte et le filtre ensemble, vous effectuez le travail deux fois. Vous filtrez chaque valeur, puis vous mappez les valeurs restantes. Avec reduce, vous pouvez filtrer puis mapper en un seul passage.,

utilisez map et filter mais lorsque vous commencez à enchaîner de nombreuses méthodes, vous savez maintenant qu’il est plus rapide de réduire les données à la place.

créer un décompte avec la méthode Reduce en JavaScript

utilisez-le quand: vous avez une collection d’éléments et vous voulez savoir combien de chaque élément sont dans la collection.

pour compter les éléments dans un tableau, notre valeur initiale doit être un objet vide, pas un tableau vide comme dans le dernier exemple.

puisque nous allons retourner un objet, nous pouvons maintenant stocker des paires clé-valeur dans le total.,

fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})

À partir de notre premier passage, nous voulons que le nom de la première clé de notre valeur actuelle et nous voulons donner une valeur de 1.

cela nous donne un objet avec tous les fruits comme clés, chacun avec une valeur de 1. Nous voulons que la quantité de chaque fruit augmente s’ils se répètent.

pour ce faire, sur notre deuxième boucle, nous vérifions si notre total contient une clé avec le fruit actuel du réducteur. Si ce n’est pas le cas, nous le créons. Si c’est le cas, nous incrémentons le montant d’un.

fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});

j’ai réécrit la même logique de façon plus concise haut.,

aplatir un tableau de tableaux avec la méthode Reduce en JavaScript

Nous pouvons utiliser reduce pour aplatir des quantités imbriquées dans un seul tableau.

nous définissons la valeur initiale sur un tableau vide, puis concaténons la valeur actuelle au total.

const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // 

Le plus souvent, les informations sont imbriquées de manière plus compliquée. Par exemple, disons que nous voulons juste toutes les couleurs dans la variable de données ci-dessous.

const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];

Nous allons parcourir chaque objet et retirer les couleurs. Nous le faisons en pointant le montant.c pour chaque objet du tableau., Nous utilisons ensuite une boucle forEach pour pousser chaque valeur du tableau imbriqué dans out total.

Si nous n’avons besoin que d’un numéro unique, nous pouvons vérifier que le nombre existe déjà au total avant de le pousser.

Piping with Reduce

un aspect intéressant de la méthode reduce en JavaScript est que vous pouvez réduire les fonctions ainsi que les nombres et les chaînes.

disons que nous avons une collection de simples fonctions mathématiques. ces fonctions nous permettent d’incrémenter, décrémenter, doubler et diviser par deux un montant.,

pour une raison quelconque, nous devons incrémenter, puis doubler, puis décrémenter un montant.

Vous pouvez écrire une fonction qui prend en entrée et renvoie (entrée + 1) * 2 -1. Le problème est que nous savons que nous allons devoir incrémenter le montant trois fois, puis le doubler, puis le décrémenter, puis le réduire de moitié à un moment donné dans le futur. Nous ne voulons pas avoir à réécrire notre fonction à chaque fois, nous allons donc utiliser reduce pour créer un pipeline.

Un pipeline est un terme utilisé pour une liste de fonctions qui transforment certaines valeur initiale à une valeur finale., Notre pipeline sera composé de nos trois fonctions dans l’ordre que nous voulons utiliser.

let pipeline = ;

Au lieu de réduire un tableau de valeurs, nous réduisons notre pipeline de fonctions. Cela fonctionne parce que nous définissons la valeur initiale comme la quantité que nous voulons transformer.

const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3

Parce que le pipeline est un tableau, il peut être facilement modifiée. Si nous voulons décrémenter quelque chose trois fois, puis le doubler, le décrémenter et le réduire de moitié , nous modifions simplement le pipeline.

var pipeline = ;

La fonction de réduction reste exactement le même.,

erreurs stupides à éviter

Si vous ne transmettez pas une valeur initiale, reduce supposera que le premier élément de votre tableau est votre valeur initiale. Cela a bien fonctionné dans les premiers exemples parce que nous additions une liste de nombres.

Si vous essayez de comptabiliser les fruits et que vous omettez la valeur initiale, les choses deviennent bizarres. Ne pas entrer une valeur initiale est une erreur facile à faire et l’une des premières choses que vous devriez vérifier lors du débogage.

une Autre erreur commune est d’oublier de retourner le total. Vous devez retourner quelque chose pour que la fonction de réduction fonctionne., Vérifiez toujours et assurez-vous que vous renvoyez réellement la valeur souhaitée.

outils, conseils& références

• Tout ce qui se trouve dans cet article provient d’une fantastique série vidéo sur egghead appelée Introducing Reduce. Je donne tout le crédit à Mykola Bilokonsky et je lui suis reconnaissant pour tout ce que je sais maintenant sur l’utilisation de la méthode Reduce en JavaScript. J’ai essayé de réécrire une grande partie de ce qu’il explique dans mes propres mots comme un exercice pour mieux comprendre chaque notion., En outre, il est plus facile pour moi de faire référence à un article, par opposition à une vidéo, lorsque je dois me rappeler comment faire quelque chose.
• le MDN réduit les étiquettes de documentation Ce que j’ai appelé un total leaccumulator. Il est important de le savoir car la plupart des gens s’y référeront comme un accumulateur si vous lisez à ce sujet en ligne. Certains l’appellent prev comme dans la précédente valeur. Tout se réfère à la même chose. J’ai trouvé plus facile de penser à un total quand j’apprenais réduire.,
• Si vous souhaitez vous entraîner à utiliser reduce, je vous recommande de vous inscrire à freeCodeCamp et de compléter autant d’algorithmes intermédiaires que possible en utilisant reduce.
• Si les variables ‘const’ dans les extraits d’exemple sont nouvelles pour vous, j’ai écrit un autre article sur les variables ES6 et pourquoi vous pourriez vouloir les utiliser.
• j’ai également écrit un article intitulé The Trouble With Loops qui explique comment utiliser map() et filter () si elles sont nouvelles pour vous.

Merci pour la lecture! Si vous souhaitez être averti lorsque j’écris un nouvel article, veuillez entrer votre e-mail ici.,

et si vous avez aimé l’article, veuillez le partager sur les réseaux sociaux afin que les autres puissent le trouver.