Heim > Web-Frontend > js-Tutorial > Hauptteil

Grundlegendes zu Array-Iterator-Methoden in JS: Filtern, Zuordnen und Reduzieren

王林
Freigeben: 2024-07-22 21:08:12
Original
879 Leute haben es durchsucht

Understanding Array Iterator Methods in JS: filter, map, and reduce

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)
Nach dem Login kopieren

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]
Nach dem Login kopieren

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)
Nach dem Login kopieren

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]
Nach dem Login kopieren

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)
Nach dem Login kopieren

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
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!