JavaScript-Deconstruction

Deconstruction-Zuweisungsnotation

Die Deconstruction-Zuweisungsnotation packt Objektattribute in Variablen ein:

let {firstName, lastName} = person;

Es kann auch Arrays und andere iterierbare Objekte entpacken:

let [firstName, lastName] = person;

Objekt-Deconstruction

Beispiel

// Ein Objekt wird erstellt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Dekomposition
let {firstName, lastName} = person;

Probieren Sie es selbst aus

Die Reihenfolge der Attribute ist irrelevant:

Beispiel

// Ein Objekt wird erstellt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Dekomposition
let {lastName, firstName} = person;

Probieren Sie es selbst aus

Objektstandardwerte

Für möglicherweise fehlende Attribute können wir Standardwerte setzen:

Beispiel

// Ein Objekt wird erstellt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Dekomposition
let {firstName, lastName, country = "US"} = person;

Probieren Sie es selbst aus

Objektattributnamen

Beispiel

// Ein Objekt wird erstellt
const person = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Dekomposition
let {lastName: name} = person;

Probieren Sie es selbst aus

String-Deconstruction

Eine Anwendung der Deconstruction ist das Entpacken von Stringzeichen.

Beispiel

// Ein String wird erstellt
let name = "W3Schools";
// Dekomposition
let [a1, a2, a3, a4, a5] = name;

Probieren Sie es selbst aus

Array-Deconstruction

Wir können Arrayvariablen in eigene Variablen extrahieren:

Beispiel

// Ein Array erstellen
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Dekomposition
let [fruit1, fruit2] = fruits;

Probieren Sie es selbst aus

Überspringen von Arraywerten

Wir können zwei oder mehr Kommas verwenden, um Arraywerte zu überspringen:

Beispiel

// Ein Array erstellen
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Dekomposition
let [fruit1,,,fruit2] = fruits;

Probieren Sie es selbst aus

Array-Positionswerte

Wir können Werte von einer bestimmten Indexposition des Arrays extrahieren:

Beispiel

// Ein Array erstellen
const fruits = ["Bananas", "Oranges", "Apples", "Mangos"];
// Dekomposition
let {[0]: fruit1, [1]: fruit2} = fruits;

Probieren Sie es selbst aus

Resteigenschaften

Man kann Resteigenschaften am Ende der Destrukturausschreibung verwenden.

Diese Syntax speichert alle verbleibenden Werte in einem neuen Array: }}

Beispiel

// Ein Array erstellen
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Dekomposition
const [a, b, ...rest] = numbers;

Probieren Sie es selbst aus

Map dekonstruieren

Beispiel

// Ein Map erstellen
const fruits = new Map([
  ["äpfel", 500],
  ["bananas", 300],
  
]
// Dekomposition
let text = "";
for (const [key, value] of fruits) {
  text += key + " ist " + value;
}

Probieren Sie es selbst aus

Umschaltung von JavaScript-Variable

Man kann den Wert zweier Variablen mithilfe der Dekompositionszuweisung austauschen:

Beispiel

let firstName = "Bill";
let lastName = "Gates";
// Dekomposition
[firstName, lastName] = [lastName, firstName];

Probieren Sie es selbst aus