Verwenden von MAP und Reduzierung in funktionalem JavaScript

Kernpunkte

• JavaScript native Array und map() Methoden von reduce() -Objekten sind leistungsstarke funktionale Programmierwerkzeuge, die den Code prägnanter, lesbar und einfacher machen.
• map() ist eine grundlegende funktionale Programmierungstechnik, die auf alle Elemente in einem Array wirkt und ein weiteres Array derselben Länge erzeugt, das den konvertierten Inhalt enthält. Durch das Hinzufügen von Mapping -Funktionen zu Array -Objekten verwandelt ECMascript 5 den grundlegenden Array -Typ in einen vollständigen Funkartor, wodurch die funktionale Programmierung einfacher zu verwenden ist.
Die
• reduce() -Methode (auch eine neue Methode in ECMascript 5) ähnelt map(), aber anstatt einen anderen Funkor zu generieren, erzeugt sie ein einzelnes Ergebnis, das von jedem Typ sein kann. Es wendet die Funktionen in jedem Element des Arrays an, damit das Array auf einen einzelnen Ausgangswert reduziert wird.
• Während die Methoden map() und reduce() die Leistung beeinflussen können, werden die Verbesserungen der Codequalität und der Entwicklerzufriedenheit heute mit der Verwendung wahrscheinlich jegliche vorübergehende Auswirkungen auf die Leistung überwiegen. Der Autor empfiehlt die Verwendung von Funktionstechniken zur Entwicklung und zur Messung der Auswirkungen in realen Situationen, bevor er entscheidet, ob map() und reduce() für eine bestimmte Anwendung geeignet sind.

Die Prozessdiskussionen im Zusammenhang mit vielen erstaunlichen neuen Funktionen von ECMascript 6 sind weit verbreitet, und es ist leicht zu vergessen, dass ECMascript 5 einige großartige Tools für die Unterstützung funktionaler Programmierung in JavaScript bietet, die wir heute verwenden können. Dazu gehören native Methoden Array und map() basierend auf JavaScript reduce() -Objekten.

Wenn Sie map() und reduce() noch nicht verwendet haben, beginnen Sie jetzt! Die meisten modernen JavaScript -Plattformen unterstützen ECMascript 5 nativ. Zuordnungen und Vorschriften können Ihren Code prägnanter machen, leichter zu lesen und zu warten und Sie zu einer eleganteren funktionalen Entwicklung zu führen.

Leistung: Vorsichtsmaßnahmen

Natürlich muss das Lesen und Wartung des Codes bei Bedarf mit der Leistung ausgeglichen werden. Derzeit sind Browser effizienter mit mehr mühsamen herkömmlichen Techniken wie for -Sloops.

Mein Ansatz ist es normalerweise, zuerst Code zu schreiben, das leicht zu lesen und zu warten ist, und dann die Leistung zu optimieren, wenn ich das Problem in der tatsächlichen Situation bemerke. Frühgeborene Optimierung ist die Quelle des gesamten Bösen.

Es ist auch zu beachten, dass die Verwendung von Browsern map() und reduce(), wenn diese Methoden die Verbesserungen in der JavaScript -Engine verwenden können. Wenn ich keine Leistungsprobleme habe, bevorzuge ich es, optimistisch Code zu schreiben und Leistungsverbesserungen zu setzen, die meinen Code in meiner Backup -Tasche weniger attraktiv machen, falls ich sie brauche.

Verwenden Sie die Karte

Mapping ist eine grundlegende funktionale Programmierungstechnik, die auf alle Elemente in einem Array wirkt und ein weiteres Array derselben Länge (einschließlich des konvertierten Inhalts) erzeugt.

Um genauer zu sein, lassen Sie uns einen einfachen Anwendungsfall finden. Angenommen, Sie haben eine Reihe von Wörtern, die Sie in ein Array umwandeln müssen, das jede Wortlänge enthält. (Ich weiß, dass dies nicht die Art von komplexer Raketenwissenschaft ist, die Sie normalerweise für komplexe Anwendungen ausführen müssen. Wenn Sie jedoch verstehen, wie sie in diesem einfachen Fall funktioniert, können Sie Ihrem Code einen echten Mehrwert hinzufügen, wenn Sie ihn für den Fall anwenden).

Sie wissen möglicherweise bereits, wie Sie die for -Schload in einem Array verwenden, um das zu tun, was ich gerade beschrieben habe. Es könnte so aussehen:

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

