Comprendre Array.reduce()

Introduction

En suivant un cours d'introduction à Javascript et en apprenant toutes les différentes méthodes des Arrays. Je n'ai pas bien compris la réelle puissance de la méthode de réduction et c'est seulement après y être revenu une seconde fois que je me rends compte maintenant de l'utilité réelle de cette méthode. J'espère que l'article pourra expliquer plus clairement à certains le fonctionnement de cette méthode et quand l'utiliser.

La méthode

Array.prototype.reduce(callbackFunction)
Array.prototype.reduce(callbackFunction, initialValue)

A quoi sert exactement cette méthode ?

La méthode réduire() traite chaque élément d'un tableau à l'aide d'une fonction de rappel, accumulant le résultat en une seule valeur. Si une valeur initiale est fournie, elle est utilisée comme point de départ ; sinon, le premier élément du tableau est utilisé et l'itération commence à partir du deuxième élément.

Paramètres de la fonction de rappel

callbackFunction (accumulateur, currentValue, currentIndex, array){}

accumulateur

Le résultat accumulé de l'itération précédente ou la valeur initiale si fournie.

valeur actuelle

La valeur de l'élément de tableau actuel en cours de traitement.

Indice actuel

L'index de l'élément courant, commençant à 0 si une valeur initiale est fournie, sinon 1.

tableau

Le tableau sur lequel la méthode réduire() est exécutée.

Valeur initiale

Lorsque vous utilisez la méthode de réduction sans valeur initiale, la fonction de rappel prendra le premier élément du tableau et l'initialisera comme accumulateur, puis parcourra le reste du tableau.

Cas d'utilisation

L'exemple le plus courant que vous rencontrerez en utilisant la méthode de réduction est la somme d'un tableau.

const ages = [23, 15, 45, 13, 66, 54, 38];
let sumOfAges = ages.reduce(function(sumOfAges, currentAge){
    sumOfAges = sumOfAges + currentAge;
    return sumOfAges;
}); // 254

Bien que oui, c'est exactement pour cela que la méthode de réduction est bonne et efficace, elle peut faire beaucoup plus.

Obtenir l'âge maximum d'un groupe

const ages = [23, 15, 45, 13, 66, 54, 38];
let oldestPerson = ages.reduce(function(maxAge, currentAge){
    if(currentAge>maxAge){
        maxAge = currentAge;
    }
    return maxAge;
}); // 66

Ici, nous utilisons la méthode de réduction pour enregistrer l'âge le plus élevé que nous rencontrons dans le tableau et renvoyons cette valeur une fois itérée dans l'ensemble du tableau.

Supprimer les doublons dans un tableau

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCatalogue = store.reduce(function(uniqueStoreItems, currentItem){
    if(!uniqueStoreItems.includes(currentItem)){
        uniqueStoreItems.push(currentItem);
    }
    return uniqueStoreItems;
}, []); // ['apple', 'pear', 'orange']

Important de noter ici que pour la valeur initiale de la méthode de réduction, nous fournissons un tableau vide, []. Cela signifie que l'accumulateur est désormais un tableau et que notre fonction de rappel repousse uniquement les éléments qui ne sont pas déjà dans ce tableau. En conséquence, nous avons supprimé les doublons.

Obtenir le nombre d'éléments dans un tableau

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCount = store.reduce(function(count, currentItem){
    count[currentItem] = (count[currentItem] || 0) + 1;
    return count;
}, {}); // { apple: 3, pear: 2, orange: 1 }

Important à noter ici est que la valeur initiale est un objet vide. Au fur et à mesure que nous parcourons les articles dans le magasin, nous remplissons l'article avec le nombre.

Conclusion

Tout d’abord, si vous êtes arrivé jusqu’ici, merci pour la lecture ! Mon objectif principal en écrivant cet article était de consolider ma compréhension de la méthode de réduction et j'espère que vous avez peut-être appris quelque chose de nouveau ici aussi ! La méthode de réduction a de nombreuses applications vraiment intéressantes et est vraiment intéressante à utiliser. Avez-vous d'autres cas d'utilisation ou astuces amusantes avec la méthode ? J'adorerais savoir !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!