Als ich herausfand, wie man die JS-Array-Methoden
.map() ,
.filter() und
.reduce() , schien alles, was ich las, ansah und
.reduce() , sehr kompliziert. Diese Konzepte wurden als eigenständige Mechanismen angesehen, die mit nichts anderem zu tun haben. Es fiel mir schwer, ihr Wesen zu erfassen und zu verstehen.
Ich habe gehört, dass dies grundlegende Dinge sind, deren Verständnis so etwas wie die Grenze zwischen "Eingeweihten" und "Uneingeweihten" ist. Ich möchte dann die Wahrheit über sie erfahren. Es besteht darin, dass diese drei Methoden die Tatsache symbolisieren, dass die Gründe für das Aussortieren einiger iterativer Objekte häufig in eine von drei Funktionskategorien passen.
Durch den Code, den ich zuvor geschrieben habe, habe ich festgestellt, dass ich in 95% der Fälle, in denen ich die Elemente von Zeichenfolgen oder Arrays durchlaufen habe, einen der folgenden Schritte ausgeführt habe:
- Anwenden einer bestimmten Folge von Anweisungen auf jeden Wert (analog zur
.map() -Methode). - Filtern von Werten, die einem bestimmten Kriterium entsprechen (wie bei
.filter() ). - Reduktion eines Datensatzes auf einen einzigen aggregierten Wert (analog zu
.reduce() ).
Es war ein Moment der Wahrheit. Damals verstand ich die Essenz dieser Methoden und erkannte ihren Zusammenhang mit dem, was ich seit langem kenne.
Zum Üben nahm ich meinen alten Code und überarbeitete ihn mit diesen Methoden. Dies stellte sich als sehr nützlich heraus.
Lassen Sie uns nun, ohne weitere Umstände, über diese Methoden sprechen und insbesondere untersuchen, wie sie anstelle der weit verbreiteten Schemata für die Verwendung von Schleifen verwendet werden.
.Map () -Methode
Die
.map() -Methode wird verwendet, wenn Sie Folgendes
.map() müssen:
- Für jedes Element des iterierbaren Objekts muss eine bestimmte Abfolge von Aktionen ausgeführt werden.
- Es ist erforderlich, den Wert zurückzugeben, der vermutlich geändert wurde.
Stellen Sie sich ein einfaches Beispiel vor, in dem Sie für jedes Element eines Arrays, das Preise enthält, neue Beträge suchen müssen, die die ursprünglichen Preise und die Umsatzsteuer enthalten:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = []; for(let i=0; i < prices.length; i++) { new_prices.push(prices[i] * 1.06); }
So machen Sie dasselbe mit
.map() :
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map(price => price * 1.06);
Es werden ziemlich prägnante syntaktische Konstruktionen verwendet. Schauen wir uns also dieses Beispiel an. Die
.map() -Methode akzeptiert einen Rückruf. Dies ist die Funktion, die auf die Elemente des Arrays angewendet wird. In diesem Fall handelt es sich um eine Pfeilfunktion, die direkt in Klammern nach der Deklaration der Methode deklariert wird.
Der Name des Preisparameters ist der Name, der beim Arbeiten mit Array-Elementen verwendet wird. Da unsere Pfeilfunktion nur einen Parameter hat, können wir bei der Deklaration auf Klammern verzichten.
Der Ausdruck nach dem Pfeil (
=> ) ist der Hauptteil des Rückrufs. Da der Funktionskörper nur einen Ausdruck enthält, können wir auf geschweifte Klammern und das Schlüsselwort
return .
Wenn Sie diesen Eintrag nicht verstehen, finden Sie hier eine etwas erweiterte Version dieses Beispiels:
const prices = [19.99, 4.95, 25, 3.50]; let new_prices = prices.map((price) => { return price * 1.06 });
.Filter () Methode
Die Methode
.filter() wird in Fällen verwendet, in denen einige Elemente aus dem iterierbaren Objekt ausgewählt werden müssen. Wenn Sie diese Methode verwenden, müssen Sie berücksichtigen, dass die dem Filter entsprechenden Werte im Endergebnis enthalten und nicht davon ausgeschlossen sind. Das heißt - alles, für das die übergebene Funktion
.filter() true .filter() , bleibt übrig.
Stellen Sie sich ein Beispiel vor, in dem nur ungerade Elemente aus einem Array von Ganzzahlen ausgewählt werden sollen. Hier verwenden wir den Operator, um den Rest der Division zu nehmen und herauszufinden, ob es einen Rest gibt, der jedes Element des Arrays durch 2 teilt. Wenn der Rest 1 ist, sagt dies uns, dass die entsprechende Zahl ungerade ist. Schauen wir uns zunächst einen Weg an, um dieses Problem mit einer regulären Schleife zu lösen:
const numbers = [1,2,3,4,5,6,7,8]; let odds = []; for(let i=0; i < numbers.length; i++) { if(numbers[i] % 2 == 1) { odds.push(numbers[i]); } }
Die Methode
.map() akzeptiert wie
.map() einen Rückruf, an den wiederum Elemente des iterierten Objekts übergeben werden:
const numbers = [1,2,3,4,5,6,7,8]; let odds = numbers.filter(num => num % 2);
Hier ist die Arbeit wie im Beispiel mit
.map() . Die an
.filter() übergebene
.filter() verwendet nur einen Parameter, daher verzichten wir auf
.filter() Klammern. Ihr Körper enthält nur einen Ausdruck, daher kann er in geschweiften Klammern weggelassen werden und es ist akzeptabel, auf eine
return .
.Reduce () Methode
Und jetzt sind wir endlich bei der
.reduce() -Methode
.reduce() . Er ist meines Erachtens die unverständlichste der drei heute in Betracht gezogenen Methoden. Der Name dieser Methode weist darauf hin, dass damit mehrere Werte auf einen reduziert werden. Es scheint mir jedoch einfacher, es als eine Methode zu betrachten, mit der Sie bestimmte Werte aus Teilen erfassen können, und nicht als eine Methode, mit der Sie etwas „kollabieren“ oder „reduzieren“ können.
Bei der Erstellung des Codes, in dem diese Methode aufgerufen wird, wird zunächst ein bestimmter Anfangswert festgelegt. Wenn die Methode die Werte des Arrays durchläuft, wird dieser Anfangswert geändert und in geänderter Form an die nächste Iteration übergeben.
Hier ist ein klassisches Problem, das Sie lösen müssen, um die Summe der Elemente des Arrays zu berechnen. In unserem Fall besteht es darin, die Höhe der Spenden für ein bestimmtes Wohltätigkeitsprojekt zu ermitteln:
const donations = [5, 20, 100, 80, 75]; let total = 0; for(let i=0; i < donations.length; i++) { total += donations[i]; }
Im Gegensatz zu den
.map() und
.filter() benötigt die Methode
.reduce() einen Rückruf mit zwei Parametern. Dies ist der Batterie- und Stromwert. Batterie ist der erste Parameter. Er ist es, der bei jeder Iteration geändert und an Folgendes übergeben wird:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; });
.reduce() können der
.reduce() auch ein zweites Argument
.reduce() . Dies ist es, was die Rolle des Anfangswerts für die Batterie spielt. Angenommen, wir möchten den Gesamtbetrag der Spenden in zwei Tagen ermitteln, da dieser Betrag gestern 450 US-Dollar betrug und Informationen zu den heutigen Spenden in einem Array gespeichert sind:
const donations = [5, 20, 100, 80, 75]; let total = donations.reduce((total,donation) => { return total + donation; }, 450);
Zusammenfassung
Hoffentlich haben Sie jetzt die
.filter() Array-Methoden
.map() ,
.filter() und
.reduce() . Stellen Sie sich diese als Mechanismen vor, die die Lesbarkeit Ihres Codes verbessern. Mit ihnen können Sie kompaktere Programme schreiben als mit herkömmlichen Loops. Ihre Hauptstärke besteht jedoch darin, dass Sie die Absicht, die dem Code zugrunde liegt, klar ausdrücken können.
Dank dieser Methoden ist Code, der seit geraumer Zeit geschrieben wurde, leichter zu lesen. Anstatt sich mit den Konstruktionen zu befassen, die in den
for Schleifen abgelegt sind, können Sie, wenn Sie den Namen einer dieser Methoden gesehen haben, bereits eine allgemeine Vorstellung von den Gründen für die Existenz eines bestimmten Codeteils gewinnen.
Sehr geehrte Leser! Verwenden Sie die JS-Arraymethoden .map (), .filter () und .reduce ()?
