Eine Einführung in die Spread-Syntax in JavaScript

Was ist das und warum brauchen wir es?

Die Spread-Syntax wurde in die ES6-Spezifikation von JavaScript eingeführt. Es hat sich seitdem als wertvoller Code erwiesen, der den Code sauber und leicht verständlich macht.

MDN definiert als:

Mit der Spread-Syntax kann eine Iterable wie ein Array-Ausdruck oder eine Zeichenfolge an Stellen erweitert werden, an denen null oder mehr Argumente (für Funktionsaufrufe) oder Elemente (für Array-Literale) erwartet werden, oder ein Objektausdruck kann an Stellen erweitert werden, an denen null oder mehr vorhanden sind Schlüssel-Wert-Paare (für Objektliterale) werden erwartet.

Lassen Sie uns alle zustimmen, dass die obige Definition eine Handvoll ist und keiner von uns ein Wort verstanden hat, das er zu sagen versucht. Beginnen wir also mit den grundlegendsten Dingen der Spread-Syntax.

  • Der Spread-Operator ist nur 3 Punkte ...
  • Es kann für iterable Elemente wie ein Array oder eine Zeichenfolge verwendet werden.
  • Es erweitert eine iterable auf seine einzelnen Elemente
  • Es kann einen Funktionsaufruf mit einem Array (oder einem anderen iterierbaren Array) bereitstellen, bei dem 0 oder mehr Argumente erwartet wurden.

Beispiel

Das folgende Snippet enthält eine Funktion namens sum, die 3 Argumente x, y und z erwartet. Wir haben ein Array mit 3 Elementen und möchten die Elemente im Array als Argumente für die Funktion übergeben.

Bevor der Spread-Operator eingeführt wurde, erfolgte dies über die Apply-Funktion.

Nach der Einführung des Spread-Operators kann dies ganz einfach erfolgen:

Wie aus dem obigen Snippet mit dem Spread-Operator ersichtlich ist, müssen wir die Apply-Funktion nicht verwenden. Dies erspart uns das Schreiben von mehr Code.

Das obige Beispiel gibt eine sehr grobe und kurze Vorstellung vom Spread-Operator. Lassen Sie uns zunächst näher auf dasselbe eingehen, und dann werden wir weitere Beispiele sehen.

Syntax

Der Spread-Operator kann auf viele Arten und in verschiedenen Szenarien verwendet werden, z

  • Innerhalb von Funktionsaufrufen

Bei Verwendung im obigen Szenario wird der als Rest-Parameter bezeichnet. Beispiele hierzu finden Sie im Abschnitt Beispiele.

  • Erstellen / Erweitern eines Arrays / iterable:

Beispiele

  • Als Ruhe

… Wird als Argument für eine variadische Funktion verwendet. Eine variable Funktion ist eine Funktion, die eine variable Anzahl von Parametern haben kann.

Wenn wir hier Argumente zurückgeben, sehen wir, dass wir unser Array zurückerhalten, das wir im Aufruf als separate Werte übergeben haben. Dies zeigt, dass der Restoperator tatsächlich genau entgegengesetzt zur Spread-Syntax arbeitet. Man erweitert und man verdichtet den Wert.

Eine weitere Sache, die hervorgehoben werden muss, ist, dass in der Funktionsdefinition keine bestimmte Anzahl von Parametern erwähnt wird. Dies bedeutet, dass… die Funktion n Argumente haben kann. Wir müssen die Parameter nicht vorher angeben.

Dies ist insbesondere eine sehr flexible Methode zum Empfangen von Argumenten für eine Funktion, für die die spezifische Anzahl von Argumenten nicht wie bei den Funktionen Math.max und Math.min bestimmt wird. Sie sind verschiedene Funktionen, da die Anzahl der Eingaben für sie unendlich sein kann.

Zurück zum Beispiel, um die Summe aller Argumente zu erhalten

Wir müssen das Array iterieren und alle einzelnen Elemente hinzufügen, um das Ergebnis zu erzielen.

  • Elemente in einem Array verschieben

Die Funktion push () wird verwendet, um Elemente in ein Array zu verschieben. Die Einschränkung bei Push besteht darin, dass wir die Elemente einzeln verschieben müssen (push (1,2,3)). Wenn es ein Array gibt, dessen Elemente mit Push in das Array eingefügt werden sollen, erhalten wir ein mehrdimensionales Array, nach dem wir nicht gefragt haben.

Wieder auf die Rettung anwenden

Wie wir sehen können, sieht die Verwendung von apply nicht sehr elegant aus, und wir benötigen dazu eine einfache und kleine Syntax. Lasst uns verbreiten ...

Elegant!

  • Array kopieren

Einfach!

Das gleiche Ergebnis kann mit einem Objekt erzielt werden

  • Verkettung von 2 Arrays

Die Verkettung erfolgt mit der Concat-Funktion

Gleiches kann mit dem Operator… erreicht werden

  • Konvertieren einer Zeichenfolge in ein Array

Dies kann sowohl mit der Split-Funktion als auch mit dem Operator… erfolgen

  • Verwendung in Max- und Min-Funktionen

Das folgende Snippet neigt dazu, das maximale Element im Array zu finden, sodass wir das gesamte Array in der Funktion übergeben, aber das Ergebnis als NaN erhalten

Wir können anwenden verwenden, aber wie aus den vorherigen Beispielen hervorgeht, hasse ich es, es zu verwenden

Gleiches gilt für min

Fazit

Wir haben viele Situationen gesehen, in denen der Spread-Operator nützlich ist, unseren Code reduziert und das Verständnis sehr einfach macht.

Wenn es dir gefällt Klatschen? und folgen? für mehr.