✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

5 hochmoderne JavaScript-Funktionen zur Verbesserung Ihres Codes

27

JavaScript-Features wachsen ständig und erhalten neue wie Operatoren, Syntaxkonstruktionen, Ausdrücke. Viele, die in den letzten Jahren eingeführt wurden, und einige von ihnen sind bereits in Fleisch und Blut übergegangen, wie der Fettpfeil- =>Ausdruck oder der Objekt-Spread ...-Operator.

JavaScript-Funktionen beginnen als Vorschläge

Alle diese JavaScript-Funktionen beginnen als Vorschläge, die beim TC 39 eingereicht werden. Das Technische Komitee 39 ist für die Standardisierung zuständig:

die universelle, plattformübergreifende, herstellerneutrale Programmiersprache ECMAScript (JavaScript). Dazu gehören die Sprachsyntax, Semantik und Bibliotheken sowie komplementäre Technologien, die die Sprache unterstützen.

Dank Babel, dem JavaScript-Compiler, gibt es viele JavaScript-Vorschläge, die wir heute in unseren Ablauf aufnehmen können. Einige von ihnen bieten mehr Übersichtlichkeit, wie das numerische Trennzeichen. Andere, wie die doAusdrücke, führen die Möglichkeit ein, komplexe Bedingungen mit React JSX-Tags zu mischen.

Schauen wir uns in diesem Artikel 5 JavaScript-Funktionen an, die sich noch in der Vorschlagsphase befinden, die wir aber mit Babel verwenden können und die Ihre Programmiererfahrung erheblich verbessern werden.

Jeder hat einen Link zu seiner Babel-Seite, wo Sie sehen können, wie Sie Babel für die Verwendung konfigurieren können, obwohl die hier beschriebenen vorgeschlagenen JavaScript-Funktionen bereits in Babel 7 enthalten sind. Jeder Abschnitt hat auch einen Link zu seinem Vorschlag in der Ecma TC39- Organisation auf GitHub.

Nullish-Koaleszenzoperator

5 hochmoderne JavaScript-Funktionen zur Verbesserung Ihres Codes

Vorschlag: https://github.com/tc39/proposal-nullish-coalescing

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

Dieser JavaScript-Vorschlag beschreibt einen Operator, der es ermöglicht, einen Fallback-Wert auf der rechten Seite des Operators bereitzustellen, wenn eine Variable oder eine Objekteigenschaft nicht definiert ist. Wenn es nicht undefiniert ist, wird die linke Seite des Operators verwendet:

const maybeUndef = undefined; const val = maybeUndef ?? 2021;

Dies ähnelt dem Schreiben als ternärer Operator:

const maybeUndef = undefined; const val = maybeUndef? maybeUndef: 2021;

Beachten Sie, dass dieser Operator nicht prüft, ob die Variable nicht existiert. Dies wird einen Fehler auslösen:

const val = maybeUndef ?? 2021;

Aber Vorsicht, dieser Operator ist nicht 100% wie ein ternärer Operator, der die erste Seite zurückgibt, wenn die ausgewertete Bedingung wahr ist. Werte, die in JavaScript normalerweise falsch sind, werden nicht ausgewertet false. Beispielsweise wird eine leere Zeichenfolge nicht berücksichtigt false:

const someEmptyString = ''; const val = someEmptyString ?? 'fallback';

Im Gegensatz zu diesem nullischen Koaleszenzoperator hätte ein ternärer Operator fallbackals Ergebnis dieser Auswertung ausgelöst.

Optionaler Verkettungsoperator

5 hochmoderne JavaScript-Funktionen zur Verbesserung Ihres Codes

Vorschlag: https://github.com/tc39/proposal-optional-chaining

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining.html

Dieser Operator funktioniert auch bei Variablen und Objekteigenschaften: Er prüft, ob die verschachtelten Eigenschaften, die wir durchlaufen, existieren oder nicht. Ohne diesen Operator müssen wir jede verschachtelte Eigenschaft überprüfen:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Mit dem neuen optionalen Verkettungsoperator können wir Folgendes tun:

const val = anObj.aProp?.aNestedProp

Das sieht viel klarer aus und ist kürzer zu schreiben. Dieser Operator funktioniert auch mit numerischen Arrays, daher ist es gut, mit Sammlungen zu arbeiten:

const val = anObj.anArray[0]?.someProp

Und wir können mehrere Operatoren stapeln:

const val = anObj.anArray[0]?.someProp?.aNestedProp

Und was ist, wenn wir dies mit dem vorherigen kombinieren, nullische Koaleszenz? Wir erhalten eine Syntax, die überprüft, ob jede durchlaufene Eigenschaft vorhanden ist, und falls dies nicht der Fall ist, einen Fallback-Wert bereitstellt:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Wenn einer der Werte nicht vorhanden ist, wird zurückgegeben someDefaultValue. Die Kombination dieser beiden Operatoren ist eine großartige Möglichkeit, die get-Funktion von lodash zu ersetzen .

Pipeline-Betreiber

