Lernen Objektdestrukturierung für Übersichtlichere Code | Fortgeschrittene Techniken Zur Objektmanipulation

Objektdestrukturierung ist eine Funktion, die es ermöglicht, bestimmte Eigenschaften aus einem Objekt zu extrahieren und Variablen zuzuweisen. Dies führt zu einem prägnanteren und besser lesbaren Code, insbesondere beim Arbeiten mit Objekten, die mehrere Eigenschaften besitzen.

Verständnis der Objektdestrukturierung

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 steht.

Hier ist die grundlegende Syntax für die Objektdestrukturierung:

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

property1, property2 usw.: Dies sind die Variablennamen, denen die Werte der entsprechenden Eigenschaften aus sourceObject zugewiesen werden. Eigenschaften werden anhand des Eigenschaftsnamens und nicht der Reihenfolge destrukturiert. Die Reihenfolge spielt keine Rolle;
sourceObject: Das Objekt, aus dem die Eigenschaften extrahiert werden sollen.

Objekt-Destrukturierung in der Praxis

Betrachten wir ein Beispiel, in dem wir ein Objekt haben, das die Informationen einer Person repräsentiert:


              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

Nun können fullName, nationality und occupation als separate Variablen mit den entsprechenden Werten aus dem person-Objekt verwendet werden.

Standardwerte bereitstellen

Es können auch Standardwerte für Variablen angegeben werden, falls die Eigenschaft im Quellobjekt nicht vorhanden ist:


              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 Variablen birthDate der Wert "March 9, 1454" zugewiesen, falls das Objekt person keine Eigenschaft birthDate mit einem Wert besitzt.

Umbenennen von Variablen

Mit der :-Syntax können wir die Eigenschaftswerte Variablen mit anderen 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-Destrukturierung

Destrukturierung kann auch auf verschachtelte Objekte angewendet werden. Wenn ein Objekt beispielsweise weitere Objekte als Eigenschaften enthält, können wir die verschachtelten Eigenschaften destrukturieren:


              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 sowohl die Eigenschaften auf oberster Ebene wie name und profession als auch die verschachtelten Eigenschaften wie degree, university und graduationYear mittels Destrukturierung abgerufen werden.

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

Awesome!

Completion rate improved to 2.27

Swipe um das Menü anzuzeigen

Verständnis der Objektdestrukturierung

Hier ist die grundlegende Syntax für die Objektdestrukturierung:

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

property1, property2 usw.: Dies sind die Variablennamen, denen die Werte der entsprechenden Eigenschaften aus sourceObject zugewiesen werden. Eigenschaften werden anhand des Eigenschaftsnamens und nicht der Reihenfolge destrukturiert. Die Reihenfolge spielt keine Rolle;
sourceObject: Das Objekt, aus dem die Eigenschaften extrahiert werden sollen.

Objekt-Destrukturierung in der Praxis

Betrachten wir ein Beispiel, in dem wir ein Objekt haben, das die Informationen einer Person repräsentiert:


              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

Nun können fullName, nationality und occupation als separate Variablen mit den entsprechenden Werten aus dem person-Objekt verwendet werden.

Standardwerte bereitstellen

Es können auch Standardwerte für Variablen angegeben werden, falls die Eigenschaft im Quellobjekt nicht vorhanden ist:


              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 Variablen birthDate der Wert "March 9, 1454" zugewiesen, falls das Objekt person keine Eigenschaft birthDate mit einem Wert besitzt.

Umbenennen von Variablen

Mit der :-Syntax können wir die Eigenschaftswerte Variablen mit anderen 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-Destrukturierung


              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 für Übersichtlichere Code

Verständnis der Objektdestrukturierung

Objekt-Destrukturierung in der Praxis

Standardwerte bereitstellen

Umbenennen von Variablen

Verschachtelte Objekt-Destrukturierung

1. Was macht der folgende Code?

2. Wie können wir Standardwerte für Variablen beim Objekt-Destructuring angeben?

3. Wie können wir beim Objekt-Destructuring Variablen während der Zuweisung umbenennen?

Awesome!

Objektdestrukturierung für Übersichtlichere Code

Verständnis der Objektdestrukturierung

Objekt-Destrukturierung in der Praxis

Standardwerte bereitstellen

Umbenennen von Variablen

Verschachtelte Objekt-Destrukturierung

1. Was macht der folgende Code?

2. Wie können wir Standardwerte für Variablen beim Objekt-Destructuring angeben?

3. Wie können wir beim Objekt-Destructuring Variablen während der Zuweisung umbenennen?