JavaScript ES6-Funktionen: Die guten Teile

ES6 bietet einige coole neue Funktionsfunktionen, die die Programmierung in JavaScript wesentlich flexibler machen. Lassen Sie uns über einige davon sprechen - insbesondere über Standardparameter, Ruheparameter und Pfeilfunktionen.

Unterhaltsamer Tipp : Sie können jedes dieser Beispiele / Codes kopieren und in Babel REPL einfügenund Sie können sehen, wie ES6-Code auf ES5 übertragen wird.

Standardparameterwerte

JavaScript-Funktionen verfügen über eine einzigartige Funktion, mit der Sie während des Funktionsaufrufs eine beliebige Anzahl von Parametern übergeben können (tatsächliche Parameter), unabhängig von der Anzahl der in der Funktionsdefinition enthaltenen Parameter (formale Parameter). Sie müssen also Standardparameter einfügen, falls jemand vergisst, einen der Parameter zu übergeben.

Wie Standardparameter in ES5 implementiert werden würden

Das obige scheint in Ordnung zu sein, wenn wir es ausführen. number2wurde nicht übergeben und wir haben dies mit dem ||Operator ' ' überprüft , um den zweiten Operanden zurückzugeben, wenn der erste falsch ist. Daher wurde '10' als Standardwert zugewiesen, da dies nicht number2definiert ist.

Es gibt jedoch nur ein Problem. Was ist, wenn jemand als zweites Argument '0' übergibt? ⚠

Der obige Ansatz würde fehlschlagen, da unser Standardwert '10' anstelle des übergebenen Werts wie '0' zugewiesen würde. Warum? Weil '0' als falsch bewertet wird!

Lassen Sie uns den obigen Code verbessern, sollen wir?

Agh! Das ist zu viel Code. Überhaupt nicht cool. Mal sehen, wie ES6 das macht.

Standardparameter in ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1und number2erhalten Standardwerte von '5' bzw. '10'.

Nun ja, das ist so ziemlich alles. Kurz und bündig. Kein zusätzlicher Code, um nach einem fehlenden Parameter zu suchen. Dies macht den Körper der Funktion schön und kurz. ?

HINWEIS: Wenn ein Wert von undefinedfür einen Parameter mit Standardargument übergeben wird, ist der übergebene Wert erwartungsgemäß ungültig und der Standardparameterwert wird zugewiesen . Wenn nulles jedoch übergeben wird, wird es als gültig betrachtet und der Standardparameter wird nicht verwendet und diesem Parameter wird null zugewiesen.

Eine nette Funktion von Standardparametern ist, dass der Standardparameter nicht unbedingt ein primitiver Wert sein muss, und wir können auch eine Funktion ausführen, um den Standardparameterwert abzurufen. Hier ist ein Beispiel:

Vorherige Parameter können auch Standardparameter für die folgenden Parameter sein:

function multiply(first, second = first) { // do something here}

Aber die Umkehrung wird einen Fehler auslösen. Das heißt, wenn der zweite Parameter als Standardwert für den ersten Parameter zugewiesen wird, führt dies zu einem Fehler, da der zweite Parameter noch nicht definiert ist, während er dem ersten Parameter zugewiesen wird.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Ruheparameter

Ein Rest Parameter ist einfach ein benannter Parameter, der durch drei Punkte (...) vorangestellt ist. Dieser benannte Parameter wird zu einem Array, das den Rest der Parameter (dh abgesehen von den benannten Parametern) enthält, die während des Funktionsaufrufs übergeben wurden.

Denken Sie daran, dass es nur einen Ruheparameter geben kann und es der letzte Parameter sein muss. Wir können keinen benannten Parameter nach einem Ruheparameter haben.

Hier ist ein Beispiel:

Wie Sie sehen, haben wir den Parameter rest verwendet, um alle Schlüssel / Eigenschaften abzurufen, die aus dem übergebenen Objekt extrahiert werden sollen. Dies ist der erste Parameter.

Der Unterschied zwischen einem Ruheparameter und dem 'Argumentobjekt' besteht darin, dass letzterer alle tatsächlichen Parameter enthält, die während des Funktionsaufrufs übergeben wurden, während der 'Ruheparameter' nur die Parameter enthält, die keine benannten Parameter sind und während des Funktionsaufrufs übergeben werden.

Pfeilfunktionen ➡

Pfeilfunktionen oder „Fettpfeilfunktionen“ führen eine neue Syntax zum Definieren von Funktionen ein, die sehr präzise ist. Wir können Typisierung Schlüsselwörter wie vermeiden function, returnund sogar geschweiften Klammern { }und Klammern ().

Syntax

Die Syntax ist je nach Verwendung in verschiedenen Varianten erhältlich. Alle die Variationen eines haben gemeinsam , dh sie mit den beginnen Argumenten , gefolgt von dem Pfeil ( =>), gefolgt von t er funktioniert b ody.

Die Argumente und der Text können unterschiedliche Formen annehmen. Hier ist das grundlegendste Beispiel:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

Das obige Beispiel verwendet ein einzelnes Argument "Wert" (vor dem Pfeil) und gibt einfach dieses Argument ( => value;) zurück. Wie Sie sehen können , gibt es nur den Rückgabewert, sodass zum Zurückschließen des Funktionskörpers kein Schlüsselwort oder geschweifte Klammern erforderlich sind.

Da es nur ein Argument gibt, sind auch keine Klammern „()“ erforderlich .

Hier ist ein Beispiel mit mehr als einem Argument, um Ihnen das Verständnis zu erleichtern:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

Wenn es überhaupt keine Argumente gibt, müssen Sie leere Klammern wie folgt einfügen:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

Für einen Funktionskörper mit nur einer return-Anweisung sind geschweifte Klammern optional .

Für einen Funktionskörper mit mehr als nur einer return-Anweisung müssen Sie den Körper wie bei herkömmlichen Funktionen in geschweifte Klammern setzen.

Hier ist eine einfache Berechnungsfunktion mit zwei Operationen - Addieren und Subtrahieren. Sein Körper muss in geschweifte Klammern gewickelt sein:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

Was ist nun, wenn wir eine Funktion wollen, die einfach ein Objekt zurückgibt? Der Compiler wird verwirrt sein, ob die geschweiften Klammern des Objekts ( er}) oder die geschweiften Klammern des Funktionskörpers sind.()=>{id: numb

Die Lösung besteht darin, das Objekt in Klammern zu setzen. Hier ist wie:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"Pfeilfunktionen waren wie Raketentreibstoff für die Explosion der funktionalen Programmierung in JavaScript." - Eric Elliott

Na siehst du! Vielleicht ist es Zeit für Sie, diese Funktionen zu nutzen.

Solche ES6-Funktionen sind ein Hauch frischer Luft, und Entwickler lieben es einfach, sie zu verwenden.

Hier ist der Link zu meinem vorherigen Beitrag über Variablendeklarationen und Heben!

Ich hoffe, dies motiviert Sie, ES6 direkt einzusetzen, wenn Sie es noch nicht getan haben!

Frieden ✌️️