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: