In diesem Tutorial lernen Sie anhand von Beispielen die JavaScript-Destrukturierungszuweisung kennen.
JavaScript-Destrukturierung
Die in ES6 eingeführte Destrukturierungszuweisung erleichtert das Zuweisen von Array-Werten und Objekteigenschaften zu verschiedenen Variablen. Zum Beispiel
vor ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Von ES6:
// assigning object attributes to variables const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Hinweis : Die Reihenfolge des Namens spielt bei der Objektzerstörung keine Rolle.
Zum Beispiel könnten Sie das obige Programm schreiben als:
let ( age, gender, name ) = person; console.log(name); // Sara
Hinweis : Bei der Destrukturierung von Objekten sollten Sie für die Variable denselben Namen wie für den entsprechenden Objektschlüssel verwenden.
Beispielsweise,
let (name1, age, gender) = person; console.log(name1); // undefined
Wenn Sie dem Objektschlüssel unterschiedliche Variablennamen zuweisen möchten, können Sie Folgendes verwenden:
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // using different variable names let ( name: name1, age: age1, gender:gender1 ) = person; console.log(name1); // Sara console.log(age1); // 25 console.log(gender1); // female
Array-Destrukturierung
Auf ähnliche Weise können Sie auch die Array-Destrukturierung durchführen. Beispielsweise,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, y, z) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Standardwerte zuweisen
Sie können die Standardwerte für Variablen während der Destrukturierung zuweisen. Beispielsweise,
let arrValue = (10); // assigning default value 5 and 7 let (x = 5, y = 7) = arrValue; console.log(x); // 10 console.log(y); // 7
Im obigen Programm hat arrValue nur ein Element. Daher,
- Die x-Variable ist 10
- Die Variable y nimmt den Standardwert 7 an
Bei der Objektzerstörung können Sie Standardwerte auf ähnliche Weise übergeben. Beispielsweise,
const person = ( name: 'Jack', ) // assign default value 26 to age if undefined const ( name, age = 26) = person; console.log(name); // Jack console.log(age); // 26
Variablen austauschen
In diesem Beispiel werden zwei Variablen mithilfe der Destrukturierungszuweisungssyntax ausgetauscht.
// program to swap variables let x = 4; let y = 7; // swapping variables (x, y) = (y, x); console.log(x); // 7 console.log(y); // 4
Elemente überspringen
Sie können unerwünschte Elemente in einem Array überspringen, ohne sie lokalen Variablen zuzuweisen. Beispielsweise,
const arrValue = ('one', 'two', 'three'); // destructuring assignment in arrays const (x, , z) = arrValue; console.log(x); // one console.log(z); // three
Im obigen Programm wird das zweite Element unter Verwendung des Komma-Trennzeichens weggelassen ,.
Weisen Sie einer einzelnen Variablen verbleibende Elemente zu
Sie können die verbleibenden Elemente eines Arrays mithilfe der Spread-Syntax einer Variablen zuweisen … . Beispielsweise,
const arrValue = ('one', 'two', 'three', 'four'); // destructuring assignment in arrays // assigning remaining elements to y const (x,… y) = arrValue; console.log(x); // one console.log(y); // ("two", "three", "four")
Hier onewird der Variablen x zugeordnet. Der Rest der Array-Elemente wird der Variablen y zugewiesen.
Sie können den Rest der Objekteigenschaften auch einer einzelnen Variablen zuweisen. Beispielsweise,
const person = ( name: 'Sara', age: 25, gender: 'female' ) // destructuring assignment // assigning remaining properties to rest let ( name,… rest ) = person; console.log(name); // Sara console.log(rest); // (age: 25, gender: "female")
Hinweis : Die Variable mit der Spread-Syntax darf kein abschließendes Komma haben ,. Sie sollten dieses Rest-Element (Variable mit Spread-Syntax) als letzte Variable verwenden.
Beispielsweise,
const arrValue = ('one', 'two', 'three', 'four'); // throws an error const (… x, y) = arrValue; console.log(x); // eror
Verschachtelte Destrukturierungszuweisung
Sie können eine verschachtelte Destrukturierung für Array-Elemente durchführen. Beispielsweise,
// nested array elements const arrValue = ('one', ('two', 'three')); // nested destructuring assignment in arrays const (x, (y, z)) = arrValue; console.log(x); // one console.log(y); // two console.log(z); // three
Hier werden den Variablen y und z verschachtelte Elemente twound zugewiesen three.
Um die verschachtelte Destrukturierungszuweisung auszuführen, müssen Sie die Variablen in eine Array-Struktur einschließen (indem Sie sie einschließen ()).
Sie können auch eine verschachtelte Destrukturierung für Objekteigenschaften durchführen. Beispielsweise,
const person = ( name: 'Jack', age: 26, hobbies: ( read: true, playGame: true ) ) // nested destructuring const (name, hobbies: (read, playGame)) = person; console.log(name); // Jack console.log(read); // true console.log(playGame); // true
Um die verschachtelte Destrukturierungszuweisung für Objekte auszuführen, müssen Sie die Variablen in eine Objektstruktur einschließen (indem Sie sie einschließen ()).
Hinweis : Die Funktion zur Zuweisung von Destruktionen wurde in ES6 eingeführt . Einige Browser unterstützen möglicherweise nicht die Verwendung der Destrukturierungszuweisung. Besuchen Sie den Javascript Destructuring-Support, um mehr zu erfahren.
