w3docs logo

JavaScript Destructuring Zuweisung

Objekt und Array sind die zwei häufig verwendeten Datenstrukturen von JavaScript.

Mit Hilfe der Objekte können Sie eine Entität erstellen, die Datenelemente nach Schlüssel speichert. Mit Hilfe der Arrays können Sie Datenelemente in einer geordneten Sammlung zusammenfügen.

Wenn Sie diese an eine Funktion weitergeben, benötigt diese möglicherweise nicht das gesamte Objekt oder Array, sondern einzelne Teile davon.

Die wörtlichen Ausdrücke des Objekts und des Arrays ermöglichen das Erstellen von ad hoc Paketen. Hier ist die Syntax:

const x = [1, 2, 3, 4, 5];

Die Destructuring Zuweisung ist eine einzigartige Syntax, die dabei hilft, Objekte oder Arrays in eine Gruppe von Variablen “auszupacken”. Destructuring kann auch effizient mit komplexen Funktionen, Standardwerten und mehr umgehen.

Die Destructuring Zuweisung verwendet die folgende Syntax:

Javascript arrays destructuring
const x = [1, 2, 3, 4, 5]; const [y, z] = x; console.log(y); // 1 console.log(z); // 2

Ähnliche Funktionen finden Sie auch in anderen Sprachen. Zum Beispiel in Python oder Perl.

Jetzt werfen wir einen Blick auf das Beispiel der Array-Destrukturierung in Variablen:

Javascript arrays destructuring
// we have an array with the name and surname let arr = ["John", "Doe"]; // destructuring assignment // sets firstname = arr[0] // and surname = arr[1] let [firstname, surname] = arr; console.log(firstname); // John console.log(surname); // Doe

Das Ergebnis ist, dass Sie mit Variablen anstelle von Array-Mitgliedern arbeiten können.

Es wird noch besser funktionieren, wenn Sie es mit split oder anderen Methoden für Array-Rückgabewerte kombinieren:

let [firstName, surname] = "John Doe".split(' ');

Beachten Sie, dass Destructuring nicht dasselbe ist wie “destruktiv”.

Wir nennen es Destructuring, da es durch die Methode des Kopierens von Elementen in Variablen “destrukturiert”.

Hier ist eine kürzere Art zu schreiben:

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

Bedenken Sie, dass Sie unerwünschte Elemente durch ein zusätzliches Komma wegwerfen können, so wie dies:

Javascript arrays destructuring
// second element is not needed let [name, age , profession] = ["David", "23", "programmer"]; console.log(profession); // programmer

Es kann mit jedem Iterable auf der rechten Seite arbeiten:

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

Außerdem können Sie auf der linken Seite alle Zuweisbaren verwenden.

Zum Beispiel, die Eigenschaft eines Objekts:

Javascript arrays destructuring
let user = {}; [user.name, user.surname] = "John Doe".split(' '); console.log(user.name); // John

Eine weitere nützliche Sache ist, dass es möglich ist, die Methode Object.entries(obj) mit der Destrukturierung zu verwenden, um über Schlüssel und Werte eines Objekts zu iterieren.

Hier ist ein Beispiel:

Javascript object entries method with destructuring
let user = { name: "Maria", age: 25 }; // loop over keys-and-values for (let [key, value] of Object.entries(user)) { console.log(`${key}:${value}`); // name:Maria, then age:25 }

The rest ‘…’

Falls es notwendig ist, nicht nur die ersten Werte zu erhalten, sondern auch alle folgenden zusammenzufassen, haben Sie die Möglichkeit, einen weiteren Parameter für das Abrufen von “dem Rest” hinzuzufügen, indem Sie einfach drei Punkte “…” verwenden, so wie dies:

Javascript arrays rest
let [name1, name2, ...rest] = ["John", "Doe", "doctor", "surgeon"]; console.log(name1); // John console.log(name2); // Doe // Note that type of `rest` is Array. console.log(rest[0]); // doctor console.log(rest[1]); // surgeon console.log(rest.length); // 2

Standardwerte

Falls es im Array weniger Werte gibt als Variablen in der Zuweisung, wird kein Fehler auftreten. Die fehlenden Werte werden als undefiniert angesehen:

Javascript arrays rest
let [firstName, surname] = []; console.log(firstName); // undefined console.log(surname); // undefined

Wenn Sie einen Standardwert für den Ersatz des fehlenden Wertes verwenden möchten, verwenden Sie das Zeichen =, wie folgt:

Javascript arrays rest
// default values let [name = "David", surname = "Smith"] = ["Peter"]; console.log(name); // Peter (from array) console.log(surname); // Smith (default used)

Destructuring eines Objekts

Sie können die Destructuring Zuweisung auch mit Objekten verwenden, indem Sie die folgende grundlegende Syntax verwenden:

let {  var1,  var2} = {  var1: …,  var2: …}

Auf der rechten Seite gibt es ein existierendes Objekt, das in Variablen aufgeteilt werden muss. Auf der linken Seite befindet sich ein Muster für das Kombinieren der Eigenschaften. Das Zeichen mit drei Punkten {...} enthält eine Gruppe von Variablennamen.

Hier ist ein Beispiel:

Javascript arrays destructuring an object
let options = { title: "Car", model: "BMW M5", year: 2020 }; let { title, model, year } = options; console.log(title); // Car console.log(model); // BMW M5 console.log(year); // 2020

Die Eigenschaften options.title, options.width und options.height werden den entsprechenden Variablen zugewiesen. Die Anordnung spielt keine Rolle. Diese Option funktioniert auch:

// changed the order in let {...}
let {
  year,
  model,
  title
} = {
  title: "Car",
  model: "BMW M5",
  year: 2020
}

Um eine Eigenschaft einer Variable mit einem anderen Namen zuzuweisen, können Sie wie folgt vorgehen:

Javascript arrays destructuring an object
let options = { title: "Car", model: "BMW M5", year: 2020 }; // { sourceProperty: targetVariable } let { model: m, year: y, title } = options; // width -> m // height -> y // title -> title console.log(title); // Car console.log(m); // BMW M5 console.log(y); // 2020

Für möglicherweise fehlende Eigenschaften haben Sie die Möglichkeit, Standardwerte mit dem Zeichen “=” festzulegen, wie folgt:

Javascript arrays destructuring an object
let options = { title: "Car" }; let { model = "BMW M5", year = 2020, title } = options; console.log(title); // Car console.log(model); // BMW M5 console.log(year); // 2020

Die Standardwerte können beliebige Ausdrücke oder Funktionsaufrufe sein.

Falls es ein komplexes Objekt mit einer Reihe von Eigenschaften gibt, können Sie auswählen, was Sie benötigen, wie folgt:

Javascript arrays destructuring an object
let options = { title: "Car", model: "BMW M5", year: 2020 }; // only extract title as a variable let { title } = options; console.log(title); // Car

The Rest Pattern “…”

Ein weiteres Szenario kann auch passieren: Die Anzahl der Objekteigenschaften ist größer als die Variablen, die Sie haben. In solchen Fällen können Sie das Restmuster verwenden. Aber beachten Sie, dass es nur in modernen Browsern funktioniert.

Hier ist das Beispiel:

Javascript arrays destructuring an object
let options = { title: "Book", page: 200, species : "scientific" }; // title = property named title // rest = object with the rest of properties let { title, ...rest } = options; // now title="Book", rest={page: 200, species: scientific} console.log(rest.page); // 200 console.log(rest.species); // scientific

Verschachtelte Destrukturierung

Stellen Sie sich vor, dass ein Array oder ein Objekt andere verschachtelte Arrays oder Objekte enthält. Komplexere linke Muster können verwendet werden, um tiefere Teile zu extrahieren.

In dem Beispiel unten enthält options ein weiteres Objekt in der Eigenschaft views und ein Array in der Eigenschaft items:

Javascript arrays nested destructuring an object
let options = { views: { model: "sport", year: 2020 }, items: ["Car", "Bike"], extra: true }; // destructuring assignment split in multiple lines for clarity let { views: { // put size here model, year }, items: [item1, item2], // assign items here title = "Car&Bike" // not present in the object (default value is used) } = options; console.log(title); // Car&Bike console.log(model); // sport console.log(year); // 2020 console.log(item1); // Car console.log(item2); // Bike

Es ist wichtig zu wissen, dass alle Eigenschaften des options Objekts mit Ausnahme von extra (es fehlt auf der linken Seite), den passenden Variablen zugewiesen werden.

Also, die model, year, item1, item2, and title sind vom gleichen Wert. Aber, es existieren keine Variablen für views und items.

Die Parameter der Smart Funktion

Manchmal hat eine Funktion viele Parameter, und die meisten davon sind optional. Aber sehen wir uns an, dass eine Funktion ein Menü erstellt. Sie wird eine Höhe, Breite, Artikelliste, einen Titel und mehr haben.

Wir empfehlen Ihnen nicht, die Funktion so zu schreiben:

function showBook(title = "Javascript", page = 200,  species : "programming"
, items = []) {
  // ...
}

Das Hauptproblem besteht darin, sich die Reihenfolge der Argumente zu merken. Ein weiteres Problem ist es, eine Möglichkeit zu finden, eine Funktion aufzurufen, wenn die meisten Parameter standardmäßig gut sind.

Die am meisten optionale Aktion besteht darin, Parameter als ein Objekt zu übergeben. Die Funktion wird sie sofort in eine Variable destrukturieren, so wie dies:

Javascript arrays
// we pass object to function let options = { title: "Js book", items: ["Item1", "Item2"] }; function showBook({ title = "Javascript", pages = 200, species = "programming", items = [] }) { // title, items – taken from options, // pages, species – defaults used console.log(`${title} ${species} ${pages}`); // Javascript programming 200 console.log(items); // Item1, Item2 } showBook(options);

Es gibt eine andere, komplexere Art der Destrukturierung, einschließlich verschachtelter Objekte und Doppelpunkt-Zuordnungen.

Zum Beispiel:

Javascript arrays
let options = { title: "Js book" }; function showBook({ title = "Javascript", p = 200, //pages goes to p s = "programming", // species goes to s }) { console.log(`${title} ${s} ${p}`); // Javascript programming 200 } showBook(options);

Die vollständige Syntax sieht so aus:

function ({
  incomingProperty: varName = defaultValue
    ...
})

Wie Sie sehen können, ist es dasselbe wie bei einer Destrukturierungszuweisung.

Dann gibt es für das Parameterobjekt eine Variable varName für incomingProperty.

So eine Destrukturierung berücksichtigt, dass showBook() kein Argument hat. Wenn Sie alle Werte standardmäßig haben möchten, dann geben Sie ein leeres Objekt an, so wie dies:

showBook({}); // ok, all values are default
showBook(); // this would give an error

Es ist möglich, dies zu beheben, indem man {} den Standardwert das Parametersobjekt setzt.

Zum Beispiel:

Javascript arrays
function showBook({ title = "Book", species = "programming", pages = 200 } = {}) { console.log(`${title} ${species} ${pages}`); } showBook(); // Book programming 200

Quizzeit: Testen Sie Ihre Fähigkeiten!

Sind Sie bereit, das Gelernte herauszufordern? Tauchen Sie ein in unsere interaktiven Quizze für ein tieferes Verständnis und eine unterhaltsame Art, Ihr Wissen zu festigen.

Finden Sie das nützlich?