Destrukturierung
Bei der Destrukturierung werden Properties eines object oder Elemente eines array mithilfe eines Musters Variablen zugewiesen. Das ursprüngliche object oder array bleibt unverändert. Wir verwenden diese Bestellung:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
Ein object grundlegend destrukturieren
Die Namen in {} wählen gleichnamige Properties aus dem Wert rechts aus. Dabei entstehen zwei neue Konstanten.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
Die Ausgabe lautet zuerst lida, dann tea. Das ist eine Kurzform für order.guest und order.drink; aus order wird nichts entfernt.
Umbenennen und Standardwert setzen
Mit property: variable erhält die Variable einen anderen Namen. Der Wert nach = wird nur verwendet, wenn die Property undefined ist.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer erhält lida. Weil size fehlt, erhält size den Wert regular. Eine Variable namens guest wird dabei nicht angelegt.
Verschachtelte Property lesen
Ein verschachteltes Muster folgt dem Aufbau des object. { city } liest city aus order.address.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
Die Ausgabe ist rasht; eine Variable address entsteht nicht. Fehlt address oder ist es undefined, kann das Lesen von city einen Fehler auslösen. Optional Chaining kann nicht in dieses Muster geschrieben werden; prüfe oder normalisiere den Wert vorher.
Ein array destrukturieren
Eckige Klammern ordnen nach Position zu. Die erste Variable erhält Index 0, die zweite Index 1.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
Ausgegeben werden mint und lemon. Die Variablennamen sind frei wählbar, der Wert richtet sich nach der Position. order.extras bleibt unverändert.
Destrukturierung im Funktionsparameter
Eine Funktion kann das empfangene object direkt in der Parameterliste zerlegen. Hier werden nur guest und drink benötigt.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
Der Aufruf liefert lida ordered tea. Das Parametermuster wird beim Aufruf angewendet; null oder undefined führt ohne passende Behandlung zu einem Fehler.
Vollständige Seitendemo
Die Seite kombiniert object-, array- und Parameter-Destrukturierung und zeigt die Bestellübersicht an.
<!doctype html>
<html lang="de">
<head><meta charset="utf-8"><title>JavaScript Destrukturierung</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
Die sichtbare Ausgabe lautet exakt lida / tea / mint. Die Funktion liest nur die benötigten Daten und verändert order nicht.
include_try
Benenne drink in beverage um und gib der fehlenden Property table einen Standardwert. Teste danach eine Bestellung ohne address und prüfe sie vor dem verschachtelten Muster.
mistakes
Verwechsle Property- und Variablennamen nicht. Standardwerte ersetzen kein null, und ein verschachteltes object ist nicht garantiert vorhanden. {} passt zu Properties, [] zu array-Positionen; die Quelle bleibt unverändert. Rest und Spread folgen in spread-rest.
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt