Maison >interface Web >js tutoriel >Comment appliquer une fonction à chaque clé d'un accumulateur et d'un objet en JavaScript ?

Comment appliquer une fonction à chaque clé d'un accumulateur et d'un objet en JavaScript ?

王林avant: 2023-08-25 17:33:061454parcourir

如何在 JavaScript 中对累加器和对象的每个键应用函数？

En JavaScript, on peut utiliser la méthode réduire() pour appliquer une fonction à l'accumulateur et à chaque touche de l'objet (de gauche à droite). La méthode

reduce() prend un tableau et accepte une fonction de rappel comme premier argument. Voir array réduire() pour plus de détails. Jetons un coup d'œil à la syntaxe de cette méthode.

Syntaxe

array array.reduce(callback[, initialValue]);

Parameters

Callback - Fonction exécutée sur chaque valeur du tableau.

initialValue - L'objet utilisé comme premier paramètre du premier rappel.

Callback Quatre paramètres sont transmis à la fonction

Le premier paramètre est l'accumulateur, qui est le résultat de l'appel précédent de la fonction de rappel, ou la valeur initiale s'il s'agit du premier appel.
Le deuxième paramètre est la clé en cours de traitement.
Le troisième paramètre est la clé en cours de traitement. La valeur en cours de traitement.
Le quatrième paramètre est l'index en cours de traitement.

Ensuite, la méthode réduire() renvoie l'accumulateur.

Application de la méthode réduire()

Regardons un exemple simple pour comprendre comment fonctionne la méthode réduire().

Nous avons un tableau d'objets, chaque objet a un nom et une propriété de valeur. Nous utilisons la méthode réduire() pour additionner les valeurs.

Nous pouvons le faire en passant une fonction de rappel qui reçoit l'accumulateur (le résultat de l'appel de fonction de rappel précédent) et la valeur actuelle à gérer. La fonction de rappel renvoie ensuite l'accumulateur plus la valeur actuelle.

Exemple

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = arr.reduce((acc, cur) => acc + cur.value, 0);
      document.getElementById("result").innerHTML = sum;
   </script>
</body>
</html>

Dans le programme ci-dessus, nous avons un tableau d'objets, chaque objet a un nom et un attribut de valeur. Nous utilisons la méthode réduire() pour additionner les valeurs.

Nous transmettons une fonction de rappel ((acc, cur) => acc + cur.value), qui accepte l'accumulateur acc en cours de traitement (le résultat de l'appel de fonction de rappel précédent) et la valeur actuelle cur. La fonction de rappel renvoie ensuite l'accumulateur plus la valeur actuelle.

Ensuite, la méthode reduce() renvoie l'accumulateur, qui est la somme de toutes les valeurs.

Avantages de l'utilisation de réduire()

L'un des avantages de l'utilisation de réduire() est qu'elle peut rendre votre code plus lisible.

Par exemple, si nous voulons additionner les valeurs du tableau ci-dessus, nous pouvons également utiliser une boucle for.

Exemple

<html>
<head>
   <title>Using for loop</title>
</head>
<body>
   <h2> Using for loop to sum the values of objects in an array</h2>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
         sum += arr[i].value;
      }
      document.getElementById("result").innerHTML = sum
   </script>
</body>
</html>

La méthode reduce() ci-dessus et la boucle for obtiennent toutes deux le même résultat. Cependant, la méthode reduce() est plus concise et plus facile à lire.

Un autre avantage de l'utilisation de reduction() est qu'elle peut être utilisée pour traiter des données en parallèle.

Par exemple, si nous avons un tableau d'objets, chaque objet a un nom et un attribut de valeur, et nous voulons traitez-le en parallèle. Pour chaque objet, nous pouvons utiliser la méthode map().

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let results = arr.map(obj => { // do something with obj });

Cependant, si nous voulons traiter les données de manière séquentielle, nous pouvons utiliser la méthode reduce().

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let result = arr.reduce((acc, obj) => { // do something with obj and return the result }, initialValue);

Conclusion

Dans ce tutoriel, nous avons vu comment appliquer une fonction sur un accumulateur et chaque clé d'un objet en utilisant la méthode réduire(). Nous avons également vu certains avantages de l’utilisation de réduire() par rapport à d’autres méthodes.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Rechercher OR et AND des éléments du tableau à l'aide de JavaScriptArticle suivant：Rechercher OR et AND des éléments du tableau à l'aide de JavaScript

Articles Liés

Voir plus