Der Autor hat den COVID-19 Relief Fund dazu ausgewählt, eine Spende im Rahmen des Programms Write for DOnations zu erhalten.
Seit der Ausgabe 2015 der ECMAScript-Spezifikation wurden der JavaScript-Sprache viele neue Funktionalitäten für die Arbeit mit Arrays und Objekten zur Verfügung gestellt. Einige der bemerkenswerten, die Sie in diesem Artikel kennenlernen, sind Destrukturierung, Rest-Parameter und Spread-Syntax. Diese Funktionalitäten bieten direkte Zugriffsmöglichkeiten auf die Elemente eines Arrays oder Objekts und können das Arbeiten mit diesen Datenstrukturen schneller und prägnanter machen.
Viele andere Sprachen verfügen nicht über die entsprechende Syntax für Destrukturierung, Rest-Parameter und Spread. Daher können diese Funktionalitäten sowohl für neue JavaScript-Entwickler als auch für Entwickler aus einer anderen Sprache eine Lernkurve aufweisen. In diesem Artikel erfahren Sie, wie Sie Objekte und Arrays destrukturieren, wie Sie den Spread-Operator zum Auspacken von Objekten und Arrays verwenden und wie Sie Rest-Parameter in Funktionsaufrufen nutzen.
Die Destrukturierungszuweisung ist eine Syntax, mit der Sie Objekteigenschaften oder Array-Elemente als Variablen zuweisen können. Dadurch können die zur Manipulation von Daten in diesen Strukturen erforderlichen Codezeilen erheblich reduziert werden. Es gibt zwei Arten von Destrukturierung: Objekt-Destrukturierung und Array-Destrukturierung.
Mit der Objekt-Destrukturierung können Sie neue Variablen mit einer Objekteigenschaft als Wert erstellen.
Betrachten Sie dieses Beispiel eines Objekts, das eine Notiz mit einer id
, einem title
und einem date
darstellt:
Bisher mussten Sie zur Erstellung einer neuen Variable für jede Eigenschaft jede Variable mit einer Vielzahl von Wiederholungen einzeln zuweisen:
Mit der Objekt-Destrukturierung kann das alles in einer Zeile erfolgen. Durch Umgeben der Variablen mit geschweiften Klammern {}
erstellt JavaScript aus jeder Eigenschaft neue Variablen mit dem gleichen Namen:
Protokollieren Sie nun die neuen Variablen mit console.log()
:
Sie erhalten die ursprünglichen Eigenschaftswerte als Ausgabe:
Output1
My first note
01/01/1970
Anmerkung: Das Destrukturieren eines Objekts ändert das ursprüngliche Objekt nicht. Sie könnten immer noch die ursprüngliche note
mit all ihren Einträgen aufrufen.
Die Standardzuweisung für die Objekt-Destrukturierung erstellt neue Variablen mit dem gleichen Namen wie die Objekteigenschaft. Wenn Sie nicht möchten, dass der Name der neuen Variable und der Eigenschaftsname gleich sind, können Sie die neue Variable auch umbenennen. Verwenden Sie dazu einen Doppelpunkt (:
), um einen neuen Namen festzulegen, wie im Folgenden mit noteId
zu sehen ist:
Protokollieren Sie die neue Variable noteId
in der Konsole:
Sie erhalten die folgende Ausgabe:
Output1
Sie können auch geschachtelte Objektwerte destrukturieren. Aktualisieren Sie beispielsweise das note
-Objekt, um ein geschachteltes author
-Objekt zu erhalten:
Sie können nun note
destrukturieren und dann zur Erstellung von Variablen aus den author
-Eigenschaften erneut destrukturieren:
Als Nächstes protokollieren Sie die neuen Variablen firstName
und lastName
unter Verwendung von Template-Buchstabensymbolen:
Dadurch erhalten Sie folgenden Output:
OutputSherlock Holmes
Beachten Sie, dass Sie in diesem Beispiel zwar Zugriff auf den Inhalt des author
-Objekts haben, das author
-Objekt selbst jedoch nicht zugänglich ist. Um auf ein Objekt und seine geschachtelten Werte zuzugreifen, müssten Sie sie getrennt deklarieren:
Dieser Code gibt das author
-Objekt aus:
Output{firstName: "Sherlock", lastName: "Holmes"}
Die Destrukturierung eines Objekts ist nicht nur nützlich, um die Menge des zu schreibenden Codes zu reduzieren, sondern ermöglicht es Ihnen auch, gezielt auf die Eigenschaften zuzugreifen, die Ihnen wichtig sind.
Zu guter Letzt kann Destrukturierung verwendet werden, um auf die Objekteigenschaften primitiver Werte zuzugreifen. Beispielsweise ist String ein globales Objekt für Zeichenfolgen und hat eine length
-Eigenschaft:
Dadurch wird die inhärente Längeneigenschaft einer Zeichenfolge gefunden und der length
-Variablen gleichgesetzt. Protokollieren Sie length
, um zu sehen, ob dies funktioniert:
Sie erhalten folgende Ausgabe:
Output8
Die Zeichenfolge A string
wurde hier implizit in ein Objekt konvertiert, um die length
-Eigenschaft abzurufen.
Mit der Array-Destrukturierung können Sie neue Variablen mit einem Array-Element als Wert erstellen. Betrachten Sie dieses Beispiel eines Arrays mit den verschiedenen Teilen eines Datums:
Arrays in JavaScript behalten garantiert ihre Reihenfolge bei, sodass in diesem Fall der erste Index immer ein Jahr ist, der zweite ein Monat, und so weiter. Mit diesem Wissen können Sie Variablen aus den Elementen im Array erstellen:
Doch dies manuell auszuführen kann viel Platz in Ihrem Code beanspruchen. Mit der Array-Destrukturierung können Sie die Werte aus dem Array der Reihe nach entpacken und sie so ihren eigenen Variablen zuweisen:
Protokollieren Sie nun die neuen Variablen:
Sie erhalten folgende Ausgabe:
Output1970
12
01
Werte können übersprungen werden, indem die Destrukturierungssyntax zwischen Kommas leer gelassen wird:
Das Ausführen ergibt den Wert von year
und day
:
Output1970
01
Auch geschachtelte Arrays können destrukturiert werden. Erstellen Sie zuerst ein geschachteltes Array:
Destrukturieren Sie dann dieses Array und protokollieren Sie die neuen Variablen:
Sie erhalten die folgende Ausgabe:
Output1 2 3 4 5
Die Destrukturierungssyntax kann zur Destrukturierung der Parameter in einer Funktion angewendet werden. Um das zu testen, destrukturieren Sie die keys
und values
aus Object.entries()
.
Zuerst deklarieren Sie das note
-Objekt:
Bei diesem Objekt könnten Sie die Schlüssel-Wert-Paare auflisten, indem Sie Argumente bei der Übergabe an die forEach()
-Methode destrukturieren:
Sie können dasselbe mit einer for
-Schleife erreichen:
In beiden Fällen erhalten Sie Folgendes:
Outputid: 1
title: My first note
date: 01/01/1970
Objekt-Destrukturierung und Array-Destrukturierung können in einer einzigen Destrukturierungszuweisung kombiniert werden. Auch Standardparameter können mit Destrukturierung verwendet werden, wie in diesem Beispiel, das das Standarddatum auf new Date () festlegt
.
Zuerst deklarieren Sie das note
-Objekt:
Destrukturieren Sie dann das Objekt, wobei Sie auch eine neue date
-Variable mit der Standardeinstellung von new Date()
festlegen:
console.log(date)
gibt dann eine ähnliche Ausgabe wie die folgende aus:
OutputFri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)
Wie in diesem Abschnitt gezeigt wird, verleiht die Syntax der Destrukturierungszuweisung JavaScript eine große Flexibilität und ermöglicht Ihnen, prägnanteren Code zu schreiben. Im nächsten Abschnitt sehen Sie, wie die Spread-Syntax zur Erweiterung von Datenstrukturen in ihren einzelnen Dateneinträgen genutzt werden kann.
Die Spread-Syntax (...
) ist eine weitere hilfreiche Ergänzung zu JavaScript zum Arbeiten mit Arrays, Objekten und Funktionsaufrufen. Spread ermöglicht das Entpacken oder Erweitern von Objekten und Iterablen (wie beispielsweise Arrays), wodurch flache Kopien von Datenstrukturen erstellt werden können, um die Datenmanipulation zu vereinfachen.
Spread kann allgemeine Aufgaben mit Arrays vereinfachen. Nehmen wir zum Beispiel an, Sie haben zwei Arrays und möchten diese kombinieren:
Ursprünglich würden Sie concat()
verwenden, um die beiden Arrays zu verketten:
Sie können nun auch Spread verwenden, um die Arrays in ein neues Array zu entpacken:
Diese Ausführung würde Folgendes ergeben:
Output["hammer", "screwdriver", "wrench", "saw"]
Das kann bei Unveränderlichkeit besonders hilfreich sein. Sie könnten beispielsweise mit einer App arbeiten, die users
in einem Array von Objekten gespeichert hat:
Sie könnten push
verwenden, um das bestehende Array zu ändern und einen neuen Benutzer hinzuzufügen, was die veränderbare Option wäre:
Das ändert jedoch das user
-Array, das wir möglicherweise erhalten möchten.
Mit Spread können Sie ein neues Array aus dem bestehenden erstellen und am Ende ein neues Element hinzufügen:
Das neue Array, updatedUsers
, hat den neuen Benutzer, aber das ursprüngliche users
-Array bleibt unverändert:
Output[{id: 1, name: "Ben"}
{id: 2, name: "Leslie"}]
[{id: 1, name: "Ben"}
{id: 2, name: "Leslie"}
{id: 3, name: "Ron"}]
Das Erstellen von Datenkopien anstelle der Änderung vorhandener Daten kann helfen, unerwartete Änderungen zu verhindern. Wenn Sie in JavaScript ein Objekt oder Array erstellen und einer anderen Variable zuweisen, erstellen Sie nicht tatsächlich ein neues Objekt – Sie übergeben eine Referenz.
Nehmen Sie dieses Beispiel, in dem ein Array erstellt und einer anderen Variable zugewiesen wird:
Das Entfernen des letzten Elements des zweiten Arrays ändert das erste:
Dadurch erhalten Sie folgende Ausgabe:
Output["one", "two"]
Mit Spread können Sie eine flache Kopie eines Arrays oder Objekts erstellen. Das bedeutet, dass alle Eigenschaften der oberen Ebene geklont, geschachtelte Objekte jedoch weiterhin per Referenz übergeben werden. Bei einfachen Arrays oder Objekten kann eine flache Kopie völlig ausreichen.
Wenn Sie den gleichen Beispielcode schreiben, aber das Array mit Spread kopieren, wird das originale Array nicht mehr geändert:
Das Folgende wird in der Konsole protokolliert:
Output["one", "two", "three"]
Spread kann auch zur Konvertierung eines set oder jeder anderen iterable in ein Array verwendet werden.
Erstellen Sie ein neues Set und fügen Sie diesem einige Einträge hinzu:
Verwenden Sie als Nächstes den Spread-Operator mit set
und protokollieren Sie die Ergebnisse:
Dadurch ergibt sich Folgendes:
Output["octopus", "starfish", "whale"]
Das kann auch nützlich sein, um ein Array aus einer Zeichenfolge zu erstellen:
Dadurch wird ein Array mit jedem Zeichen als Element in dem Array ausgegeben:
Output["h", "e", "l", "l", "o"]
Beim Arbeiten mit Objekten kann Spread zum Kopieren und Aktualisieren von Objekten genutzt werden.
Ursprünglich wurde Object.assign()
zum Kopieren eines Objekts genutzt:
Das secondObject
ist nun ein Klon des originalObject
.
Dies wird mit der Spread-Syntax vereinfacht – Sie können ein Objekt flach kopieren, indem Sie es in ein neues verteilen:
Dadurch ergibt sich Folgendes:
Output{enabled: true, darkMode: false}
Genau wie bei Arrays wird auch hier nur eine flache Kopie erstellt, und verschachtelte Objekte werden weiterhin per Referenz übergeben.
Das Hinzufügen oder Ändern von Eigenschaften an einem bestehenden Objekt auf unveränderliche Weise wird mit Spread vereinfacht. In diesem Beispiel wird die Eigenschaft isLoggedIn
dem user
-Objekt hinzugefügt:
Dadurch wird Folgendes ausgegeben:
Output{id: 3, name: "Ron", isLoggedIn: true}
Beim Aktualisieren von Objekten über Spread ist es wichtig, zu beachten, dass auch jedes geschachtelte Objekt verteilt werden muss. Nehmen wir zum Beispiel an, dass sich im user
-Objekt ein geschachteltes organization
-Objekt befindet:
Wenn Sie versuchen würden , ein neues Element zu organization
hinzuzufügen, würde das die bestehenden Felder überschreiben:
Dadurch würde sich Folgendes ergeben:
Outputid: 3
name: "Ron"
organization: {position: "Director"}
Wenn Veränderlichkeit kein Problem ist, könnte das Feld direkt aktualisiert werden:
Da wir aber eine unveränderliche Lösung suchen, können wir das innere Objekt verteilen, um die bestehenden Eigenschaften zu erhalten:
Dadurch ergibt sich Folgendes:
Outputid: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}
Spread kann auch mit Argumenten in Funktionsaufrufen genutzt werden.
Als Beispiel sehen Sie hier eine multiply
-Funktion, die drei Parameter nimmt und sie multipliziert:
Normalerweise würden sie drei Werte individuell als Argumente an den Funktionsaufruf wie folgt übergeben:
Dies würde Folgendes ergeben:
Output6
Wenn jedoch alle Werte, die Sie an die Funktion übergeben möchten, bereits in einem Array vorhanden sind, können Sie mit der Spread-Syntax jedes Element in einem Array als Argument verwenden:
Dies führt zum gleichen Ergebnis:
Output6
Anmerkung: Ohne Spread kann dies durch Verwendung von apply()
erreicht werden:
Dies ergibt:
Output6
Nachdem Sie nun gesehen haben, wie Spread Ihren Code verkürzen kann, können Sie sich eine andere Verwendung der Syntax ...
anstehen: Rest-Parameter.
Die letzte Funktionalität, die Sie in diesem Artikel kennenlernen, ist die Rest-Parameter-Syntax. Die Syntax entspricht der von Spread (...
), hat aber den gegenteiligen Effekt. Statt ein Array oder Objekt in einzelne Werte zu entpacken, erstellt die Rest-Syntax ein Array mit einer indefiniten Anzahl von Argumenten.
Wenn wir beispielsweise in der Funktion restTest
wollten, dass args
ein Array aus einer indefiniten Anzahl von Argumenten ist, könnten wir Folgendes haben:
Alle Argumente, die an die Funktion restTest
übergeben werden, sind nun im args
-Array verfügbar:
Output[1, 2, 3, 4, 5, 6]
Die Rest-Syntax kann als einziger Parameter oder als letzter Parameter in der Liste genutzt werden. Wenn sie als einziger Parameter genutzt wird, wird sie alle Argumente sammeln. Wenn sie am Ende einer Liste steht, wird sie jedes verbleibende Argument so wie in diesem Beispiel sammeln:
Dadurch werden die ersten beiden Argumente einzeln aufgeführt und dann die restlichen in ein Array gruppiert:
Output1
2
[3, 4, 5, 6]
In älterem Code könnte die Variable arguments
genutzt werden, um alle Argumente zu sammeln, die durch eine Funktion übergeben werden:
Dadurch ergäbe sich folgende Ausgabe:
[secondary_label Output]1
Arguments(3) ["how", "many", "arguments"]
Das hat jedoch einige Nachteile. Erstens kann die Variable arguments
nicht mit Pfeilfunktionen verwendet werden.
Das würde einen Fehler ergeben:
OutputUncaught ReferenceError: arguments is not defined
Außerdem ist arguments
kein echtes Array und kann Methoden wie map
und filter
nicht verwenden, ohne zuerst in ein Array konvertiert zu werden. Es sammelt außerdem alle übergebenen Argumente statt nur die verbleibenden Argumente, wie sie im Beispiel restTest(one, two, ...args)
zu sehen sind.
Rest kann auch bei der Destrukturierung von Arrays verwendet werden:
Dies ergibt:
Outputhammer
["screwdriver", "wrench"]
Rest kann auch bei der Destrukturierung von Objekten genutzt werden:
Mit der folgenden Ausgabe:
Outputtrue
{id: 1, name: "Ben"}
Auf diese Weise bietet die Rest-Syntax effiziente Methoden zur Erfassung einer unbestimmten Anzahl von Elementen.
In diesem Artikel haben Sie Destrukturierung, Spread-Syntax und Rest-Parameter kennengelernt. Kurz gefasst:
Destrukturierung, Rest-Parameter und Spread-Syntax sind nützliche Funktionalitäten in JavaScript, die dazu beitragen, Ihren Code prägnant und sauber zu halten.
Wenn Sie die Destrukturierung in Aktion sehen möchten, werfen Sie einen Blick auf Anpassen von React-Komponenten mit Props, das diese Syntax verwendet, um Daten zu destrukturieren und sie an benutzerdefinierte Frontend-Komponenten zu übergeben. Wenn Sie mehr über JavaScript erfahren möchten, kehren Sie zu unserer Seite mit der Serie Codieren in JavaScript zurück.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!