Heim >Web-Frontend >js-Tutorial >Grundlegendes zu Array-Iterator-Methoden in JS: Filtern, Zuordnen und Reduzieren
JavaScript verfügt über integrierte Iterationsmethoden für die Array-Transformation. Lassen Sie uns filter(), map() und Reduce() und die Bedingungen, unter denen sie verwendet werden sollten, analysieren.
Array.filter()
Es wird ein neues Array mit allen Elementen erstellt, die den von der bereitgestellten Funktion implementierten Test bestehen. Es ruft die bereitgestellte Rückruffunktion einmal für jedes Element in einem Array auf und gibt ein neues Array aller Werte zurück, für die die Rückruffunktion „true“ zurückgibt.
Syntax
filter(callbackFn) filter(callbackFn, thisArg)
Die Auswertung ergibt: Array.filter((element, index, array) => { ... } )
Der CallbackFn ist eine Funktion, die für jedes Element im Array ausgeführt wird und einen wahren Wert zurückgeben sollte, um die Elemente des resultierenden Arrays beizubehalten, andernfalls einen falschen Wert. Die Funktion benötigt drei Argumente: das aktuelle Element, den Index und das Array selbst.
Im folgenden Beispiel wäre bei einem gegebenen Array von Zahlen, von dem erwartet wird, dass es die geraden Zahlen findet, die Methode filter() wie gezeigt von Nutzen:
const numbers = [1, 2, 3, 4, 5, 6]; const evenNumbers = numbers.filter(number => number % 2 === 0); console.log(evenNumbers); // Output: [2, 4, 6]
Array.map()
Die Methode „map()“ erstellt ein neues Array, das mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aktuellen Array gefüllt wird. Die Rückruffunktion wurde nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden, und nicht für leere Slots.
Syntax
map(callbackFn) map(callbackFn, thisArg)
Dies bedeutet einfach: Arrays.map((element, index, array) => { ... })
Der CallbackFn ist eine Funktion, die für jedes Element im Array ausgeführt wird und der Rückgabewert als einzelnes Element im neuen Array hinzugefügt wird.
Die Funktion benötigt drei Argumente: das aktuelle Element, den Index und das Array selbst.
Angesichts einer Reihe von Zahlen, von denen erwartet wird, dass sie deren Quadrate zurückgeben, wäre die Methode „map()“ am effektivsten, wie unten gezeigt:
const numbers = [1, 2, 3, 4, 5]; const squareNumbers = numbers.map(number => number ** 2); console.log(squareNumbers); // Output: [1, 4, 9, 16, 25]
Wir ordnen die Werte eines Arrays einem anderen zu.
Array.reduce()
Die Methode „reduce()“ führt einen Callback-Funktionsreduzierer für jedes Element des Arrays in aufsteigender Indexreihenfolge aus und übergibt den Rückgabewert aus der Berechnung des vorhergehenden Elements. Das Endergebnis der Ausführung des Reduzierers über alle Array-Elemente ist ein einzelner Wert.
Wenn ein Anfangswert angegeben wird, wird dieser als erstes Argument im ersten Aufruf des Rückrufs verwendet. Wenn kein Anfangswert angegeben wird, wird das erste Element des Arrays als Anfangswert verwendet und die Iteration beginnt beim zweiten Element.
Syntax
reduce(callbackFn) reduce(callbackFn, initialValue)
Der CallbackFn ist eine Funktion, die für jedes Element im Array ausgeführt wird. Sein Rückgabewert wird beim nächsten Aufruf des Rückrufs zum Wert des Akkumulatorparameters. Beim letzten Aufruf wird der Rückgabewert zum Rückgabewert der Funktion Reduce().
Es akzeptiert die folgenden Argumente: Akkumulator, aktueller Wert, aktueller Index und das Array, auf das es aufgerufen wurde.
Anhand eines Arrays von Zahlen und der Aufgabe, deren Summe zu ermitteln, würde die Methode „reduce()“ diese leicht wie unten gezeigt auswerten:
const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // Output: 15
Fazit
Diese Methoden filter(), map() und Reduce() sind für die Array-Iteration und -Manipulation unerlässlich.
filter() wird am besten verwendet, um alle Elemente in einem bestimmten Array zu finden, die die Kriterien der Rückruffunktion erfüllen.
map() ist eine zerstörungsfreie Array-Methode, die sich am besten dazu eignet, Daten in einem bestimmten Array zu manipulieren und einen Rückgabewert zu erwarten.
reduce() ist nützlich, um Array-Elemente basierend auf einer Reduzierfunktion zu einem einzigen Wert zusammenzufassen.
Referenzen
MDN-Webdokumente zu Array.prototype.filter
MDN-Webdokumente auf Array.prototype.map
MDN-Webdokumente zu Array.prototype.reduce
Das obige ist der detaillierte Inhalt vonGrundlegendes zu Array-Iterator-Methoden in JS: Filtern, Zuordnen und Reduzieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!