Wir haben nur einige Variablen definiert: ein Array namens animals, das unsere Worte enthält; Speichern Sie jeden Artikel, den wir in jeder Schleife des Arrays betreiben. Wir optimieren unsere lengths -Schule mit einer temporären internen Zählervariablen und einer item -Variablen. Anschließend iterieren wir über jeden Artikel bis zur for -Arraylänge. Für jedes Element berechnen wir seine Länge und schieben sie in das Array loops. for animals lengths Hinweis: Wir können sagen, dass wir dies genauer machen können, indem wir die Länge von

ohne Zwischenzuordnungen direkt zum

-Array drücken. Dies spart uns einen Code, macht aber auch für dieses sehr einfache Beispiel den Code weniger lesbar. Um es effizienter, aber weniger einfacher zu machen, können wir unser -Array mit der bekannten animals[count] -Arraylänge initialisieren und das Element dann mit Index anstatt lengths einfügen. Es hängt alles davon ab, wie Sie den Code in der realen Welt verwenden. animals lengths new Array(animals.length) Diese Methode hat keine technischen Probleme. Es sollte in einer Standard -JavaScript -Engine funktionieren und erledigt den Job. Aber sobald Sie wissen, wie man push verwendet, wird es dazu ungeschickt.

Lassen Sie mich Ihnen zeigen, wie wir

verwenden, um damit umzugehen: map()

In diesem Fall beginnen wir erneut mit der map() -Array -Variablen. Die einzige andere Variable, die wir deklarieren, ist jedoch

, die wir direkt dem Ergebnis der Zuordnung von anonymen Inline -Funktionen zu jedem Element des

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

-Array zuweisen. Diese anonyme Funktion führt eine Operation für jedes Tier aus, die die Länge zurückgibt. Infolgedessen wird

zu einem Array mit der gleichen Länge wie das ursprüngliche animals -Array, das die Länge jedes Wortes enthält. lengths

Ein paar Punkte zu dieser Methode. Erstens ist es viel kürzer als die ursprüngliche Methode. Zweitens müssen wir viel weniger Variablen deklarieren. Je weniger Variablen, desto weniger Rauschen befindet sich im globalen Namespace, und wenn andere Teile desselben Codes den gleichnamigen gleichnamigen Variablen verwenden, desto weniger Konfliktchance. Darüber hinaus müssen unsere Variablen ihren Wert von Anfang bis Ende nicht ändern. Wenn Sie sich mit funktionaler Programmierung befassen, werden Sie die anmutige Fähigkeit zu schätzen wissen, Konstanten und unveränderliche Variablen zu verwenden, und es ist nicht zu spät, jetzt zu lernen.

Ein weiterer Vorteil dieses Ansatzes besteht darin, dass wir die Möglichkeit haben, seine Vielseitigkeit zu verbessern, indem sie benannte Funktionen trennen und damit einen saubereren Code generieren. Anonyme Inline -Funktionen können unordentlich aussehen und die Wiederverwendung von Code erschweren. Wir können eine Funktion namens getLength() definieren und sie auf diese Weise im Kontext verwenden:

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

Sehen Sie sich an, wie sauber das aussieht? Wenn Sie nur Zuordnungen als Teil Ihres Toolkits ablegen, können Sie Ihren Code auf eine ganz neue Funktionsebene bringen.

Was ist ein Functor?

Interessanterweise verwandelt EcMascript 5 durch Hinzufügen von Mapping -Funktionen zu Array -Objekten den grundlegenden Array -Typ in einen vollständigen Funkor, wodurch die funktionale Programmierung für uns alle einfacher zu verwenden ist.

Gemäß der klassischen funktionalen Programmierdefinition erfüllen die Funktionen drei Bedingungen:

1. Es enthält eine Reihe von Werten
2. implementiert eine Zuordnungsfunktion, die auf jedes Element
wirkt
3. seine Zuordnungsfunktion gibt Funktionen derselben Größe
zurück

Dies ist ein Thema, das Sie bei Ihrem nächsten JavaScript -Meeting besprechen können.

Wenn Sie mehr über Functors erfahren möchten, sehen Sie sich dieses erstaunliche Video von Mattias Petter Johansson an.

Verwendung reduzieren

Die reduce() map() -Methode ist auch eine neue Methode in ECMascript 5, die der animals ähnelt, außer dass es keinen anderen Funkor erzeugt, sondern ein einzelnes Ergebnis erzeugt, das von jedem Typ sein kann. Nehmen wir beispielsweise an, Sie möchten die Summe der Längen aller Wörter im

-Array als Zahl nehmen. Sie können mit:

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

beginnen

total Nach dem Definieren des Anfangsarrays erstellen wir eine Variable item für die Laufgesamt, die zunächst auf Null gesetzt ist. Wir haben auch eine Variable animals erstellt, um jede Iteration des for -Array zu speichern, wenn es die count -Schose durchquert, und eine Variable loops für Schleifenzähler sowie eine for -Rehnung, um unsere Iterationen zu optimieren. Dann führen wir eine animals -Schleife aus, um alle Wörter im item -Array zu iterieren und jedes Wort der

-Variablen zuweisen. Schließlich fügen wir die Länge jedes Elements zu unserer Gesamtsumme hinzu.

reduce() Auch dieser Ansatz hat keine technischen Probleme. Wir beginnen mit einem Array und erhalten schließlich ein Ergebnis. Mit der Methode

können wir diesen Prozess jedoch direkter gestalten: <🎜>

var animals = ["cat","dog","fish"];
var lengths = [];
var item;
var count;
var loops = animals.length;
for (count = 0; count < loops; count++) {
  item = animals[count];
  lengths.push(item.length);
}
console.log(lengths); //[3, 3, 4]

Was hier passiert, ist, dass wir eine neue Variable total definieren und es dem Ergebnis zuweisen, das animals -Array mit zwei Parametern zu reduzieren: eine anonyme Inline -Funktion und einen anfänglichen Lauf -Gesamtwert Null. Durch die Reduzierung wird jedes Element in das Array durchquert, die Funktion auf diesem Element ausführt und sie in die an die nächste Iteration übergebene Laufzeit hinzufügt. Hier enthält unsere Inline -Funktion zwei Parameter: die Auslaufsumme und die Wörter, die derzeit aus dem Array verarbeitet werden. Diese Funktion fügt der Länge des aktuellen Wortes den aktuellen Wert von total hinzu.

Beachten Sie, dass wir den zweiten Parameter von reduce() auf Null festlegen, was angibt, dass total eine Zahl enthält. Ohne den zweiten Parameter funktioniert die reduce -Methode weiterhin, aber das Ergebnis ist nicht unbedingt das Ergebnis, das Sie erwarten. (Versuchen Sie es und sehen Sie, welche Logik von JavaScript verwendet wird, wenn die Gesamtzahl ausgelassen wird.)

Da die Definition der anonymen Inline -Funktionen beim Aufrufen der reduce() -Methode integriert ist, kann dies etwas komplizierter erscheinen, als es sein muss. Lassen Sie uns dies noch einmal tun, aber lassen Sie uns zunächst eine benannte Funktion definieren, anstatt eine anonyme Inline -Funktion zu verwenden:

var animals = ["cat","dog","fish"];
var lengths = animals.map(function(animal) {
  return animal.length;
});
console.log(lengths); //[3, 3, 4]

Dieser ist etwas länger, aber es ist nicht immer schlecht zu wachsen. Das Betrachten auf diese Weise sollte das, was in der reduce -Methode passiert, etwas klarer machen.

Die

reduce() -Methode hat zwei Parameter: eine auf jedes Element im Array angewendete Funktion und ein Anfangswert, der zum Ausführen der Gesamtzahl verwendet wird. In diesem Fall übergeben wir den Namen einer neuen Funktion namens addLength und den Anfangswert des Laufs Total Null. Wir haben die addLength() -Funktion so erstellt, dass sie auch zwei Parameter akzeptiert: die Auslaufsumme und die zu verarbeitende Zeichenfolge.

Schlussfolgerung

Die Gewohnheit entwickeln, map() und reduce() regelmäßig zu verwenden, bietet Ihnen Alternativen, um Ihren Code prägnanter, allgemeiner, leichter zu pflegen und den Weg für Sie zu ebnen, mehr funktionale JavaScript -Technologien wie möglich zu verwenden.

Die Methoden

map() und reduce() sind nur zwei der neuen Methoden, die zu ECMascript 5 hinzugefügt wurden. Höchstwahrscheinlich werden die Verbesserungen der Codequalität und der von Ihnen heute sehenen Entwicklerzufriedenheit bei weitem alle vorübergehenden Auswirkungen auf die Leistung überwiegen. Verwenden Sie Funktionstechniken, um die Auswirkungen in der realen Welt zu entwickeln und zu messen, bevor Sie entscheiden, ob map() und reduce() für Ihre Anwendung geeignet sind.

Dieser Artikel wurde von Panayiotis Velisarakos, Tim Severien und Dan Prince überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SidePoint -Inhalte für die Besten erhalten haben!

Häufig gestellte Fragen zu Map-Reduce in funktionalem JavaScript (FAQ)

Was ist der Unterschied zwischen Karte und Reduzierung in JavaScript?

