Verwendung von Karten, Filtern und Reduzieren in JavaScript

Funktionale Programmierung hat heutzutage in der Entwicklungswelt für Furore gesorgt. Und das aus gutem Grund: Funktionale Techniken können Ihnen dabei helfen, deklarativeren Code zu schreiben, der auf einen Blick leichter zu verstehen, zu überarbeiten und zu testen ist. 

Einer der Eckpfeiler der funktionalen Programmierung ist die spezielle Verwendung von Listen und Listenoperationen. Und diese Dinge sind genau das, was der Klang wie sie sind: Arrays von Dingen und das, was man ihnen antut. Die funktionale Denkweise behandelt sie jedoch etwas anders als Sie vielleicht erwarten.

In diesem Artikel wird näher darauf eingegangen, was ich als "große Drei" -Listenoperationen bezeichnen möchte: Karte, Filter, und reduzieren. Diese drei Funktionen mit dem Kopf zu umwickeln, ist ein wichtiger Schritt, um sauberen Funktionscode schreiben zu können, und öffnet die Türen zu den äußerst mächtigen Techniken der funktionalen und reaktiven Programmierung.

Es bedeutet auch, dass Sie nie ein schreiben müssen zum wieder Schleife.

Neugierig? Lass uns eintauchen.

Eine Karte von Liste zu Liste

Oft müssen wir ein Array nehmen und jedes Element auf dieselbe Weise modifizieren. Typische Beispiele hierfür sind das Quadrieren aller Elemente in einem Zahlenarray, das Abrufen des Namens aus einer Benutzerliste oder das Ausführen einer regulären Ausdrücke gegen ein Array von Zeichenfolgen.

Karte ist eine Methode, die genau das tut. Es ist am definiert Array.prototyp, Sie können es also in einem beliebigen Array aufrufen, und es akzeptiert einen Rückruf als erstes Argument. 

Wenn du anrufst Karte In einem Array führt es diesen Rückruf für jedes Element in diesem Array aus und gibt a zurück Neu Array mit allen Werten, die der Rückruf zurückgegeben hat.

Unter der Haube, Karte Übergibt drei Argumente an Ihren Rückruf:

  1. Das aktueller Gegenstand im Array
  2. Das Array-Index des aktuellen Artikels
  3. Das gesamtes Array du hast map angerufen 

Schauen wir uns Code an.

Karte in der Praxis

Nehmen wir an, wir haben eine App, die eine Reihe von Aufgaben für den Tag verwaltet. Jeder Aufgabe ist ein Objekt mit jeweils einem Name und Dauer Eigentum:

// Dauer in Minuten var Aufgaben = ['name': 'Für Envato Tuts schreiben +', 'duration': 120, 'name': 'Workout', 'duration': 60, 'name' : 'Verschleppung von Duolingo', 'Dauer': 240];

Nehmen wir an, wir möchten ein neues Array mit dem Namen jeder Aufgabe erstellen, damit wir uns alles ansehen können, was wir heute erledigt haben. Verwendung einer zum Schleife, würden wir so etwas schreiben:

var task_names = []; für (var i = 0, max = Aufgaben.Länge; i < max; i += 1)  task_names.push(tasks[i].name); 

JavaScript bietet auch eine für jeden Schleife. Es funktioniert wie ein zum loop, verwaltet jedoch die Unordnung, den Loop-Index mit der Array-Länge zu vergleichen:

var task_names = []; task.forEach (function (task) task_names.push (task.name););

Verwenden Karte, wir können schreiben:

var task_names = task.map (Funktion (Task, Index, Array) return task.name;);

Ich schließe das ein Index und  Array Parameter, die Sie daran erinnern, dass sie da sind, wenn Sie sie brauchen. Da ich sie hier nicht verwendet habe, könnte man sie weglassen und der Code würde gut laufen.

