Lodash ist derzeit die abhängigste Bibliothek im NPM -Paket. Wenn Sie ES6 jedoch verwenden, benötigen Sie es möglicherweise nicht. In diesem Artikel wird untersucht, wie native Sammlungsmethoden, Pfeilfunktionen und andere neue ES6 -Funktionen kombiniert werden, um den Code vieler gemeinsamer Szenarien zu vereinfachen.
Kernpunkte
map
, filter
, reduce
, head
, tail
& curry
ES6 kann auch Pfeilfunktionen, Ruheparameter und Spread -Operatoren verwenden, um Lodashs partial
, pick
, Operatoren, Pfade, constant
, identity
, noop
, Diese Sammelmethoden machen die Datenumwandlung zum Kinderspiel und werden fast allgemein unterstützt. Wir können sie in Kombination mit Pfeilfunktionen verwenden, um präzisen Code zu schreiben, um die von Lodash bereitgestellte Implementierung zu ersetzen:
// Lodash _.map([1, 2, 3], function(n) { return n * 3; }); // [3, 6, 9] _.reduce([1, 2, 3], function(total, n) { return total + n; }, 0); // 6 _.filter([1, 2, 3], function(n) { return n % 2; }); // [1, 3] // ES6 [1, 2, 3].map(n => n * 3); [1, 2, 3].reduce((total, n) => total + n, 0); [1, 2, 3].filter(n => n % 2);
find
das ist nicht alles. Wenn wir einen modernen Browser verwenden, können wir auch some
, every
, reduceRight
und
Dekonstruktionssyntax ermöglicht es uns, den Kopf und den Schwanz einer Liste zu erhalten, ohne dass praktische Funktionen erforderlich sind:
// Lodash _.head([1, 2, 3]); // 1 _.tail([1, 2, 3]); // [2, 3] // ES6 const [head, ...tail] = [1, 2, 3];
Sie können auch das ursprüngliche Element und das letzte Element ähnlich erhalten:
// Lodash _.initial([1, 2, 3]); // -> [1, 2] _.last([1, 2, 3]); // 3 // ES6 const [last, ...initial] = [...[1, 2, 3]].reverse();
reverse
Wenn Sie der Meinung sind, dass reverse
die Datenstruktur ändert, können Sie den Spread -Operator verwenden, um das Array zu klonen, bevor Sie
Die
-Rück- und Spread -Funktionen ermöglichen es uns, Funktionen zu definieren und aufzurufen, die eine variable Anzahl von Parametern akzeptieren. ES6 führt eine spezielle Syntax für diese beiden Vorgänge ein:Ohne eine Sprache auf hoher Ebene wie TypeScript oder Flow können wir keine Typsignaturen für Funktionen bereitstellen, was das Currying ziemlich schwierig macht. Wenn wir die Curry -Funktion erhalten, ist es schwierig zu wissen, wie viele Parameter bereitgestellt wurden und welche Parameter als nächstes bereitgestellt werden müssen. Mit Arrow -Funktionen können wir Curry -Funktionen explizit definieren, um sie von anderen Programmierern zu verstehen:
Wie Currying können wir die Pfeilfunktion verwenden, um einige Anwendungen einfach und klar zu gestalten:
Lodash enthält viele Funktionen, die Syntax -Operatoren in Funktionen neu aufmerksam machen, damit sie an Sammelmethoden übergeben werden können. In den meisten Fällen machen Pfeilfunktionen sie einfach und kurz genug, damit wir sie inline definieren können:
Viele Funktionen von Lodash verwenden Pfade als Zeichenfolgen oder Arrays. Wir können die Pfeilfunktion verwenden, um wiederverwendbarere Pfade zu erstellen:
pick
können wir das gewünschte Attribut aus dem Zielobjekt auswählen. Wir können das gleiche Ergebnis unter Verwendung von Dekonstruktions- und Abkürzungsobjektliteralen erzielen:
Lodash bietet einige Dienstprogramme, um einfache Funktionen mit spezifischem Verhalten zu erstellen:
Lodash bietet einige Funktionen, mit denen wir gekettete Aussagen schreiben können. In vielen Fällen gibt die integrierte Sammelmethode eine Array-Instanz zurück, die direkt angehalten werden kann. Dies ist jedoch nicht möglich, wenn einige Methoden die Sammlung ändern. Wir können jedoch die gleiche Konvertierung wie eine Reihe von Pfeilfunktionen definieren:
Schlussfolgerung
Lodash ist immer noch eine großartige Bibliothek, und dieser Artikel ist nur eine neue Perspektive, wie die sich entwickelte Version von JavaScript einige Probleme in der Vergangenheit auf Versorgungsmodule lösen kann. Ignoriere es nicht. Überlegen Sie stattdessen, wenn Sie das nächste Mal eine Abstraktion benötigen, ob eine einfache Funktion ersetzt werden kann!
(Der FAQS-Teil wird weggelassen, weil es nichts mit dem Code Pseudooriginalität zu tun hat und länger ist)
Das obige ist der detaillierte Inhalt von10 Lodash -Funktionen, die Sie durch ES6 ersetzen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!