In JavaScript sind MAP und Reduzierung sowohl Funktionen höherer Ordnung, die auf Arrays wirken. Die Kartenfunktion wird verwendet, um ein neues Array zu erstellen, indem die Funktion auf jedes Element des ursprünglichen Arrays angewendet wird. Es ändert das ursprüngliche Array nicht, sondern gibt ein neues Array zurück. Andererseits wird die Reduzierung von Funktionen verwendet, um Arrays in Einzelwerte zu vereinfachen. Sie wendet die Funktion in jedem Element des Arrays an, damit sie auf einen einzelnen Ausgangswert reduziert werden kann.

Wie funktioniert die Kartenfunktion in JavaScript?

Die Kartenfunktion in JavaScript funktioniert, indem er ein neues Array aus einem vorhandenen Array erstellt. Dies geschieht, indem die angegebene Funktion auf jedes Element im ursprünglichen Array angewendet wird. Die Funktion wird einmal für jedes Element im Array aufgerufen. Das Ergebnis ist ein Neuarray, das das Ergebnis eines Funktionsaufrufs enthält.

Wie funktioniert die Reduzierung von Funktionen in JavaScript?

Die Reduzierung der Funktion in JavaScript funktioniert, indem die Funktion auf jedes Element im Array angewendet wird, damit das Array auf einen einzelnen Ausgangswert reduziert werden kann. Der Ausgangswert ist das kumulative Ergebnis des Funktionsaufrufs. Diese Funktion akzeptiert zwei Parameter: den Akkumulator und den aktuellen Wert. Der Rückgabewert des Akkumulationsfunktionsaufrufs des Akkumulators.

Kann ich MAP verwenden und in JavaScript reduzieren?

Ja, Sie können MAP verwenden und in JavaScript reduzieren. Tatsächlich werden sie häufig zusammen in der funktionellen Programmierung verwendet. Sie können die Kartenfunktion verwenden, um jedes Element in ein Array umzuwandeln und dann mit der Reduzierung der reduzierten Funktion die konvertierten Elemente in einen einzelnen Ausgangswert zu kombinieren.

Was ist der Unterschied zwischen Karte und Foreach in JavaScript?

map und foreach sind beide Funktionen höherer Ordnung, die auf Arrays in JavaScript wirken. Der Hauptunterschied zwischen ihnen besteht darin, dass MAP ein neues Array erstellt, indem eine Funktion auf jedes Element des ursprünglichen Arrays angewendet wird, während foreach für jedes Element des Arrays gilt, um seine Nebenwirkungen zu erhalten. Foreach gibt kein neues Array zurück.

Wie konvertiere ich Arrays in JavaScript mithilfe der Kartenfunktion?

Sie können die Kartenfunktion in JavaScript verwenden, um ein Array zu konvertieren, indem Sie die Funktion auf jedes Element des Arrays anwenden. Die Funktion wird einmal für jedes Element im Array aufgerufen. Das Ergebnis ist ein Neuarray, das das Ergebnis eines Funktionsaufrufs enthält.

Wie verwende ich die Reduzierung der Funktionsfunktion, um Elemente eines Arrays in JavaScript zu kombinieren?

Sie können die Reduzierung der Funktion in JavaScript verwenden, um Elemente eines Arrays in einen einzelnen Ausgangswert zu kombinieren. Die Funktion wird für jedes Element im Array angewendet, und der Ausgangswert ist das kumulative Ergebnis des Funktionsaufrufs.

Was sind einige häufige Anwendungsfälle der Kartenfunktion in JavaScript?

Kartenfunktionen in JavaScript werden häufig verwendet, um Arrays durch Anwenden von Funktionen auf jedes Element eines Arrays zu konvertieren. Einige häufige Anwendungsfälle umfassen das Umwandeln von Zeichenfolgen in Zahlen, das Ändern des Falls von Zeichenfolgen und das Extrahieren von Eigenschaften aus Objekten.

Was sind einige häufige Anwendungsfälle von Reduzierung von Funktionen in JavaScript?

Funktionen in JavaScript reduzieren, werden normalerweise verwendet, um Elemente eines Arrays in einen einzelnen Ausgangswert zu kombinieren. Einige häufige Anwendungsfälle umfassen Summiernummern, die Ermittlung maximaler oder minimaler Werte und Verkettungsketten.

Wie kann ich die Funktionen in JavaScript debuggen oder reduzieren?

Sie können die MAP debuggen oder Funktionen in JavaScript reduzieren, indem Sie die Anweisung console.log in der Funktion verwenden, um die Werte von Variablen und Ausdrücken anzuzeigen. Sie können die Ausführung auch mithilfe der debugger -Anweisung pausieren und die Werte von Variablen und Ausdrücken in den Entwicklertools des Webbrowsers überprüfen.

Das obige ist der detaillierte Inhalt vonVerwenden von MAP und Reduzierung in funktionalem JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!