5 hochmoderne JavaScript-Funktionen zur Verbesserung Ihres Codes

Vorschlag: https://github.com/tc39/proposal-pipeline-operator

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Dieser Operator ist Teil mehrerer experimenteller JavaScript-Funktionen, und diese bietet mehr Lesbarkeit, wenn mehrere Funktionen miteinander verkettet werden. Betrachten Sie die folgende Funktion:

Wenn wir diese verketteten Teiltransformationen wiederverwenden müssen, können wir sie in verschiedene Funktionen aufteilen und dann das Ergebnis daraus zusammensetzen:

Das Seltsame daran ist, dass wir dies von unten, der splitBySpaceZeile, nach oben lesen müssen, um die Transformationen zu verstehen, die auf Strings angewendet werden. Das widerspricht unserem natürlichen Lesefluss, von oben nach unten. Wir enden auch mit all diesen hässlichen baumelnden Klammern. Dies könnte in einer Zeile geschrieben werden und ist nicht viel schöner:

Hier müssen wir beginnen, von der mittleren Funktion zu den äußeren Funktionen zu lesen, oder von rechts nach links, was für das westliche Lesen von links nach rechts kontraintuitiv ist.

Der Pipeline-Operator kann diese Konstruktionen viel besser lesbar machen und der Verkettung ähneln, die wir ursprünglich hatten, bevor wir die Transformationen in separate Funktionen verschoben haben:

Jetzt werden die angewendeten Transformationen ähnlich wie in unserer Schreibweise geschrieben, von oben nach unten, sie sind klarer zu lesen, und wir haben keine herumbaumelnden Klammern. Erfolg!

Numerisches Trennzeichen

5 hochmoderne JavaScript-Funktionen zur Verbesserung Ihres Codes

Vorschlag: https://github.com/tc39/proposal-numeric-separator

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Dieses numerische Trennzeichen unterscheidet sich von den anderen JavaScript-Funktionen, da es kein Operator ist. Es handelt sich um eine Syntaxkonstruktion, die numerische Literale lesbarer macht, indem eine visuelle Trennung zwischen Zifferngruppen erstellt wird. Große numerische Literale sind schwer zu analysieren und schnell zu verstehen, insbesondere wenn eine Ziffer mehrmals wiederholt wird. Zum Beispiel:

const longNum = 1000000000000;

Auf den ersten Blick schwer zu verstehen. Dieses Trennzeichen macht es besser lesbar:

const longNum = 1_000_000_000_000;

Jetzt können wir schnell verstehen, dass dies eine Billion ist.

Ausdrücke machen

5 hochmoderne JavaScript-Funktionen zur Verbesserung Ihres Codes

Vorschlag: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

Die letzte der neuen JavaScript-Funktionen, die wir durchgehen werden, ist ein Ausdruck, der ausgewertet werden kann. Das Ergebnis dieses Ausdrucks kommt nach der Ausführung eines Blocks, der mehrere Anweisungen enthalten kann. Wir können Do-Ausdrücke leicht verstehen, wenn wir einen ternären Operatorausdruck wie diesen übersetzen:

const res = isCold( color )? 'light-blue': 'orange';

Wir würden den äquivalenten do{}Ausdruck wie folgt schreiben:

const res = do { if (isCold( color)) { 'light-blue'; } else { 'orange'; } };

Beachten Sie, dass wir den Wert nicht zurückgeben müssen, da dies keine Funktion ist. Während dies in diesem speziellen Fall prägnanter als Ternär geschrieben werden kann, sind die do-Ausdrücke viel mächtiger und ermöglichen mehrere Anweisungen, zum Beispiel:

const res = do { if (isCold( color)) { 'light-blue'; } else if (isHot( color)) { 'orange'; } else if (isRain( color)) { 'purple'; } else { 'green'; } };

Wo dies wirklich leistungsfähig ist, ist JSX, wo wir es mit seinen Tags mischen können, ohne das Ergebnis zuerst extern berechnen zu müssen. Zum Beispiel könnten wir Folgendes tun, wenn wir React verwenden würden, um diese Komponenten zu rendern:

Weitere JavaScript-Vorschläge

Jeden Tag werden weitere Vorschläge diskutiert, um der JavaScript-Sprache weitere interessante Funktionen hinzuzufügen. Eine ständig wachsende Liste dieser vorgeschlagenen JavaScript-Funktionen kann unter https://github.com/tc39/proposals#ecmascript-proposals gelesen werden. Die Vorschläge hier stehen kurz vor der Fertigstellung und stehen somit kurz vor der Aufnahme in den ECMAScript – Standard, wie in dieser Tabelle erläutert, die den Annahmeprozess beschreibt .

Einige der neuen JavaScript-Funktionen, die wir in diesem Artikel untersucht haben, wie die do-Ausdrücke oder der Pipeline-Operator, sind Vorschläge der Stufe 1, was bedeutet, dass sie noch einen weiten Weg vor sich haben, bevor sie Teil des ECMAScript-Standards werden.

Aufnahmequelle: startfunction.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen