Le guide ultime des méthodes de tableau JavaScript - Réduire

La reduce()méthode réduit un tableau de valeurs à une seule valeur. La valeur unique renvoyée peut être de n'importe quel type.

reduce()est comme le couteau suisse des méthodes de tableau. Alors que d'autres aiment map()et filter()fournissent des fonctionnalités spécifiques, reduce()peuvent être utilisées pour transformer un tableau d'entrée en sortie que vous désirez, tout en préservant le tableau d'origine.

Syntaxe

const newValue = arr.reduce(function(accumulator, currentValue, index, array) { // Do stuff with accumulator and currentValue (index, array, and initialValue are optional) }, initialValue);
  • newValue - le nouveau nombre, tableau, chaîne ou objet renvoyé
  • arr - la baie en fonctionnement
  • accumulator - la valeur retournée de l'itération précédente
  • currentValue - l'élément courant dans le tableau
  • index - l'index de l'élément courant
  • array- le tableau d'origine sur lequel a reduce()été appelé
  • initialValue - un nombre, un tableau, une chaîne ou un objet qui sert de valeur initiale pour la sortie éventuelle

Exemples

ES5

var numbers = [1, 2, 3]; var sum = numbers.reduce(function(total, current) { return total + current; }, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6

ES6

const numbers = [1, 2, 3]; const sum = numbers.reduce((total, current) => { return total + current; }, 0); const sumOneLiner = numbers.reduce((total, current) => total + current, 0); console.log(numbers); // [1, 2, 3] console.log(sum); // 6 console.log(sumOneLiner); // 6

Tout sur initialValue

initialValue À condition de

L' initialValueargument est facultatif. S'il est fourni, il sera utilisé comme valeur initiale de l'accumulateur ( total) lors du premier appel à la fonction de rappel:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }, 1); console.log(product); // 24

Puisque le initialValuede 1 est fourni après la fonction de rappel, le reduce()commence au début du tableau et définit le premier élément (2) comme valeur actuelle ( current). Il parcourt ensuite le reste du tableau, mettant à jour la valeur de l'accumulateur et la valeur actuelle en cours de route.

initialValue Omis

Si initialValuen'est pas fourni, l'itération commencera au deuxième élément du tableau (à l'index 1), avec accumulatorégal au premier élément du tableau et currentValueégal au deuxième élément:

const numbers = [2, 3, 4]; const product = numbers.reduce((total, current) => { return total * current; }); console.log(product);

Dans cet exemple, no initialValueest fourni, donc reduce()définit le premier élément du tableau comme la valeur de l'accumulateur ( totalest égal à 2) et définit le deuxième élément du tableau comme la valeur actuelle ( currentValueest égal à 3). Il parcourt ensuite le reste du tableau.

Lors de la réduction d'un tableau de chaînes:

const strings = ['one', 'two', 'three']; const numberString = strings.reduce((acc, curr) => { return acc + ', ' + curr; }); console.log(numberString); // "one, two, three"

Bien qu'il soit facile d'omettre l' initialValueargument si votre reduce()méthode renvoie un nombre ou une simple chaîne, vous devez en inclure un si elle renvoie un tableau ou un objet.

Renvoyer un objet

Transformer un tableau de chaînes en un seul objet qui montre combien de fois chaque chaîne apparaît dans le tableau est simple. Passez simplement un objet vide ( {}) comme initialValue:

const pets = ["dog", "chicken", "cat", "dog", "chicken", "chicken", "rabbit"]; const petCounts = pets.reduce(function(obj, pet) { if (!obj[pet]) { // if the pet doesn't yet exist as a property of the accumulator object, // add it as a property and set its count to 1 obj[pet] = 1; } else { // pet exists, so increment its count obj[pet]++; } return obj; // return the modified object to be used as accumulator in the next iteration }, {}); // initialize the accumulator as an empty object console.log(petCounts); /* { dog: 2, chicken: 3, cat: 1, rabbit: 1 } */

Retour et tableau

Généralement, si vous prévoyez de renvoyer un tableau, map()c'est souvent une meilleure option. Il indique au compilateur (et aux autres lisant votre code) que chaque élément du tableau d'origine sera transformé et renvoyé sous la forme d'un nouveau tableau de longueur égale.

D'autre part, reduce()indique que tous les éléments du tableau d'origine seront transformés en une nouvelle valeur. Cette nouvelle valeur peut être un tableau dont la longueur peut être différente de l'original.

Supposons que vous ayez une liste de courses sous la forme d'un tableau de chaînes, mais que vous souhaitiez supprimer tous les aliments que vous n'aimez pas de la liste. Vous pouvez utiliser filter()pour filtrer tout ce que vous n'aimez pas et map()pour renvoyer un nouveau tableau de chaînes, ou vous pouvez simplement utiliser reduce():

const shoppingList = ['apples', 'mangoes', 'onions', 'cereal', 'carrots', 'eggplants']; const foodsIDontLike = ['onions', 'eggplants']; const newShoppingList = shoppingList.reduce((arr, curr) => { if (!foodsIDontLike.includes(curr)) { arr.push(curr); } return arr; }, []); console.log(newShoppingList); // ["apples", "mangoes", "cereal", "carrots"]

C'est tout ce que vous devez savoir sur la reduce()méthode. Comme un couteau suisse, ce n'est pas toujours le meilleur outil pour le travail. Mais vous serez heureux de l'avoir dans votre poche arrière lorsque vous en aurez vraiment besoin.