Javascript-Spread-Operator

Michael Zippo 04.11.2021

AvaScript Spread Operator erweitert ein Array in der Syntax, die Argumente akzeptiert. Der Spread-Operator wird h√§ufig verwendet, um Objekte zu duplizieren, Arrays zusammenzufuhren oder den Inhalt einer Liste an eine Funktion zu ubergeben.

Der Spread-Operator. Nein, das hat nichts mit Toast zu tun. In JavaScript hat der Spread-Operator eine besondere Bedeutung: Er ist eine M√∂glichkeit, auf den Inhalt eines iterierbaren Objekts zuzugreifen. Das klingt vielleicht nicht so lustig wie das Einfugen eines Brotaufstrichs auf Toast, aber es ist ein unglaublich nutzliches Werkzeug, das Sie kennen sollten.

In diesem Leitfaden werden wir uber den JavaScript-Spread-Operator und seine Funktionsweise sprechen. Wir werden einige Beispiele g√§ngiger Anwendungsf√§lle durchgehen, um Ihnen den Einstieg zu erleichtern.

Was ist der JavaScript-Spread-Operator?

Mit einem JavaScript-Spread-Operator k√∂nnen Sie auf den Inhalt einer iterierbares Objekt. Der Spread-Operator besteht aus drei Punkten (einer Ellipse), gefolgt vom Namen des Iterables, auf das Sie zugreifen m√∂chten. Dieser Operator wurde in JavaScript ES6 eingefuhrt.

Die drei Typen iterierbarer Objekte sind Arrays, Objektliterale und Strings. Mit einer for-Schleife k√∂nnen Sie alle diese Datentypen durchlaufen und einen gemeinsamen Prozess fur sie ausfuhren.

Iterierbare Objekte sind nutzlich, da Sie denselben Prozess mehrmals ausfuhren k√∂nnen. Sie k√∂nnen einen String durchlaufen und bestimmte Zeichen ersetzen. Sie k√∂nnen ein Array durchlaufen und eine Summe aller im Array gespeicherten Werte erstellen.

Die Syntax fur den Spread-Operator lautet:

In dieser Syntax verwenden wir ‚Ä¶names, um den Inhalt unserer "Namen‚" list in eine Liste namens "new_names‚". Die "neue_namen‚" Liste enth√§lt alle Elemente in der Liste "Namen‚" list, sowie einen neuen Namen: Leslie.

Drei h√§ufige Anwendungsf√§lle fur den Spread-Operator sind:

Erstellen einer Kopie eines Iterables.
Hinzufugen von Elementen zu einem neuen Iterable.
√úbergeben Sie eine Liste von Argumenten an eine Funktion.

Die Spread-Syntax stellt alle einzelnen Elemente in einer Liste dar.

Spread-Operator JavaScript: Create a Kopie eines Iterables

Der Spread-Operator ist eine effektive Methode zum Duplizieren eines Iterables. Es gibt zwar andere M√∂glichkeiten, dieses Problem anzugehen, aber der Spread-Operator ist wirklich einfach zu verwenden. So erstellen Sie eine Kopie eines Iterables , geben Sie drei Punkte und den Namen des zu erstellenden Arrays an.

In unserem letzten Beispiel haben wir gezeigt, wie dies mit einem Array funktioniert. Wir k√∂nnen auch den Spread-Operator verwenden, um JavaScript-Objekte zu duplizieren:

Unser Code gibt Folgendes an die JavaScript-Konsole aus:

Da sind einige wichtige Unterscheidungen, die wir in diesem Beispiel machen mussen. Wir erstellen eine Kopie eines JavaScript-Objekts. Das bedeutet, dass wir geschweifte Klammern ({}) anstelle von eckigen Klammern ([]) verwenden mussen.

Zweitens haben wir statt eines einzelnen Arrays ein Objekt angegeben. Dieses Objekt enth√§lt drei Schlussel und Werte, die sich jeweils auf unseren "Lemon Drizzle‚" cupcake.

Die Anwendungsf√§lle des Spread-Operators h√∂ren nicht mit dem Kopieren von Iterables auf! Es gibt noch mehr zu entdecken. Der Spread-Operator wird h√§ufig verwendet, um Elemente von einem iterierbaren zum n√§chsten hinzuzufugen. Betrachten Sie das folgende Beispiel:

Unser Code gibt Folgendes zuruck:

Wir haben eine Kopie unseres Originals erstellt < ein href="/javascript-array/">JavaScript-Array namens "new_cupcakes‚", das auch einige zus√§tzliche Werte enth√§lt, die wir erstellt haben.

Sie k√∂nnen die gleiche Syntax auch verwenden, um zwei Iterables zusammenzufuhren. Alles, was Sie tun mussen, ist die beiden Iterablen in eckigen Klammern mit dem Spread-Operator anzugeben:

Unser Code gibt zuruck:

Dasselbe Ergebnis wird zuruckgegeben wie zuvor, aber dieses Mal haben wir zwei Arrays zusammengefuhrt.

JavaScript verbreiten: Argumente an eine Funktion ubergeben

Wenn Sie mehrere Argumente an eine JavaScript-Funktion ubergeben, kann es hilfreich sein, den Spread-Operator zu verwenden. Betrachten Sie dieses Beispiel:

Unser Code gibt Folgendes zuruck:

Wir haben eine Funktion namens placeOrder(), das drei Argumente aufnimmt und an die Konsole ausgibt. Jedem Wert geht ein Label voraus, das beschreibt, was jedes Argument enth√§lt.

Obwohl dieser Code funktionsf√§hig ist, k√∂nnten wir unsere Argumente in einem Array angeben und den Spread-Operator verwenden, um sie an unsere Funktion zu ubergeben:

Unser Code gibt zuruck:

Javascript-Spread-Operator

Was ist der JavaScript-Spread-Operator?

Spread-Operator JavaScript: Create a Kopie eines Iterables

JavaScript verbreiten: Argumente an eine Funktion ubergeben

Schlussfolgerung