Detaillierte Erklärung der Destrukturierungszuweisungssyntax in Javascript

Vorwort

Die erstmals in ES6 eingeführte „Destructuring Assignment Syntax“ ermöglicht das Einfügen von Werten aus Arrays und Objekten in unterschiedliche Variablen. Obwohl es schwierig aussehen mag, ist es eigentlich sehr einfach zu erlernen und anzuwenden.

Die Syntax der Destrukturierungszuweisung ist ein JS-Ausdruck. ES6 ermöglicht es, Werte aus Arrays und Objekten zu extrahieren und Variablen nach einem bestimmten Muster Werte zuzuweisen, was als Destrukturierung bezeichnet wird. Durch destrukturierende Zuweisung können Eigenschaften/Werte aus Objekten/Arrays entnommen und anderen Variablen zugewiesen werden.

Vor dem Aufkommen der Destrukturierungszuweisung in ES6 konnten wir den Wert nur direkt angeben, wenn wir einer Variablen einen Wert zuweisen mussten.

Zum Beispiel:

sei a = 1;
sei b = 2;
sei c = 3;
sei d = 4;
sei e = 5;

Die Destrukturierung von Arrays ist sehr einfach. Sie müssen lediglich für jeden Wert im Array eine Variable deklarieren. Sie können statt Indizes im Array weniger Variablen definieren (also wenn Sie nur die ersten paar Werte verarbeiten wollen), einige Indizes überspringen oder sogar das REST-Muster verwenden, um alle restlichen Werte in ein neues Array zu packen.

Konstantennummern = [3, 6, 9, 12, 15];
Konstante [
 k, // k = 3
 l, // l = 6
 , // Einen Wert überspringen (12)
 ...n // n = [12, 15]
] = Zahlen;

Destrukturierung von Objekten

Die Destrukturierung von Objekten ist der Destrukturierung von Arrays sehr ähnlich. Der Hauptunterschied besteht darin, dass Sie jeden Schlüssel im Objekt anhand seines Namens referenzieren und so eine Variable mit demselben Namen erstellen können. Sie können die Schlüssel auch in neue Variablennamen dekonstruieren, nur die erforderlichen Schlüssel dekonstruieren und dann den Restmodus verwenden, um die verbleibenden Schlüssel in ein neues Objekt zu dekonstruieren.

const obj = { a: 1, b: 2, c: 3, d: 4 };
Konstante {
 ein, // ein = 1
 c: d, // d = 3
 ...rest // rest = { b: 2, d: 4 }
} = Objekt;

Verschachtelte Destrukturierung

Verschachtelte Objekte und Arrays können nach denselben Regeln destrukturiert werden. Der Unterschied besteht darin, dass Sie einen verschachtelten Schlüssel oder Wert direkt in eine Variable destrukturieren können, ohne das übergeordnete Objekt in der Variable selbst speichern zu müssen.

const verschachtelt = { a: { b: 1, c: 2 }, d: [1, 2]};
Konstante {
 A: {
  b: f, // f = 1
  ...g // g = { c: 2 }
 },
 ...h // h = { d: [1, 2]}
} = verschachtelt;

Erweiterte Dekonstruktion

Da sich Arrays wie Objekte verhalten, können Sie die Destrukturierungszuweisungssyntax verwenden, um einen bestimmten Wert aus einem Array abzurufen, indem Sie den Index als Schlüssel in der Destrukturierungszuweisung des Objekts verwenden. Mit dieser Methode können auch andere Attribute des Arrays abgerufen werden (beispielsweise die Länge des Arrays). Schließlich können Sie im Destrukturierungsprozess auch Standardwerte für Variablen definieren, wenn der Destrukturierungswert undefiniert ist.

const arr = [ 5, 'b', 4, 'd', 'e', ​​​​'f', 2 ];
Konstante {
 6: x, // x = 2
 0: y, // y = 5
 2: z, // z = 4
 Länge: Anzahl, // Anzahl = 7
 Name = 'Array', // Name = 'Array' (nicht in arr vorhanden)
 …restData // restData = { '1': 'b', '3': 'd', '4': 'e', ​​’5': 'f' }
} = an;

Zusammenfassen

Dies ist das Ende dieses Artikels über die Dekonstruktionszuweisungssyntax in Javascript. Weitere relevante Inhalte zur JS-Dekonstruktionszuweisungssyntax finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!