Lernen Objektdestrukturierung | Fortgeschrittene Objektmanipulation

Objektdestrukturierung ist ein Feature, das es uns ermöglicht, spezifische Eigenschaften aus einem Objekt zu extrahieren und sie Variablen zuzuweisen. Dies kann zu prägnanterem und lesbarerem Code führen, insbesondere wenn man mit Objekten arbeitet, die mehrere Eigenschaften haben.

Verständnis der Objektdestrukturierung

Die Objektdestrukturierung ist eine Methode, um Werte aus Objekten in separate Variablen zu entpacken. Die Destrukturierung verwendet eine Syntax, die Objektliteralen ähnelt, jedoch auf der linken Seite einer Zuweisung.

Hier ist die grundlegende Syntax für die Objektdestrukturierung:

const { property1, property2, ...} = sourceObject;

property1, property2 und so weiter: Dies sind die Variablennamen, denen die Werte der entsprechenden Eigenschaften aus sourceObject zugewiesen werden. Eigenschaften aus dem Objekt werden nach Eigenschaftsnamen und nicht nach Reihenfolge destrukturiert. Die Reihenfolge spielt überhaupt keine Rolle;
sourceObject: Das Objekt, aus dem wir Eigenschaften extrahieren möchten.

Objekt-Destrukturierung in der Praxis

Betrachten wir ein Beispiel, bei dem wir ein Objekt haben, das die Informationen einer Person darstellt:


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Jetzt können wir fullName, nationality und occupation als separate Variablen mit den entsprechenden Werten aus dem Personenobjekt verwenden.

Standardwerte bereitstellen

Wir können auch Standardwerte für Variablen bereitstellen, falls die Eigenschaft im Quellobjekt nicht gefunden wird:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

In diesem Beispiel wird der birthDate-Variable der Wert "March 9, 1454" zugewiesen, wenn das Personenobjekt keine birthDate-Eigenschaft mit einem Wert hat.

Umbenennen von Variablen

Mit der :-Syntax können wir die Eigenschaftswerte Variablen mit unterschiedlichen Namen zuweisen. Zum Beispiel:


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Jetzt können wir die Variablen min und max anstelle von minTemperature und maxTemperature verwenden.

Verschachtelte Objekt-Dekonstruktion

Dekonstruktion kann auch auf verschachtelte Objekte angewendet werden. Wenn das Objekt beispielsweise Objekte als Eigenschaften enthält, können wir die verschachtelten Eigenschaften dekonstruktieren:


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

In diesem Beispiel können wir sowohl auf die Eigenschaften der obersten Ebene wie name und profession als auch auf die verschachtelten Eigenschaften wie degree, university und graduationYear mittels Dekonstruktion zugreifen.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 7

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Swipe um das Menü anzuzeigen

Verständnis der Objektdestrukturierung

Hier ist die grundlegende Syntax für die Objektdestrukturierung:

const { property1, property2, ...} = sourceObject;

property1, property2 und so weiter: Dies sind die Variablennamen, denen die Werte der entsprechenden Eigenschaften aus sourceObject zugewiesen werden. Eigenschaften aus dem Objekt werden nach Eigenschaftsnamen und nicht nach Reihenfolge destrukturiert. Die Reihenfolge spielt überhaupt keine Rolle;
sourceObject: Das Objekt, aus dem wir Eigenschaften extrahieren möchten.

Objekt-Destrukturierung in der Praxis

Betrachten wir ein Beispiel, bei dem wir ein Objekt haben, das die Informationen einer Person darstellt:


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Jetzt können wir fullName, nationality und occupation als separate Variablen mit den entsprechenden Werten aus dem Personenobjekt verwenden.

Standardwerte bereitstellen

Wir können auch Standardwerte für Variablen bereitstellen, falls die Eigenschaft im Quellobjekt nicht gefunden wird:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

In diesem Beispiel wird der birthDate-Variable der Wert "March 9, 1454" zugewiesen, wenn das Personenobjekt keine birthDate-Eigenschaft mit einem Wert hat.

Umbenennen von Variablen

Mit der :-Syntax können wir die Eigenschaftswerte Variablen mit unterschiedlichen Namen zuweisen. Zum Beispiel:


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Jetzt können wir die Variablen min und max anstelle von minTemperature und maxTemperature verwenden.

Verschachtelte Objekt-Dekonstruktion


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 7

Objektdestrukturierung

Verständnis der Objektdestrukturierung

Objekt-Destrukturierung in der Praxis

Standardwerte bereitstellen

Umbenennen von Variablen

Verschachtelte Objekt-Dekonstruktion

1. Was macht der folgende Code?

2. Wie können wir Standardwerte für Variablen in der Objektzerlegung bereitstellen?

3. Wie können wir in der Objektzerlegung Variablen während der Zuweisung umbenennen?

Awesome!

Objektdestrukturierung

Verständnis der Objektdestrukturierung

Objekt-Destrukturierung in der Praxis

Standardwerte bereitstellen

Umbenennen von Variablen

Verschachtelte Objekt-Dekonstruktion

1. Was macht der folgende Code?

2. Wie können wir Standardwerte für Variablen in der Objektzerlegung bereitstellen?

3. Wie können wir in der Objektzerlegung Variablen während der Zuweisung umbenennen?