Heim > Web-Frontend > js-Tutorial > 10 Lodash -Funktionen, die Sie durch ES6 ersetzen können

10 Lodash -Funktionen, die Sie durch ES6 ersetzen können

William Shakespeare
Freigeben: 2025-02-15 09:55:12
Original
263 Leute haben es durchsucht

10 Lodash Features You Can Replace with ES6

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

  • Lodash ist derzeit die abhängigste Bibliothek im NPM -Paket, aber in einigen Fällen kann die Verwendung von ES6 den Bedarf daran beseitigen.
  • ES6 -Merkmale wie native Set -Methoden, Pfeilfunktionen, Dekonstruktionssyntax sowie REST- und Spread -Operatoren können gemeinsame Funktionen von Lodash ersetzen, wie map, filter, reduce, head, tail &
  • und ruhen und verteilen.
  • curry ES6 kann auch Pfeilfunktionen, Ruheparameter und Spread -Operatoren verwenden, um Lodashs partial, pick, Operatoren, Pfade, constant, identity, noop,
  • und Kettenfunktionen wie als Stilanruf.
  • Obwohl Lodash immer noch eine sehr wertvolle Bibliothek ist, bietet die evolutionäre Version von JavaScript (ES6) eine neue Möglichkeit, Probleme zu lösen, die zuvor von Versorgungsmodulen wie Lodash behandelt wurden.
  1. Karte, Filter, reduzieren

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

find das ist nicht alles. Wenn wir einen modernen Browser verwenden, können wir auch some, every, reduceRight und

verwenden.
  1. Kopf & Schwanz

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

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

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

:
    aufrufen
  1. ruhen und verteilt

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:
  1. Curry

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:
    leichter zu verstehen:
  1. partiell

Wie Currying können wir die Pfeilfunktion verwenden, um einige Anwendungen einfach und klar zu gestalten:
  1. Operatoren

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:

  1. Pfade

Viele Funktionen von Lodash verwenden Pfade als Zeichenfolgen oder Arrays. Wir können die Pfeilfunktion verwenden, um wiederverwendbarere Pfade zu erstellen:

  1. pick

Mit dem Dienstprogramm

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:

  1. Konstante, Identität, Noop

Lodash bietet einige Dienstprogramme, um einfache Funktionen mit spezifischem Verhalten zu erstellen:

  1. Ketten & Flow

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!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage