Destructuring und Spread von Objekten
Extrahieren Sie Objekteigenschaften per Destructuring, klonen und verbinden Sie Objekte mit dem Spread-Operator und verwenden Sie Rest-Parameter in Funktionssignaturen.
Destructuring und Spread von Objekten ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Destructuring?
Destructuring extrahiert Werte aus Objekten und Arrays in benannte Variablen. Es ist eine Kurzschreibweise für mehrere Eigenschaftszugriffe und macht den Code kompakt. Außerdem wird klar ersichtlich, welche Eigenschaften verwendet werden.
Grundlagen des Object-Destructuring
Verwenden Sie auf der linken Seite einer Zuweisung geschweifte Klammern, um benannte Eigenschaften zu extrahieren.
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30Destrukturierte Variablen umbenennen
Verwenden Sie beim Destructuring die Syntax property: newName, um eine Eigenschaft umzubenennen. Das ist nützlich, wenn der Eigenschaftsname mit einer bereits vorhandenen Variablen kollidiert oder nicht aussagekräftig genug ist.
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'Standardwerte beim Destructuring
Wenn eine Eigenschaft undefined ist, wird ein Standardwert verwendet. Kombinieren Sie dies mit dem Umbenennen.
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)Verschachteltes Object-Destructuring
Destrukturieren Sie verschachtelte Objekte, indem Sie verschachtelte Muster angeben.
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'Array-Destructuring
Verwenden Sie eckige Klammern, um Arrays anhand ihrer Position zu destrukturieren. Überspringen Sie Elemente mit Kommas.
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1Destructuring von Funktionsparametern
Destrukturieren Sie Parameter direkt in Funktionsdefinitionen, um sauberere APIs und selbstdokumentierenden Code zu erhalten. Das ist bei React-Komponentenfunktionen sehr üblich.
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'Der Spread-Operator bei Objekten
Der Spread-Operator { ...obj } erstellt eine flache Kopie eines Objekts und kann Objekte zusammenführen. Bei übereinstimmenden Schlüsseln überschreiben spätere Schlüssel die früheren.
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }Der Spread-Operator bei Arrays
[...arr] erstellt eine flache Kopie eines Arrays. Verwenden Sie Spread, um Arrays zu verketten und Elemente unveränderlich am Anfang oder Ende hinzuzufügen.
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]Rest-Syntax beim Destructuring
Die Rest-Syntax sammelt die übrigen Eigenschaften oder Elemente in einem neuen Objekt oder Array. Rest muss das letzte Muster sein.
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]Flache und tiefe Kopien
Sowohl Spread als auch Destructuring erstellen flache Kopien. Verschachtelte Objekte und Arrays bleiben weiterhin gemeinsam verwendete Referenzen. Erstellen Sie eine tiefe Kopie mit structuredClone(obj) (modern) oder JSON.parse(JSON.stringify(obj)) (legacy).
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)Schnelltest
Was bewirkt const { a, ...rest } = obj?
Zusammenfassung: Destructuring und Spread
Object-Destructuring extrahiert benannte Eigenschaften. Array-Destructuring extrahiert Werte anhand ihrer Position. Benennen Sie mit einem Doppelpunkt um und legen Sie mit = Standardwerte fest. Verwenden Sie verschachtelte Muster für tief verschachtelte Objekte. Spread erstellt flache Kopien und führt Objekte oder Arrays zusammen. Rest sammelt die übrigen Eigenschaften oder Elemente.
Häufig gestellte Fragen
Ist die Lektion „Destructuring und Spread von Objekten“ kostenlos?
Ja — der vollständige Text von „Destructuring und Spread von Objekten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Destructuring und Spread von Objekten“?
Extrahieren Sie Objekteigenschaften per Destructuring, klonen und verbinden Sie Objekte mit dem Spread-Operator und verwenden Sie Rest-Parameter in Funktionssignaturen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Destructuring und Spread von Objekten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Array-Methoden: map, filter, reduce, find
- Destructuring und Spread von Objekten
- Template Literals und Optional Chaining
- Module: import und export