Maison >interface Web >js tutoriel >Comment utiliser la méthode Array.prototype.reduce() en JavaScript ?

Comment utiliser la méthode Array.prototype.reduce() en JavaScript ?

PHPzavant: 2023-09-11 22:53:021499parcourir

La méthode

如何在 JavaScript 中使用 Array.prototype.reduce() 方法？

array.reduce() est utilisée pour réduire l'ensemble du tableau à une seule valeur en effectuant certaines tâches sur chaque élément. Par exemple, lorsque nous voulons obtenir la somme de tous les éléments d’un tableau, nous devons réduire l’ensemble du tableau à une seule valeur, qui est la somme finale de tous les éléments du tableau.

La méthode

array.reduce() garde une trace de la valeur du résultat de l'élément précédent. Après cela, il exécute la tâche sur l'élément suivant en utilisant la valeur résultante obtenue de l'élément précédent. Le premier élément du tableau prend en compte la valeur initiale passée en argument à la valeur résultat. Dans ce tutoriel, nous apprendrons à utiliser la méthode Array.prototype.reduce() de JavaScript.

Grammaire

Les utilisateurs peuvent utiliser la méthode array.reduce() selon la syntaxe suivante.

array.reduce((previousResult, element, index, array) => {
   // perform a task
}, startingValue);

Nous avons passé la fonction flèche comme première valeur de paramètre dans la syntaxe ci-dessus. Les fonctions fléchées sont utilisées comme fonctions de rappel en ligne.

array.reduce(callback, startingValue);

Dans la syntaxe ci-dessus, le rappel est une fonction de rappel.

Paramètres

previousResult - Il s'agit de la valeur du résultat que nous avons obtenue en effectuant une opération sur l'élément précédent du tableau.
element - C'est l'élément en position d'index dans le tableau.
Index - C'est l'index actuel de l'élément du tableau.
Array - C'est lui-même un tableau utilisé dans la fonction de rappel.
startingValue - Il s'agit de la valeur initiale pour initialiser la variable previousResult.
callback - Il s'agit d'une fonction qui appelle chaque élément du tableau.

Valeur de retour

La méthode

array.reduce() renvoie la valeur du résultat final après avoir effectué certaines tâches sur tous les éléments du tableau.

Exemple 1

Dans l'exemple ci-dessous, nous avons créé un tableau de nombres et l'avons initialisé avec quelques valeurs numériques. Après cela, nous utilisons la méthode array.reduce() pour trouver le produit de tous les nombres.

De plus, nous utilisons également une fonction de rappel en ligne comme premier paramètre de la méthode réduire(). Dans la fonction de rappel, nous multiplions la valeur de la variable previousResult par élément et la renvoyons.

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method to find a factorial of a number in JavaScript.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      let factorial = numbers.reduce((previousResult, element) => {
         return previousResult = element * previousResult;
      }, 1)
      output.innerHTML += "The factorial of 10 is " + factorial;
   </script>
</body>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous utilisons la méthode array.reduce() pour concaténer toutes les chaînes du tableau en une seule chaîne. Nous utilisons l'opérateur "+" pour fusionner l'élément de chaîne actuel avec le résultat précédent dans la fonction de rappel.

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method to merge all strings of the array in JavaScript.</h2>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');  
      let strings = ["Welcome", "To", "the", "TutorialsPoint", "blogs", "!"];
         
      function callback(previousResult, stringElement) {   
         return previousResult + " " + stringElement;  
      }  
      let message = strings.reduce(callback, "");
         
      output.innerHTML += "The Message created from the array of the string values is " + message;
   </script>
</body>
</html>

Exemple 3

Dans l'exemple ci-dessous, nous trouvons la somme des valeurs d'index des éléments. Les utilisateurs peuvent voir comment nous utilisons l'indexation des tableaux dans la fonction de rappel.

<html>
<body>
   <h2>Using the <i>array.reduce()</i> method.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let numersArray = [20, 30, 40, 50, 60, 70, 80, 90, 100];

      let finalValue = numersArray.reduce((previousResult, element, index, array) => {
         return previousResult + element - index;
      }, 0);
      output.innerHTML += "The resultant value after performing operations on array element is " + finalValue;
   </script>
</body>
</html>

Exemple 4

Dans cet exemple, nous créons un tableau d'objets. Chaque objet de ce tableau contient emp_id, emp_name et salaire. Nous avons utilisé la méthode réduire() pour obtenir le salaire total de tous les employés. Dans la fonction de rappel de la méthode réduire(), nous accédons à chaque objet et ajoutons la valeur de son attribut de salaire à la variable total. Enfin, le salaire total de tous les salariés est restitué.

<html>
<body>
   <h2>Using the <i> array.reduce() </i> method.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let arrayOfObjects = [
         { emp_id: "10", emp_name: "Shubham", salary: 10000 },
         { emp_id: "20", emp_name: "Akshay", salary: 20000 },
         { emp_id: "dfd0", emp_name: "John", salary: 20000 },
         { emp_id: "10", emp_name: "Mukund", salary: 50000 },
         { emp_id: "10", emp_name: "salman", salary: 5000 }
      ]
      let totalSalary = arrayOfObjects.reduce((total, object, index, array) => {
         return total + object.salary;
      }, 0);
      output.innerHTML += "The total salary of all employees is " + totalSalary;
   </script>
</body>
</html>

Les utilisateurs ont appris à utiliser la méthode Array.prototype.reduce() pour convertir un tableau entier en une seule valeur de tableau. Nous avons vu les cas d’utilisation de la méthode réduire() à travers différents exemples. De plus, nous pouvons utiliser la méthode array.reduce() pour trouver les valeurs minimales et maximales d'un tableau.

Lorsque nous appelons la méthode array.reduce() avec un tableau vide comme référence, elle renvoie une erreur.

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!

JavaScript Array 运算符回调函数字符串值传递对象 prototype

Déclaration：

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

Article précédent：Trouver des nombres déroutants dans un tableau en JavaScriptArticle suivant：Trouver des nombres déroutants dans un tableau en JavaScript

Articles Liés

Voir plus