Comment utiliser la fonction réduisez le tableau JavaScript
Dans cet article, nous saisirons le concept du javascript réduire() fonction. Qu'est-ce qu'un réduire() fonction, et comment pouvons-nous l'utiliser pour aider à simplifier le code JavaScript et à effectuer les tâches efficacement et le plus rapidement.
Quelle est la réduction() fonction?
Javascript réduire() La fonction du tableau est utilisée pour réduire le tableau en une seule valeur de sortie.
Le réduire() La fonction prend l'élément d'un tableau un par un, effectue une opération et renvoie une seule valeur de sortie. Explorons et y approfondissons plus pour comprendre la syntaxe et ses fonctionnalités, ainsi que quelques exemples.
Syntaxe:
déployer.réduire (function_name, initialValue);La partie intéressante de la fonction réduction () du tableau est qu'elle peut prendre une fonction de rappel avec quatre arguments. La syntaxe de la fonction de rappel et la séquence des arguments se déroulent comme ceci:
fonction function_name (accumulateur, valeur, index, array)…
Dans la fonction de rappel de réduire () méthode:
- Le premier paramètre est un accumulateur qui stocke le résultat après chaque itération.
- Le deuxième paramètre / argument contient le valeur de l'élément de tableau actuel pendant l'itération.
- Le troisième paramètre est le paramètre facultatif qui est le courant indice de l'élément de tableau pendant l'itération.
- Enfin, nous pouvons également passer le déployer lui-même à la fonction de rappel pour avoir des fonctionnalités personnalisées à l'intérieur de la fonction de rappel.
Nous pouvons également transmettre la valeur initiale à la fonction. La valeur initiale sera la valeur de départ de l'accumulateur.
Essayons quelques exemples pour voir ses implémentations
Note: Nous utiliserons la console du navigateur pour démontrer des exemples effectués dans ce post. Pour ouvrir la console du navigateur:
- Utilisez le F12 Clé dans Chrome et autres navigateurs à base de chrome.
- Utiliser Ctrl + shift + k Clés de raccourci clavier pour Mozilla.
- Utiliser Option + ⌘ + C Clés de raccourci clavier dans Safari (si le menu du développeur n'apparaît pas, alors ouvrez les préférences en appuyant sur ⌘ +, et en Avancé chèque d'onglet "Afficher le menu de développement dans la barre de menus").
Comment utiliser la fonction rétecte () en javascript
Le meilleur exemple pour comprendre le réduire() La fonction est l'ajout de nombres stockés dans les éléments du tableau.
Exemple 1:
Supposons que nous ayons un tableau de nombres et que nous voulons ajouter tous ces nombres:
nombres VAR = [23,76,38,55,10]La première façon d'ajouter ces numéros est d'utiliser un pour boucle:
var sum = 0;pour (leti = 0; i
console.log (sum);
Bien que nous ayons obtenu la somme comme sortie, pourquoi ne pas utiliser un moyen intelligent et facile d'effectuer le même calcul en utilisant le réduire() Méthode du tableau, où nous n'avons pas à muter les variables comme «somme."
Utilisation de la fonction Reduce ():
Le réduire() La fonction pour calculer la somme ira comme ceci:
var sum = nombres.réduire (addnumbers, 0);fonction addnumbers (total, num)
retour total + num
console.log (sum);
Dans le code ci-dessus, vous pouvez voir que nous avons d'abord passé le nombres fonction au réduire() fonction, et dans le nombres Définition de la fonction, nous venons d'ajouter chaque numéro à la variable d'accumulateur total et a renvoyé sa valeur.
Une fois la réduire() La fonction ajoute tous les nombres dans le Nombres tableau, il stockera le résultat final dans le somme variable.
Enfin, nous venons de consoler le somme variable pour vérifier si notre réduire() La fonction a bien fonctionné ou non.
En regardant dans la capture d'écran fournie ci-dessus, vous pouvez vérifier que la fonction réduction () a ajouté tous les nombres et a montré le résultat dans la console, qui est 202 et parfaitement calculé.
Un autre moyen plus court et plus facile d'écrire réduire() La fonction consiste à faire de la fonction de rappel une fonction flèche:
La syntaxe de l'écriture de la fonction de rappel dans le réduire() Les parenthèses de la fonction seront comme ceci:
var sum = nombres.réduire ((total, num) =>retour total + num
, 0);
console.log (sum);
Très bien, c'était le simple exemple dans lequel nous avons un tableau de nombres uniquement; Qu'en est-il de la table d'objets. Essayons aussi celui-là.
Exemple 2:
Supposons que nous ayons une liste d'étudiants dans un tableau, et nous voulons calculer le total des frais de tous les étudiants:
var étudiants = [ID: 1,
Nom: "John,"
Âge: 12,
Frais: 8500
,
ID: 2,
Nom: "Bob",
Âge: 14,
Frais: 9000
,
ID: 3,
Nom: "Steve",
Âge: 10,
Frais: 8000
,
]]
Le réduire() Fonction pour calculer le total des frais ira comme ceci:
var totalfees = étudiants.réduire ((total, étudiant) =>Retour total + étudiant.frais
, 0);
console.Log (TotalFees);
Maintenant, la seule différence dans ce code est qu'un seul objet est passé comme valeur à la fonction de rappel, et à l'intérieur de la définition de la fonction de rappel, nous avons accédé aux frais et l'avons ajouté dans la variable accumulateur.
En regardant la capture d'écran ci-dessus, vous pouvez voir que les frais des étudiants sont ajoutés et affichés en sortie. C'est donc ainsi que nous pouvons accéder aux objets d'un tableau dans le réduire() fonction.
Conclusion:
Dans cet article, nous avons appris ce qu'un réduire() La fonction est et comment nous pouvons l'utiliser pour aider à simplifier le code JavaScript et à terminer les tâches efficacement et rapidement.
Nous avons appris que le réduire() La fonction réduit le tableau en une seule valeur de sortie. Le réduire() La fonction prend une fonction de rappel appliquée à chaque élément du tableau et renvoie une seule valeur de sortie.
Ce message est tout au sujet de JavaScript réduire() fonction et son utilisation. Il contient quelques exemples de base qui aident à comprendre le réduire() fonction.