Es gibt einige wichtige Unterschiede zwischen den beiden Ansätzen:

  1. Verwenden Karte, Sie müssen nicht den Zustand der verwalten zum Schleife dich.
  2. Sie können das Element direkt bearbeiten, anstatt in das Array zu indizieren.
  3. Sie müssen kein neues Array erstellen und drücken hinein. Karte Das fertige Produkt wird in einem Durchlauf zurückgegeben, sodass wir den Rückgabewert einfach einer neuen Variablen zuweisen können.
  4. Sie tun muss daran denken, eine Rückkehr Anweisung in Ihrem Rückruf. Wenn Sie dies nicht tun, wird ein neues Array mit gefüllt nicht definiert

Stellt sich heraus, alles Die Funktionen, die wir heute betrachten werden, teilen diese Eigenschaften.

Die Tatsache, dass wir den Status der Schleife nicht manuell verwalten müssen, macht unseren Code einfacher und wartungsfreundlicher. Die Tatsache, dass wir direkt mit dem Element arbeiten können, anstatt in das Array zu indexieren, macht die Dinge lesbarer. 

Verwendung einer für jeden loop löst beide Probleme für uns. Aber Karte hat noch mindestens zwei entscheidende Vorteile:

  1. für jeden kehrt zurück nicht definiert, Es verkettet sich also nicht mit anderen Array-Methoden. Karte gibt ein Array zurück, also du können verketten Sie es mit anderen Array-Methoden.
  2. Karte kehrt zurückein Array mit dem fertigen Produkt, anstatt ein Array innerhalb der Schleife zu mutieren. 

Die Anzahl der Stellen, an denen Sie den Status auf ein absolutes Minimum ändern, ist ein wichtiger Grundsatz der funktionalen Programmierung. Es sorgt für sichereren und verständlicheren Code.

Es ist jetzt auch ein guter Zeitpunkt, um darauf hinzuweisen, dass Sie, wenn Sie sich in Node befinden, diese Beispiele in der Firefox-Browserkonsole testen oder Babel oder Traceur verwenden, dies mit den ES6-Pfeilfunktionen genauer schreiben können:

var task_names = task.map ((task) => task.name);

Pfeilfunktionen lassen uns das weglassen Rückkehr Stichwort in Einzeilen. 

Viel lesbarer geht es nicht.

Gotchas

Der Rückruf, den Sie übergeben Karte muss explizit sein Rückkehr Aussage oder Karte wird ein Array voll ausspucken nicht definiert. Es ist nicht schwer sich daran zu erinnern, eine Rückkehr Wert, aber es ist nicht schwer zu vergessen. 

Wenn du tun vergessen, Karte werde mich nicht beschweren Stattdessen wird ein Array mit nichts zurückgegeben. Solche stillen Fehler können überraschend schwer zu debuggen sein. 

Zum Glück ist das das nur gotcha mit Karte. Aber es ist eine übliche Fallstricke, die ich hervorheben muss: Stellen Sie immer sicher, dass Ihr Rückruf ein Rückkehr Aussage!

Implementierung

Das Lesen von Implementierungen ist ein wichtiger Teil des Verständnisses. Schreiben wir also unser eigenes Leichtgewicht Karte um besser zu verstehen, was unter der Haube los ist. Wenn Sie eine Implementierung in Produktionsqualität sehen möchten, schauen Sie sich die Polyfill von Mozilla im MDN an.

var map = Funktion (Array, Callback) var new_array = []; array.forEach (Funktion (Element, Index, Array) new_array.push (callback (element));); return new_array; ; var task_names = map (Aufgaben, Funktion (Aufgabe) return task.name;);

Dieser Code akzeptiert ein Array und eine Rückruffunktion als Argumente. Dann wird ein neues Array erstellt. führt den Rückruf für jedes Element des Arrays aus, in dem wir übergeben wurden. schiebt die Ergebnisse in das neue Array; und gibt das neue Array zurück. Wenn Sie dies in Ihrer Konsole ausführen, erhalten Sie dasselbe Ergebnis wie zuvor. Stellen Sie einfach sicher, dass Sie initialisieren Aufgaben bevor du es testest!

Während wir eine for-Schleife unter der Haube verwenden, blendet das Einhüllen in eine Funktion die Details ein und lässt uns stattdessen mit der Abstraktion arbeiten. 

