JavaScript Destructuring Assignment
JavaScript Destructuring Assignment: Arrays und Objekte auspacken, Standardwerte setzen, Variablen umbenennen, verschachtelte Muster und Rest-Syntax verwenden, Variablen tauschen und Funktionsparameter destrukturieren.
Destructuring in JavaScript verstehen
Destructuring Assignment ist eine Syntax, mit der Sie Werte aus Arrays oder Eigenschaften aus Objekten in einer einzigen, kompakten Anweisung in einzelne Variablen auspacken können. Eingeführt in ES6 (ES2015), ersetzt sie den wiederholten Zugriff auf einzelne Eigenschaften und macht Code, der mit strukturierten Daten arbeitet, wesentlich lesbarer.
Ohne Destructuring schreibt man Code wie diesen:
Mit Destructuring passt dieselbe Absicht in eine einzige Zeile. Der Rest dieses Kapitels behandelt die Array- und Object-Formen, Standardwerte, Umbenennung, verschachtelte Muster, das Rest-Muster, das Tauschen von Variablen, Destructuring von Funktionsparametern und den häufigen ({ a } = {})-Fallstrick.
Array Destructuring: Elemente auspacken
Array Destructuring weist Array-Elemente anhand ihrer Position (Index) einzelnen Variablen zu. Die Variablen auf der linken Seite spiegeln die Reihenfolge der Werte auf der rechten Seite wider. Es ist besonders praktisch für Rückgabewerte von Funktionen und das Iterieren über Schlüssel-/Wert-Paare.
Einfaches Array Destructuring
Eine Variable ohne übereinstimmendes Element wird undefined, weshalb Standardwerte ins Spiel kommen (siehe unten).
Elemente überspringen und Standardwerte
Lassen Sie eine „Lücke" (einen leeren Slot zwischen Kommas), um Elemente zu überspringen, die Sie nicht benötigen. Fügen Sie = Wert hinzu, um einer Variablen einen Fallback zu geben, der nur verwendet wird, wenn der ausgepackte Wert undefined ist:
Da Destructuring bei jedem iterierbaren Objekt funktioniert, lässt es sich gut mit dem Rest-Muster kombinieren, um verbleibende Elemente zu sammeln:
Object Destructuring: Eigenschaften extrahieren
Object Destructuring bietet eine bequeme Möglichkeit, mehrere Eigenschaften aus Objekten zu extrahieren. Diese Technik kann die Verwaltung von Konfigurationsobjekten oder die Datenverarbeitung aus komplexen Strukturen verbessern.
Einfaches Object Destructuring
Im Gegensatz zu Arrays stimmt Object Destructuring nach Eigenschaftsname ab, nicht nach Position – die Reihenfolge der Schlüssel im Muster spielt daher keine Rolle.
Variablen umbenennen und Standardwerte setzen
Verwenden Sie die Syntax eigenschaftsName: neuerName, um eine Eigenschaft einer Variablen mit einem anderen Namen zuzuweisen – nützlich, wenn der Eigenschaftsname mit einer vorhandenen Variablen kollidiert oder kein gültiger Bezeichner ist. Standardwerte funktionieren genauso wie bei Arrays:
Sie können gleichzeitig umbenennen und einen Standardwert angeben mit eigenschaft: neuerName = Standard:
Fortgeschrittene Destructuring-Techniken
Fortgeschrittenes Destructuring umfasst verschachtelte Strukturen und die Verwendung des Rest-Parameters zum Zusammenfassen verbleibender Eigenschaften oder Elemente.
Verschachteltes Destructuring
Muster können verschachtelt werden, um gleichzeitig tief in Objekte und Arrays einzutauchen. Die Form des Musters spiegelt einfach die Form der Daten wider:
Beachten Sie, dass size: und items: hier keine Variablen sind – sie sind nur der Pfad in die Struktur. Nur width, height, item1 und item2 werden zu Variablen.
Das Rest-Muster verwenden
Das Rest-Muster (...name) fasst alle verbleibenden, nicht destrukturierten Eigenschaften in einem neuen object zusammen. Lesen Sie mehr unter Rest Parameters und Spread Syntax:
Praktische Anwendungen von Destructuring
Destructuring erweist sich in verschiedenen praktischen Anwendungen als unschätzbar wertvoll, wie etwa:
- Variablen tauschen: Vereinfacht den Austausch von Werten zwischen Variablen.
- Verwaltung von Funktionsparametern: Verbessert den Umgang mit mehreren Parametern, insbesondere bei Funktionen mit zahlreichen optionalen Parametern.
Variablen tauschen
Destructuring tauscht zwei Werte ohne eine temporäre Variable. Das Array auf der rechten Seite wird zuerst aufgebaut und dann in die Variablen auf der linken Seite ausgepackt:
Funktionsparameter
Das Destrukturieren eines Parameters ermöglicht es einer Funktion, ein „Options-Objekt" entgegenzunehmen und benannte Einstellungen mit sinnvollen Standardwerten herauszuziehen – wesentlich übersichtlicher als eine lange, reihenfolgeabhängige Parameterliste. Das abschließende = {} ermöglicht es dem Aufrufer, das Argument vollständig wegzulassen:
Erfahren Sie mehr über Parameter im Kapitel JavaScript Functions.
Der ({ a } = {})-Fallstrick
Wenn Sie eine vorhandene Variable destrukturieren (nicht in einer const/let-Deklaration), müssen Sie die Anweisung in Klammern einschließen. Andernfalls liest JavaScript das führende { als Beginn eines Codeblocks, nicht als object-Muster, und wirft einen Syntaxfehler:
Die Klammern werden nur beim Object Destructuring in bereits deklarierte Variablen benötigt. Array Destructuring ([a, b] = [1, 2]) hat dieses Problem nicht, da [ nie einen Anweisungsblock beginnt.
Ein verwandter Fallstrick: Wenn sowohl die Variable als auch ihr Standardwert aus einer möglicherweise fehlenden Quelle stammen, geben Sie dem gesamten Parameter einen Standardwert von {} (wie in drawChart oben). Ohne ihn wirft der Aufruf der Funktion ohne Argument einen Fehler, da Sie keine Eigenschaft von undefined lesen können.
Fazit
JavaScript Destructuring ist eine leistungsstarke Funktion, die lesbareren, prägnanteren und wartbareren Code ermöglicht. Durch die Übernahme dieses Ansatzes können Entwickler Daten effizient aus Arrays und Objekten extrahieren, was zu saubereren und effektiveren Codestrukturen führt.