Réduisez Javascript : maîtrisez les bases

Aujourd'hui, nous allons parler de la méthode de réduction de tableau Javascript et de la manière dont nous pouvons l'utiliser pour réduire un tableau en une seule valeur. Tous les extraits de code écrits sont en langage Javascript. Une connaissance de base de la langue est nécessaire pour comprendre cet article et mettre en œuvre la méthode efficacement.

Qu'est-ce que la méthode Javascript de réduction ?

La méthode de réduction de tableau Javascript est un composant essentiel de la programmation fonctionnelle qui prend un tableau et le réduit à une simple valeur. Ceci est accompli en exécutant la fonction de rappel sur chaque élément du tableau tour à tour, en passant le résultat du calcul sur l'élément qui le précède.

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue, initialValue) console.log(sumWithInitial); // expected output: 10

L'extrait de code ci-dessus est un tableau de nombres ; lorsque nous appelons la méthode reduce dessus, elle prend tout le tableau et renvoie juste une valeur qui est 10.

Comprendre les paramètres et l'argument Javascript "réduire"

Il est important d'avoir une compréhension très concrète de ce que sont les paramètres Javascript "réduire" si nous devons utiliser correctement la méthode. Ci-dessous, j'ai mis en évidence ces paramètres ; on va les prendre les unes après les autres, puis à la fin tout mettre ensemble pour donner du sens.

1. fonction de rappel
2. valeur initiale

Fonction de rappel

Cette fonction s'exécute sur chaque élément du tableau. Lors de l'exécution ultérieure du rappel Fn, sa valeur de retour est remplacée par la valeur de l'argument de l'accumulateur. La valeur de retour passe à reduce(), pour l'invocation finale.

Les paramètres suivants sont fournis lors de l'appel de la fonction :

1. accumulateur
2. valeur actuelle
3. indexactuel
4. déployer

Accumulateur

C'est le résultat du dernier appel au rappel Fn, en valeur. Si elle est fournie, initialValue est utilisée lors du premier appel ; sinon, array[0] est utilisé.

valeur actuelle

C'est la valeur de l'élément courant. Si une valeur initiale était fournie, la valeur du tableau sur l'index 0 (tableau[0]) serait renvoyée au premier appel ; sinon, l'index 1 (array[1]) serait renvoyé.

IndexActuel

Il s'agit de la position d'index de la valeur courante du tableau. Si initialValue était donné lors du premier appel, sa position serait sur l'index 0 ; sinon, ce serait sur l'index 1.

Déployer

Il s'agit simplement du tableau dans lequel la méthode reduce() a été utilisée.

valeur initiale

Valeur utilisée pour initialiser l'accumulateur lors du premier rappel. Si initialValue est fourni, callbackFn commence à s'exécuter avec currentValue défini sur le premier élément du tableau. Si initialValue est omis, accumulator est défini sur la première valeur du tableau et callbackFn commence à s'exécuter avec currentValue défini sur la deuxième valeur du tableau. Si le tableau est vide dans ce scénario (c'est-à-dire qu'il n'y a pas d'élément initial à renvoyer en tant qu'accumulateur), une erreur est générée.

Tout mettre ensemble

réduire(Fonction (accumulateur, valeurcourante, indexcourant, tableau) { /* … */ }, valeurinitiale)

La combinaison de tous ces paramètres devrait ressembler à l'extrait de code ci-dessus.

Comment fonctionne la méthode Javascript "réduire" ?

Plongeons plus profondément dans cette méthode Javascript réduite et voyons ce qui se passe dans les coulisses.

 const array1 = [1, 2, 3, 4]; // 0 + 1 + 2 + 3 + 4 const initialValue = 0; const sumWithInitial = array1.reduce( (accumulator, currentValue) => accumulator + currentValue, initialValue );

Tout ce que fait la méthode reduce Javascript est de parcourir l'élément, et chaque fois qu'il est bouclé, nous renvoyons un élément individuel et nous obtenons la valeur précédente que nous renvoyons à partir de reduce(). S'il s'agit du premier élément de reduce(), nous obtenons simplement zéro parce que c'est notre valeur par défaut. Si nous avons changé la valeur par défaut à 50, par exemple, cela affecterait le tableau.

Nous prenons zéro ou le nombre par défaut et l'ajoutons à notre premier élément ; on obtiendrait un total qui serait 1 dans le code précédent. Nous recommençons pour l'élément suivant, qui est 2. Nous ajoutons 1 + 2 et obtenons 3 ; nous continuons ce processus jusqu'à ce que nous arrivions à l'élément final.

Le tableau ci-dessus donne une image plus claire de ce qui se passe chaque fois que nous utilisons cette méthode. Notez que ce résultat varie en fonction de initialValue.

Conclusion

Enfin, reduce Javascript est une méthode itérative. Il rassemble tous les éléments du tableau en une seule valeur en appliquant une fonction de rappel "réducteur" à chaque élément dans l'ordre d'index croissant. La valeur de retour callbackFn est toujours fournie sous forme d'accumulateur lorsque callbackFn est appelée à nouveau. Réduire renvoie sa valeur de retour à partir de la dernière valeur de l'accumulateur, qui est la valeur renvoyée par le rappel Fn lors de la dernière itération du tableau ().

Alors que la fonction fournie en tant que callback-Fn peut modifier, le tableau sur lequel elle est appelée, reduce() ne le fait pas. Cependant, notez que la longueur du tableau est conservée avant l'exécution initiale du rappel Fn.