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: Variablennamen, die die Werte aus dem Objekt aufnehmen;
sourceObject: das Objekt, aus dem Eigenschaften extrahiert werden;
Die Reihenfolge spielt keine Rolle: Eigenschaften werden anhand ihres Namens zugeordnet.

Objektdestrukturierung in der Praxis


              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 sind fullName, nationality und occupation eigenständige Variablen, die ihre jeweiligen Werte enthalten.

Standardwerte zuweisen

Falls das Objekt eine Eigenschaft nicht enthält, kann ein Standardwert zugewiesen werden:


              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

Falls birthDate fehlt, wird der Standardwert verwendet.

Umbenennen von Variablen

Extrahierte Variablen können mit der :-Syntax umbenannt werden.


              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

Dies ist nützlich, wenn kürzere Namen die Lesbarkeit verbessern oder Namenskonflikte vermieden werden sollen.

Verschachtelte Objekt-Destrukturierung

Auch Eigenschaften innerhalb verschachtelter Objekte können destrukturiert werden.


              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

Sowohl oberflächliche als auch tief verschachtelte Werte können in einem einzigen, übersichtlichen Ausdruck extrahiert 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

Swipe um das Menü anzuzeigen

Verständnis der Objektdestrukturierung

Hier ist die grundlegende Syntax für die Objektdestrukturierung:

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

property1, property2: Variablennamen, die die Werte aus dem Objekt aufnehmen;
sourceObject: das Objekt, aus dem Eigenschaften extrahiert werden;
Die Reihenfolge spielt keine Rolle: Eigenschaften werden anhand ihres Namens zugeordnet.

Objektdestrukturierung in der Praxis


              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 sind fullName, nationality und occupation eigenständige Variablen, die ihre jeweiligen Werte enthalten.

Standardwerte zuweisen

Falls das Objekt eine Eigenschaft nicht enthält, kann ein Standardwert zugewiesen werden:


              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

Falls birthDate fehlt, wird der Standardwert verwendet.

Umbenennen von Variablen

Extrahierte Variablen können mit der :-Syntax umbenannt werden.


              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

Dies ist nützlich, wenn kürzere Namen die Lesbarkeit verbessern oder Namenskonflikte vermieden werden sollen.

Verschachtelte Objekt-Destrukturierung

Auch Eigenschaften innerhalb verschachtelter Objekte können destrukturiert werden.


              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

Sowohl oberflächliche als auch tief verschachtelte Werte können in einem einzigen, übersichtlichen Ausdruck extrahiert werden.

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 7

Objektdestrukturierung für Übersichtlichere Code

Verständnis der Objektdestrukturierung

Objektdestrukturierung in der Praxis

Standardwerte zuweisen

Umbenennen von Variablen

Verschachtelte Objekt-Destrukturierung

1. Was bewirkt der folgende Code?

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

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

Objektdestrukturierung für Übersichtlichere Code

Verständnis der Objektdestrukturierung

Objektdestrukturierung in der Praxis

Standardwerte zuweisen

Umbenennen von Variablen

Verschachtelte Objekt-Destrukturierung

1. Was bewirkt der folgende Code?

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

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