Heim > Artikel > Web-Frontend > Wie verwende ich die Methode Array.prototype.reduce() in JavaScript?

Wie verwende ich die Methode Array.prototype.reduce() in JavaScript?

PHPznach vorne: 2023-09-11 22:53:021434Durchsuche

Die Methode

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

array.reduce() wird verwendet, um das gesamte Array auf einen einzigen Wert zu reduzieren, indem für jedes Element einige Aufgaben ausgeführt werden. Wenn wir beispielsweise die Summe aller Elemente eines Arrays erhalten möchten, müssen wir das gesamte Array auf einen einzigen Wert reduzieren, der die endgültige Summe aller Elemente des Arrays ist.

Die Methode

array.reduce() verfolgt den Ergebniswert des vorherigen Elements. Danach führt es die Aufgabe für das nächste Element aus und verwendet dabei den resultierenden Wert, den wir vom vorherigen Element erhalten haben. Das erste Element des Arrays berücksichtigt den als Argument für den Ergebniswert übergebenen Anfangswert. In diesem Tutorial lernen wir, die Array.prototype.reduce()-Methode von JavaScript zu verwenden.

Grammatik

Benutzer können die Methode array.reduce() gemäß der folgenden Syntax verwenden.

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

Wir haben die Pfeilfunktion als ersten Parameterwert in der obigen Syntax übergeben. Pfeilfunktionen werden als Inline-Callback-Funktionen verwendet.

array.reduce(callback, startingValue);

In der obigen Syntax ist Callback eine Callback-Funktion.

Parameter

previousResult – Dies ist der Ergebniswert, den wir durch die Ausführung einer Operation am vorherigen Array-Element erhalten haben.
element – Es ist das Element an der Indexposition im Array.
Index – Dies ist der aktuelle Index des Array-Elements.
Array – Es ist selbst ein Array, das in der Rückruffunktion verwendet wird.
startingValue – Dies ist der Anfangswert zum Initialisieren der previousResult-Variable.
callback – Dies ist eine Funktion, die jedes Element im Array aufruft.

Rückgabewert

Die Methode

array.reduce() gibt den endgültigen Ergebniswert zurück, nachdem bestimmte Aufgaben für alle Array-Elemente ausgeführt wurden.

Beispiel 1

Im folgenden Beispiel haben wir ein Zahlenarray erstellt und es mit einigen numerischen Werten initialisiert. Danach verwenden wir die Methode array.reduce(), um das Produkt aller Zahlen zu ermitteln.

Darüber hinaus verwenden wir auch eine Inline-Callback-Funktion als ersten Parameter der Methode Reduce(). In der Callback-Funktion multiplizieren wir den Wert der Variable previousResult elementweise und geben ihn zurück.

<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>

Beispiel 2

Im folgenden Beispiel verwenden wir die Methode array.reduce(), um alle Array-Strings zu einem String zu verketten. Wir verwenden den „+“-Operator, um das aktuelle String-Element mit dem vorherigen Ergebnis in der Callback-Funktion zusammenzuführen.

<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>

Beispiel 3

Im folgenden Beispiel ermitteln wir die Summe der Elementindexwerte. Benutzer können sehen, wie wir die Array-Indizierung in der Rückruffunktion verwenden.

<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>

Beispiel 4

In diesem Beispiel erstellen wir ein Array von Objekten. Jedes Objekt dieses Arrays enthält emp_id, emp_name und Gehalt. Wir haben die Methode Reduce() verwendet, um das Gesamtgehalt aller Mitarbeiter zu ermitteln. In der Callback-Funktion der Methode Reduce() greifen wir auf jedes Objekt zu und addieren den Wert seines Gehaltsattributs zur Gesamtvariablen. Abschließend wird das Gesamtgehalt aller Mitarbeiter zurückerstattet.

<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>

Benutzer haben gelernt, die Methode Array.prototype.reduce() zu verwenden, um ein gesamtes Array in einen einzelnen Array-Wert umzuwandeln. Wir haben die Anwendungsfälle der Methode Reduce() anhand verschiedener Beispiele gesehen. Darüber hinaus können wir die Methode array.reduce() verwenden, um die minimalen und maximalen Werte aus einem Array zu ermitteln.

Wenn wir die Methode array.reduce() mit einem leeren Array als Referenz aufrufen, gibt sie einen Fehler zurück.

Das obige ist der detaillierte Inhalt vonWie verwende ich die Methode Array.prototype.reduce() in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Finden Sie verwirrende Zahlen in einem Array in JavaScriptNächster Artikel：Finden Sie verwirrende Zahlen in einem Array in JavaScript

In Verbindung stehende Artikel

Mehr sehen