8.1 Destrukturierung von Objekten
Destrukturierung in JavaScript ist ein Syntax, der es ermöglicht, Werte aus Arrays oder Eigenschaften aus Objekten in separate Variablen zu entpacken. Das macht den Code sauberer und lesbarer. In dieser Vorlesung werden wir die Destrukturierung von Objekten und Arrays im Detail besprechen, sowie verschiedene Beispiele und deren Anwendung.
1. Grundsyntax
Die Destrukturierung von Objekten ermöglicht es, Werte von Objekteigenschaften zu extrahieren und Variablen zuzuweisen:
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // Gibt aus: John
console.log(age); // Gibt aus: 30
console.log(isStudent); // Gibt aus: false
2. Zuweisung an neue Variablen
Man kann die Werte der Eigenschaften eines Objekts Variablen mit anderen Namen zuweisen:
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // Gibt aus: John
console.log(personAge); // Gibt aus: 30
3. Standardwerte
Wenn eine Eigenschaft im Objekt nicht existiert, kann man Standardwerte festlegen:
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // Gibt aus: true
4. Verschachtelte Destrukturierung
Man kann Werte aus verschachtelten Objekten extrahieren:
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // Gibt aus: New York
console.log(country); // Gibt aus: USA
5. Destrukturierung in Funktionsparametern
Die Destrukturierung kann in den Parametern einer Funktion verwendet werden:
function greet({ name, age }) {
console.log(`Hallo, ich heiße ${name} und bin ${age} Jahre alt.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // Gibt aus: Hallo, ich heiße John und bin 30 Jahre alt.
8.2 Destrukturierung von Arrays
1. Grundsyntax
Die Destrukturierung von Arrays ermöglicht es, Werte von Array-Elementen zu extrahieren und Variablen zuzuweisen:
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // Gibt aus: apple
console.log(second); // Gibt aus: banana
console.log(third); // Gibt aus: cherry
2. Elemente überspringen
Man kann Array-Elemente überspringen, die man nicht extrahieren möchte:
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // Gibt aus: apple
console.log(third); // Gibt aus: cherry
3. Standardwerte
Man kann Standardwerte für Array-Elemente festlegen:
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // Gibt aus: banana
4. Verschachtelte Destrukturierung
Man kann Werte aus verschachtelten Arrays extrahieren:
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // Gibt aus: 2
console.log(three); // Gibt aus: 3
5. Destrukturierung in Funktionsparametern
Die Destrukturierung kann in den Parametern einer Funktion für Arrays verwendet werden:
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // Gibt aus: John Doe
8.3 Anwendungsbeispiele der Destrukturierung
1. Austausch von Variablenwerten
Die Destrukturierung ermöglicht es, Variablenwerte einfach auszutauschen:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // Gibt aus: 2
console.log(b); // Gibt aus: 1
2. Extraktion von Daten aus Objekten
Die Destrukturierung vereinfacht die Extraktion von Daten aus Objekten, z.B. aus einer API-Antwort:
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // Gibt aus: John Doe
console.log(email); // Gibt aus: john@example.com
3. Standardwerte in Funktionen
Die Destrukturierung ermöglicht es, Standardwerte für Funktionsparameter einfach festzulegen:
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// Gibt aus: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// Gibt aus: { name: 'Anonymous', age: 0, isAdmin: false }
4. Arrays und Funktionen
Die Destrukturierung vereinfacht die Arbeit mit Arrays, besonders bei der Verwendung von Array-Methoden:
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // Gibt aus: 1
console.log(second); // Gibt aus: 2
console.log(rest); // Gibt aus: [3, 4, 5]
GO TO FULL VERSION