Was ist Spread Syntax in JavaScript | Mit Beispielen erklärt

JavaScript veröffentlichte mit der Veröffentlichung des ES6 JavaScript im Jahr 2015 viele Funktionen, eines der Funktionen, die neu für JavaScript waren, der Spread -Operator. Der Spread-Operator hat einen ähnlichen Kenner wie die Restparameter, was der Triple-Dot ist "..." Vor dem variablen Namen.

Der Spread Operator (…)

Die Dreifachkennung, wenn sie vor einem variablen Namen in einem Argument verwendet werden. Das Spread -Argument bricht das iterable Objekt (Array oder eine Zeichenfolge) und gibt es an die Argumente weiter.

Syntax

(… Variablennamen)

Um den Unterschied zwischen normaler variabler Ausgabe und der Ausbreitungsvariablen zu verstehen, sehen Sie sich die folgende Abbildung an:

Wie die Ausbreitung mit der Konsole funktioniert.Protokoll()

Um die grundlegende Funktionalität des Spread -Operators zu verstehen, werden Sie einfach ein String -Objekt erstellen und es in die übergeben Konsole.Protokoll() Funktion. Verwenden Sie anschließend den Spread Operator, um ihn in die zu übergeben Konsole.Protokoll() Untersuchung des Verhaltens des Spread -Operators:

String = "Google";
Konsole.log ("Normales Syntax Ergebnis:"+ String)
Konsole.log ("Spread Syntax -Ergebnis:");
Konsole.log (… String);

Sie erhalten die folgende Ausgabe, wenn Sie den obigen Code -Snippet ausführen:

Der Pfeil zeigt auf die normale Saitenausgabe und das rote Rechteck schließt die Ausgabe der Spread -Syntax ein. Sie können Lücken zwischen jedem Zeichen der Ausgangssyntaxausgabe der Spread -Syntax feststellen.

Übergeben von Spread -Syntax in Argumenten einer Funktion

Der gesamte Zweck der Spread -Syntax und des Spread -Operators besteht darin, die Spread -Argumente zu erstellen und sie innerhalb der Funktion zu übergeben. Um dies zu demonstrieren, erstellen Sie eine Funktion, die 5 Argumente aufnimmt und das Ergebnis der Werte, die in den Argumenten mit den folgenden Codezeilen übergeben wurden, gedruckt werden:

Funktion printsum (a, b, c, d, e)
Konsole.log (a+b+c+d+e);

Sie erstellen ein Array mit 5 Ganzzahlwerten mit der folgenden Zeile:

Zahlen = [1,2,3,4,5];

Für den letzten Schritt werden Sie diese Funktion mit den Spread -Argumenten aufrufen und in die übergeben Zahlen Array mit der Spread -Syntax wie ein einzelnes Argument mit der folgenden Zeile:

Printsum (… Zahlen);

Der komplette Ausschnitt wäre:

Funktion printsum (a, b, c, d, e)
Konsole.log (a + b + c + d + e);

Zahlen = [1, 2, 3, 4, 5, 6];
Printsum (… Zahlen);

Nachdem Sie den Code ausgeführt haben, erhalten Sie die folgende Ausgabe:

Alle Elemente innerhalb des Nummernarrays wurden als individuelle Argumente an die Funktion übergeben, und dann wurde jedes Argument auf der Konsole gedruckt.

Aber was ist, wenn Ihr Zahlenarray mehr Elemente als die Argumente der Funktion hat?; Nun, in diesem Fall werden nur die ersten 5 Elemente des Arrays verwendet, und andere werden verworfen, wodurch ein Fehler verhindert wird.

Um dies zu zeigen, nehmen Sie die oben genannte Funktion und geben Sie das folgende Array darin weiter:

Array:

Zahlen = [3,52,6,7,1,3,5,3,1,5,3,6,7,3,5,6,3,2,2];

Durch die Verwendung des folgenden Befehls:

Printsum (… Zahlen);

Sie sehen das folgende Ergebnis auf der Konsole:

Sie können sehen, obwohl wir mehr Elemente innerhalb des Arrays hatten, die mit der Spread -Syntax in die Argumentationsliste übergeben wurden, wurden die zusätzlichen Elemente alle verworfen, und deshalb haben wir keine Fehler bekommen.

Wie man Arrays mit Spread verkettet?

Wir können sogar die Spread -Syntax oder den Spread -Operator verwenden, um Arrayelemente mit anderen Elementen zu verkettet, indem wir das gesamte Array innerhalb eines einzelnen Elements übergeben.

Array1 = [2, 3, 4, 5, 6, 6, 7, 7];
Array2 = [1, 10, 2, 44, 66, 22, 11, 33, 56];
FinalArray = [… Array1,… Array2];
Konsole.log (FinalArray);

Sie erhalten die folgende Ausgabe:

Sie können sehen, dass die FinallArray hat beide die Array1 Und Array2 verkettete sich darin und wir gaben nur zwei Elemente im „Finalarray“.

Das gilt für die Spread -Syntax in JavaScript.

Abschluss

Die Spread -Syntax wurde in JavaScript als neues Feature mit der Veröffentlichung von ES6 eingeführt. Spread -Syntax oder allgemein bekannt als das Spread -Argument wird verwendet, um die Elemente eines iterbaren Objekts zu erweitern -: Array oder String - über eine Liste von Argumenten einer Funktion, indem jedes Element individuell übergeben wird. Diese Funktionalität der ES6 JavaScript -Programmiersprache ermöglicht den Umgang mit bestimmten Szenarien, in denen Sie mehr Argumente haben als die Parameter der Funktion. Der Spread -Operator kann auch verwendet werden, um Elemente des Arrays zu verkettet, das wir mit Hilfe eines Beispiels untersucht haben.