Das macht unseren Code deklarativer, heißt es Was zu tun, nicht Wie es zu tun. Sie werden zu schätzen wissen, wie viel lesbarer, wartbarer und ähm, debuggbar Dies kann Ihren Code machen.

Das Geräusch herausfiltern

Der nächste unserer Array-Operationen ist Filter. Es macht genau das, was es klingt: Es braucht ein Array und filtert unerwünschte Elemente heraus.

Mögen Karte, Filter ist definiert am Array.prototyp. Es ist für jedes Array verfügbar, und Sie übergeben einen Callback als erstes Argument. Filter führt diesen Rückruf für jedes Element des Arrays aus und spuckt ein aus Neu Array enthält nur die Elemente, für die der Rückruf zurückgegeben wurde wahr.

Auch gerne Karte, Filter Ihr Rückruf übergibt drei Argumente:

  1. Das aktueller Gegenstand 
  2. Das aktueller Index
  3. Das Array du hast angerufen Filter auf

Filter in der Praxis

Lassen Sie uns unser Aufgabenbeispiel erneut betrachten. Anstatt die Namen der einzelnen Aufgaben herauszuholen, möchte ich eine Liste mit den Aufgaben erhalten, für die ich zwei Stunden oder mehr Zeit hatte. 

Verwenden für jeden, wir würden schreiben:

var schwierige_aufgaben = []; task.forEach (function (task) if (task.duration> = 120) difficult_tasks.push (task);;

Mit Filter:

var schwierige_aufgaben = aufgaben.filter (funktion (aufgabe) return task.duration> = 120;); // Verwendung von ES6 var schwierigen_tasks = task.filter ((task) => task.duration> = 120);

Hier habe ich vorgegangen und das weggelassen Index und Array Argumente zu unserem Rückruf, da wir sie nicht verwenden.

So wie Karte, Filter Lass uns:

  • Vermeiden Sie die Veränderung eines Arrays innerhalb von a für jeden oder zum Schleife
  • Weisen Sie das Ergebnis direkt einer neuen Variablen zu, anstatt in ein Array zu gelangen, das wir an anderer Stelle definiert haben

Gotchas

Der Rückruf, den Sie übergeben Karte muss eine return-Anweisung enthalten, wenn sie ordnungsgemäß funktionieren soll. Mit Filter, Sie müssen auch eine Rückgabeanweisung angeben, und Sie Muss Stellen Sie sicher, dass ein boolescher Wert zurückgegeben wird.

Wenn Sie Ihre Rückgabeanweisung vergessen, wird Ihr Rückruf zurückgegeben nicht definiert, welche Filter wird hilflos zu zwingen falsch. Anstatt einen Fehler auszulösen, wird ein leeres Array zurückgegeben! 

Wenn Sie die andere Route gehen und etwas zurückgeben, ist das so ist nicht explizit wahr oder falsch, dann Filter wird versuchen herauszufinden, was Sie mit den Zwangsregeln von JavaScript gemeint haben. Meistens ist dies ein Fehler. Und genau so, als wenn Sie Ihre Rückgabe-Erklärung vergessen, wird es eine stille sein. 

Immer Stellen Sie sicher, dass Ihre Rückrufe eine explizite Rückgabeanweisung enthalten. Und immer Stellen Sie sicher, dass Ihre Rückrufe in Filter Rückkehr wahr oder falsch. Ihre Vernunft wird es Ihnen danken.

Implementierung

Wieder ist der beste Weg, um ein Stück Code zu verstehen,… nun, es zu schreiben. Lassen Sie uns unser eigenes Leichtgewicht rollen Filter. Die guten Leute von Mozilla haben auch eine Polyfill für industrielle Zwecke, die Sie lesen können.

var filter = Funktion (Array, Callback) var gefiltertes_array = []; array.forEach (Funktion (Element, Index, Array) if (Rückruf (Element, Index, Array)) gefiltertes_array.push (Element);); return gefiltertes Array; ;

Arrays reduzieren

Karte erstellt ein neues Array, indem jedes Element in einem Array einzeln transformiert wird. Filter erstellt ein neues Array, indem Elemente entfernt werden, die nicht dazugehören. reduzieren, nimmt andererseits alle Elemente in einem Array und reduziert sie in einen einzigen Wert.

So wie Karte und Filterreduzieren ist definiert am Array.prototyp und so für jedes Array verfügbar, und Sie übergeben einen Rückruf als erstes Argument. Es ist jedoch auch ein optionales zweites Argument erforderlich: der Wert, mit dem alle Array-Elemente kombiniert werden sollen. 

reduzieren Übergibt deinem Callback vier Argumente:

  1. Das aktueller Wert
  2. Das vorheriger Wert
  3. Das aktueller Index
  4. Das Array du hast angerufen reduzieren auf

Beachten Sie, dass der Rückruf eine vorheriger Wert bei jeder Iteration. Bei der ersten Iteration dort ist kein vorheriger Wert Deshalb haben Sie die Möglichkeit zu bestehen reduzieren Ein Anfangswert: Er fungiert als "vorheriger Wert" für die erste Iteration, wenn es sonst keinen gibt.

Denken Sie schließlich daran reduzieren kehrt zurück Einzelwert, nicht ein Array, das ein einzelnes Element enthält. Dies ist wichtiger als es den Anschein hat, und ich werde in den Beispielen darauf zurückkommen.

reduzieren in der Praxis

Schon seit reduzieren ist die Funktion, die die Leute zuerst am meisten fremd finden. Wir gehen zunächst Schritt für Schritt durch etwas einfaches.

Nehmen wir an, wir wollen die Summe einer Liste von Zahlen ermitteln. Mit einer Schleife sieht das so aus:

Var-Nummern = [1, 2, 3, 4, 5], gesamt = 0; numbers.forEach (Funktion (number) total + = number;);

Dies ist zwar kein schlechter Anwendungsfall für für jedenreduzieren hat immer noch den Vorteil, dass wir Mutationen vermeiden können. Mit reduzieren, wir würden schreiben:

var total = [1, 2, 3, 4, 5] .reduce (Funktion (vorheriger, aktueller) Vorheriger zurückkehren + aktueller;, 0);

Zuerst rufen wir an reduzieren auf unserer Liste von Zahlen. Wir übergeben einen Rückruf, der den vorherigen Wert und den aktuellen Wert als Argument akzeptiert und das Ergebnis der Addition zurückgibt. Da sind wir gegangen 0 als zweites Argument dazu reduzieren, es wird das als Wert von verwenden Bisherige bei der ersten Iteration.

Wenn wir es Schritt für Schritt machen, sieht es so aus:

Iteration  Bisherige Aktuell Gesamt
1 0 1 1
2 1 2 3
3 3 3 6
4 6 4 10
5 10 5 fünfzehn

Wenn Sie kein Fan von Tabellen sind, führen Sie dieses Snippet in der Konsole aus:

var total = [1, 2, 3, 4, 5] .reduce (Funktion (vorheriger, aktueller, Index) var val = vorheriger + aktueller; console.log ("Der vorherige Wert ist" + vorheriger + "; der aktuelle Wert ist "+ current +" und die aktuelle Iteration ist "+ (Index + 1)); Rückgabewert;, 0); console.log ("Die Schleife ist fertig und der letzte Wert ist" + total + ".");

Um es zusammenzufassen: reduzieren iteriert über alle Elemente eines Arrays und kombiniert sie, wie Sie es in Ihrem Rückruf angegeben haben. Bei jeder Wiederholung hat Ihr Rückruf Zugriff auf die Bisherige Wert, Welches ist das insgesamt so weit, oder akkumulierter Wert; das aktueller Wert; das aktueller Index; und das ganze Array, wenn du sie brauchst.

Kehren wir zu unserem Aufgabenbeispiel zurück. Wir haben eine Liste mit Aufgabennamen erhalten Karte, und eine gefilterte Liste von Aufgaben, die mit… naja lange gedauert haben, Filter

Was wäre, wenn wir wissen wollten, wie viel Zeit wir heute verbracht haben?

Verwendung einer für jeden Schleife, würden Sie schreiben:

var total_time = 0; task.forEach (function (task) // Das Pluszeichen erzwingt nur // task.duration von einem String zu einer Number total_time + = (+ task.duration););

Mit reduzieren, das wird zu:

var total_time = Aufgaben.reduce (Funktion (vorhergehend, aktuell) Vorheriges zurückgeben + aktuell;, 0); // Verwendung von Pfeilfunktionen var total_time = task.reduce ((vorheriger, aktueller) vorheriger + aktueller);

Einfach. 

Das ist fast alles, was dazu gehört. Fast, weil JavaScript uns eine weitere, wenig bekannte Methode bietet reduziereRechts. In den obigen Beispielen, reduzieren begann am zuerst Element im Array, iterierend von links nach rechts:

var array_of_arrays = [[1, 2], [3, 4], [5, 6]]; var concatenated = array_of_arrays.reduce (Funktion (vorhergehend, aktuell) return previous.concat (aktuell);); console.log (verkettet); // [1, 2, 3, 4, 5, 6];

reduziereRechts tut das Gleiche, aber in die entgegengesetzte Richtung:

var array_of_arrays = [[1, 2], [3, 4], [5, 6]]; var concatenated = array_of_arrays.reduceRight (Funktion (vorhergehend, aktuell) return previous.concat (aktuell);); console.log (verkettet); // [5, 6, 3, 4, 1, 2];

ich benutze reduzieren jeden tag, aber ich habe es nie gebraucht reduziereRechts. Ich glaube, du wirst es wahrscheinlich auch nicht tun. Aber für den Fall, dass Sie es jemals tun, wissen Sie jetzt, dass es da ist.

Gotchas

Die drei großen Fallstricke mit reduzieren sind:

  1. Vergessen zu Rückkehr
  2. Einen Anfangswert vergessen
  3. Erwartet ein Array wenn reduzieren gibt einen einzelnen Wert zurück

Glücklicherweise sind die ersten beiden leicht zu vermeiden. Die Entscheidung über den anfänglichen Wert hängt davon ab, was Sie tun, aber Sie werden schnell den Dreh raus haben.

Der letzte mag ein bisschen seltsam wirken. Ob reduzieren gibt immer nur einen einzelnen Wert zurück, warum sollte man ein Array erwarten??

Dafür gibt es einige gute Gründe. Zuerst, reduzieren Gibt immer eine einzelne zurück Wert, nicht immer eine einzige Nummer. Wenn Sie beispielsweise ein Array von Arrays reduzieren, wird ein einzelnes Array zurückgegeben. Wenn Sie die Angewohnheit haben oder Arrays reduzieren, könnte man davon ausgehen, dass ein Array mit einem einzelnen Element kein Sonderfall wäre.

Zweitens, wenn reduzieren tat Geben Sie ein Array mit einem einzigen Wert zurück, würde es natürlich gut mit spielen Karte und Filter, und andere Funktionen in Arrays, die Sie wahrscheinlich damit verwenden werden. 

Implementierung

Zeit für unseren letzten Blick unter die Haube. Wie üblich hat Mozilla eine kugelsichere Polyfill-Packung zur Reduzierung, wenn Sie es ausprobieren möchten.

var verkleinern = Funktion (Array, Rückruf, initial) var battery = initial || 0; array.forEach (Funktion (Element) Accumulator = Callback (Accumulator, Array [i]);); Rücklaufspeicher ;

Zwei Dinge hier zu beachten:

  1. Diesmal habe ich den Namen verwendet Akkumulator anstatt Bisherige. Dies ist, was Sie normalerweise in freier Wildbahn sehen.
  2. Ich weise zu Akkumulator ein Anfangswert, wenn ein Benutzer einen bereitstellt, und standardmäßig auf 0, wenn nicht. So ist das wirklich reduzieren benimmt sich auch.

Alles zusammenstellen: Map, Filter, Reduce und Chainability

An diesem Punkt können Sie nicht sein Das beeindruckt. 

Meinetwegen: Karte, Filter, und reduzieren, allein sind nicht besonders interessant. 

Denn ihre wahre Kraft liegt in ihrer Kettenfähigkeit. 

Angenommen, ich möchte Folgendes tun:

  1. Sammeln Sie zwei Tage lang Aufgaben.
  2. Konvertieren Sie die Dauer der Aufgabe in Stunden anstatt in Minuten.
  3. Filtern Sie alles heraus, was zwei Stunden oder länger gedauert hat.
  4. Fassen Sie alles zusammen.
  5. Multiplizieren Sie das Ergebnis mit einem Stundensatz für die Abrechnung.
  6. Ausgabe eines formatierten Dollarbetrags.

Zunächst definieren wir unsere Aufgaben für Montag und Dienstag:

var monday = ['name': 'Ein Tutorial schreiben', 'duration': 180, 'name': 'Einige Webentwicklungen', 'duration': 120]; var tuesday = ['name': 'Schreibe das Tutorial weiter', 'duration': 240, 'name': 'Etwas mehr Webentwicklung', 'duration': 180, 'name': 'Ein Ganzes viel nichts ',' dauer ': 240]; var Aufgaben = [Montag, Dienstag];

Und jetzt unsere reizende Transformation:

 var result = task.reduce (funktion (akkumulator, aktuell) return battery.concat (current);). map (funktion (aufgabe) return (task.duration / 60);). filter (funktion (dauer) Rückkehrdauer> = 2;). map (Funktion (Dauer) Rückkehrdauer * 25;). verkleinern (Funktion (Akku, Strom) Return [(+ Akku) + (+ Strom)];). map (function (dollar_amount) return '$' + dollar_amount.toFixed (2);). verkleinern (function (formatted_dollar_amount) return formatted_dollar_amount;);

Oder genauer:

 // Verketten Sie unser 2D-Array in einer einzelnen Liste. Var result = task.reduce ((acc, current) => acc.concat (current)) // Extrahieren Sie die Taskdauer und konvertieren Sie die Minuten in Stunden .map ((task) = > task.duration / 60) // Alle Aufgaben herausfiltern, die weniger als zwei Stunden dauerten .filter ((Dauer) => Dauer> = 2) // Multiplizieren Sie die Dauer jeder Aufgabe mit unserem Stundensatz .map ((Dauer) = > duration * 25) // Kombiniere die Summen zu einem einzelnen Dollarbetrag .reduce ((acc, current) => [(+ acc) + (+ current)]) // Konvertiere in einen "hübsch gedruckten" Dollarbetrag. map ((Betrag) => '$' + Quantity.toFixed (2)) // Ziehen Sie das einzige Element des Arrays heraus, das wir aus der Map erhalten haben .reduce ((formatierter_ Betrag) => formatierter_ Betrag); 

Wenn Sie es so weit geschafft haben, sollte dies ziemlich einfach sein. Es gibt jedoch zwei Verrückte, die erklärt werden müssen. 

Zuerst muss ich in Zeile 10 schreiben:

// Rest entfällt verkleinern (Funktion (Akku, Strom) return [(+ Akku) + (+ current_];)

Zwei Dinge hier zu erklären:

  1. Die Pluszeichen vor Akkumulator und aktuell zwingen ihre Werte zu Zahlen. Wenn Sie dies nicht tun, ist der Rückgabewert die eher unbrauchbare Zeichenfolge, 12510075100.
  2. Wenn diese Summe nicht in Klammern eingeschlossen wird, reduzieren wird einen einzigen Wert ausspucken, nicht eine Anordnung. Das würde am Ende ein werfen TypeError, weil du nur verwenden kannst Karte auf einem Array! 

Der zweite Punkt, der Sie etwas unbehaglich machen könnte, ist der letzte reduzieren, nämlich:

// Rest weggelassene Karte (Funktion (Dollar_amount) return '$' + dollar_amount.toFixed (2);). Verkleinern (Funktion (formatted_dollar_amount) return formatted_dollar_amount;);

Dieser Anruf an Karte gibt ein Array zurück, das einen einzelnen Wert enthält. Hier rufen wir an reduzieren diesen Wert herausziehen.

Die andere Möglichkeit, dies zu tun, besteht darin, den Aufruf zu entfernen, um ihn zu reduzieren und in das Array zu indizieren Karte ausspucken:

var result = task.reduce (funktion (akkumulator, aktuell) return battery.concat (current);). map (funktion (aufgabe) return (task.duration / 60);). filter (funktion (dauer) Rückkehrdauer> = 2;). map (Funktion (Dauer) Rückkehrdauer * 25;). verkleinern (Funktion (Akku, Strom) Return [(+ Akku) + (+ Strom)];). map (function (dollar_amount) return '$' + dollar_amount.toFixed (2);) [0];

Das ist vollkommen richtig. Wenn Sie mit einem Array-Index besser zurechtkommen, machen Sie gleich weiter.

Aber ich ermutige dich nicht. Eine der leistungsfähigsten Möglichkeiten, diese Funktionen zu verwenden, liegt im Bereich der reaktiven Programmierung, bei der Sie Array-Indizes nicht verwenden dürfen. Wenn du diese Gewohnheit jetzt triffst, wird das Lernen reaktiver Techniken auf der ganzen Linie viel einfacher.

Endlich mal sehen wie unser Freund das macht für jeden Schleife würde es schaffen:

var concatenated = monday.concat (dienstag), Gebühren = [], formatierte_summe, hourly_rate = 25, total_fee = 0; concatenated.forEach (Funktion (Task) var duration = task.duration / 60; if (duration> = 2) fees.push (duration * hourly_rate);; fees.forEach (Funktion (Gebühr) total_fee + = fee); var formatatted_sum = '$' + total_fee.toFixed (2);

Tolerierbar, aber laut.

Fazit & nächste Schritte

In diesem Tutorial haben Sie gelernt, wie KarteFilter, und reduzieren Arbeit; wie man sie benutzt; und ungefähr, wie sie umgesetzt werden. Sie haben gesehen, dass sie alle es Ihnen ermöglichen, den sich verändernden Zustand zu vermeiden zum und für jeden Schleifen erfordert, und Sie sollten jetzt eine gute Vorstellung davon haben, wie sie alle miteinander verkettet werden können. 

Ich bin mir sicher, dass Sie gerne etwas üben und weiterlesen möchten. Hier sind meine drei besten Vorschläge, wohin Sie als nächstes gehen sollten:

  1. Jafar Husains hervorragende Übungen zur funktionalen Programmierung in JavaScript mit einer soliden Einführung in Rx.js
  2. Der Kurs von Envato Tuts + Instructor Jason Rhodes über Funktionsprogrammierung in JavaScript
  3. Der meist adäquate Leitfaden zur funktionalen Programmierung, der ausführlicher erläutert, warum wir Mutationen und Funktionsdenken im Allgemeinen vermeiden

JavaScript ist zu einer der De-facto-Sprachen geworden, die im Web arbeiten. Es ist nicht ohne Lernkurven, und es gibt viele Frameworks und Bibliotheken, um Sie zu beschäftigen. Wenn Sie nach zusätzlichen Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie nach, was wir auf dem Envato-Marktplatz zur Verfügung haben.

Wenn Sie mehr zu diesem Thema wünschen, überprüfen Sie mein Profil von Zeit zu Zeit. fang mich auf Twitter (@PelekeS); oder klicken Sie auf meinen Blog unter http://peleke.me.

Fragen, Kommentare oder Verwirrungen? Lass sie unten, und ich werde mein Bestes geben, um zu jedem einzelnen zurückzukommen.

Lernen Sie JavaScript: Das komplette Handbuch

Wir haben ein umfassendes Handbuch zusammengestellt, mit dessen Hilfe Sie JavaScript erlernen können, egal ob Sie gerade erst als Webentwickler anfangen oder sich mit fortgeschrittenen Themen befassen möchten.