Was ist Dekonstruktion?
Die Dekonstruktion ist vollständig dem Konstruktion von Daten entgegengesetzt. Anstatt beispielsweise ein neues Objekt oder ein neues Array zu konstruieren, teilt es das vorhandene Objekt oder ein Array nach dem anderen auf, um die von Ihnen benötigten Daten zu extrahieren.
ES6 verwendet ein neues Muster, um den numerischen Werten zu entsprechen, die Sie extrahieren möchten, und die Dekonstruktionszuweisung nimmt dieses Muster an. In diesem Muster werden die von Ihnen dekonstruierende Datenstruktur abgebildet, und nur die Daten, die mit dem Muster übereinstimmen, werden extrahiert.
Das dekonstruierte Datenelement befindet sich im Zuordnungsbetreiber Rechts von = kann es eine beliebige Kombination von Arrays und Objekten sein, die willkürliche Verschachtelung ermöglicht. Die Anzahl der Variablen, mit denen diese Daten Werte zugewiesen werden, ist keine Grenze.
Array Zerstörung
Die Array -Dekonstruktion verwendet ein Array als Datenelement, und Sie können die Werte aus diesem Array extrahieren, um einem oder mehreren Variablen gemäß dem Array -Muster Werte zuzuweisen (verwendet, um den Werten, die Sie aus dem Array benötigen, übereinstimmen).
Das Array -Muster wird verwendet, um zu identifizieren, welche Werte Sie basierend auf der Position der Werte extrahieren möchten. Es muss in der Lage sein, die Struktur des Arrays so genau zuzuordnen, dass jeder Variablen im Array -Muster ein Wert zugewiesen wird, der der Position im dekonstruierten Array entspricht.
Lassen Sie mich Ihnen ein paar Beispiele geben, um uns zu verstehen:
Array -Musterbeispiel
Weisen Sie alle Werte im Array einzelnen Variablen zu
// Array const avengers setze = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Dekonstruieren Sie das Array auf eine Variable. Das Array -Muster befindet sich links vom Zuordnungsoperator `=`, und das strukturierte Array befindet sich rechts von //. const [Ironman, Cap, Blackwidow] = Avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // Ausgabe Ironman: Ironman;
Extrahieren Sie alle Werte außer dem ersten
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Wir müssen Tony const [, Cap, BlackWidow] = Avengers nicht verwenden; // Ironman = Fehler: undefined // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // Ausgabebap: Cap;
Extrahieren Sie alle Werte mit Ausnahme des zweiten
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // CAP Missing Const [Ironman, Blackwidow] = Avengers; // ironman = 'Tony Stark' // Cap = Fehler: undefiniert // BlackWidow = 'Natasha Romanoff' // Ausgabe von BlackWidow: BlackWidow;
Extrahieren Sie alle Werte mit Ausnahme des letzten
const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff']; // Ironman gegen Cap Const [Ironman, Cap] = Avengers; // ironman = 'Tony Stark' // Cap = 'Steve Rogers' // BlackWidow = ERROR: UNDEFINDED // Ausgabe von BlackWidow: Ironman;
Verschachtelte Arrays
Dieses übereinstimmende Muster unterstützt auch verschachtelte Arrays, solange der Zuordnungsoperator das Array -Muster auf der linken Seite mit der Array -Struktur rechts übereinstimmt. Lassen Sie mich erneut erklären, dass den Variablen links den Wert zugewiesen werden, der der Position im Array rechts entspricht. Egal wie tief Sie sie nisten, Sie können sie trotzdem dekonstruieren.
Dekonstruieren verschachtelter Arrays
// Zerstörende verschachtelte Arrays const avengers = ['Natasha Romanoff', ['Tony Stark', 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']; // Avengers und ihre Partner Const [Blackwidow, [Ironman, Warmachine], [Cap, Falcon]] = Avengers; // BlackWidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Warmachine = 'James Rhodes' // Cap = 'Steve Rogers' // Falcon = 'Sam Wilson' // Ausgabe warmachine: Warmachine;
Extrahieren Sie einen Wert aus einem tief verschachtelten Array
// Pepper Potts Const Avengers aus diesem Array = ['Natasha Romanoff', ['Tony Stark', 'Pepper Potts'], 'James Rhodes'], ['Steve Rogers', 'Sam Wilson'] extrahieren; // Destructure const [, // überspringen 'natasha romanoff' [[, // überspringen 'Tony Stark' ihre // Pepper Potts zuweisen der Variablen 'Hera']]] = Avengers; // Bitte beachten Sie: Sie können auch auf diese Weise schreiben // const [, [, hera]]] = avengers; // Ausgabe Hera: Hera; // Hera = 'Pepper Potts'
Verwenden Sie den Restbetreiber, um alle verbleibenden Elemente zu erfassen
Wenn Sie ein bestimmtes Array -Element erhalten und die verbleibenden Elemente in ein Array einfügen möchten, können Sie den Restbetreiber so dekonstruieren :
// Const Avengers über Restoperator dekonstruieren = ['Natasha Romanoff', "Tony Stark", "Steve Rogers"]; const [Blackwidow, ... Theother] = Avengers; die Leute; // Blackwidow = 'Natasha Romanoff' // theothers = ['Tony Stark', 'Steve Rogers'] // Ausgabe die VOURTEN: Die THE METERS;
Objektzerstörung
Die Dekonstruktion der Objekte ist noch magischer, insbesondere wenn Sie Werte aus einem komplexen, tief verschachtelten Objekt nehmen müssen, was offensichtlicher ist. Um zu wiederholen, verwenden die Dekonstruktion von Objekten und die Dekonstruktion von Array die gleichen Regeln (dh ein Objektmuster auf der linken Seite des Zuordnungsoperators, so dass seine variable Position mit der Wertposition des Objekts auf der rechten Seite übereinstimmt).
In der Objektzerstörung müssen Sie die Attributnamen angeben, die extrahiert werden müssen, und die zugewiesenen Variablennamen. Wie bei der Array -Dekonstruktion müssen wir ein Objektmuster erstellen, um das dekonstruierte Objekt auf der linken Seite des Zuordnungsoperators abzubilden.
Obwohl wir in diesem Fall extrahieren möchten, ist der Wert der Objekteigenschaft (z. B.: Wir extrahieren value aus { prop: value }). Dementsprechend muss unser Objektmuster eine Variable haben, und die Position dieser Variablen muss mit der Position des Eigenschaftswerts übereinstimmen, den wir extrahieren möchten.
Einfaches Beispiel
Extrahieren Sie einen einfachen Objektattributwert
Wir können dies tun, um den Wert der Eigenschaft ironMan of Object { ironMan: 'Tony Stark' } 'Tony Stark' Variablen a zuzuweisen:
// Dekonstruieren Sie den Eigenschaftswert des Objekts und weisen Sie es einer einzelnen Variablen zu. A`: const {Ironman: a} = {Ironman: 'Tony Stark'}; // Ausgabe a: a; // a = 'Tony Stark'Mehrere Attributwerte extrahieren
Solange wir dasselbe Muster erweitern, können wir mehrere Attributwerte aus einem Objekt extrahieren, wie folgt:
// Setzen Sie unser Objekt const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Zerstörungsobjekt zu einzelnen Variablen const {Ironman: a, Cap: B, BlackWidow: C} = Avengers; // a = 'Tony Stark' // b = 'Steve Rogers' // C = 'Natasha Romanoff' // Ausgabe a: a;Beobachten Sie, wie dieses Dekonstruktionsmuster genau dem dekonstruierten Objekt entspricht.
Verschachtelte Objektzerstörung
Wie bei der Dekonstruktion verschachtelter Arrays können wir verschachtelte Objekte dekonstruieren, egal wie tief sie sind.
// Setup our object const avengers = { blackWidow: 'Natasha Romanoff', ironManCharacters: { couple: { ironMan: 'Tony Stark', hera: 'Pepper Potts', }, partner: { warMachine: 'James Brodie' } }, capCharacters: { cap: 'Steve Rogers', partner: { falcon: 'Sam Wilson' } } }; // Zerstörungsobjekt zu einzelnen Variablen const {BlackWidow: A, IronManCharacters: {Paar: {Ironman: B, Hera: C}, Partner: {Warmachine: D}}, Capcharacter: {Cap: E, Partner: {Falcon: F}}}} = avengers; // a = 'natasha romanoff' // b = 'Tony Stark' // c = 'Pepper Potts' // d = 'James Brodie' // e = 'Steve Rogers' // F = 'Sam Wilson' // Ausgabe a: a;Nennen Sie die zugewiesene Variable
Natürlich ist es schlecht, Variablennamen wie A, B, C und Variablen zu setzen, die Sinn machen sollten.
Lang anhaltende Benennung
// Setzen Sie unser Objekt const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Zerstörungsobjekt zu einzelnen Variablen mit sinnvollen Namen const {Ironman: Ironman, Cap: Cap, BlackWidow: BlackWidow} = Avengers; // BlackWidow = 'Natasha Romanoff' // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Ausgabe von BlackWidow: BlackWidow; Dieser Ansatz ist besser als der oben genannte Name A, B und C , kann aber noch verbessert werden. { ironMan: ironMan } sieht etwas hässlich und nicht intuitiv aus.
Syntaktisch benannte Verknüpfungen
Wenn Sie den Attributwert eines Objekts einer Variablen zuweisen möchten und der Name der Variablen dem Attributnamen des Objekts übereinstimmt, müssen Sie im Zuordnungsmodus auf der linken Seite von = nur den Attributnamen wie folgt schreiben:
// Setzen Sie unser Objekt const avenger = {Ironman: 'Tony Stark'} ein; // Zerstörungsobjekt zu einzelnen Variablen mit aussagekräftigen Namen const {Ironman // Äquivalent zu 'Ironman: Ironman'} = Avenger; // Ironman = 'Tony Stark' // Ausgabe Ironman: Ironman;Da der Name des dekonstruierten Objekts Attributname mit dem zugewiesenen Variablennamen übereinstimmt, müssen wir den Namen nur einmal auflisten.
Präzise Grammatik
Lassen Sie uns den vorherigen Code ein wenig retweeten, damit sie prägnanter und klarer aussehen:
// Setzen Sie unser Objekt const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Zerstörungsobjekt zu einzelnen Variablen mit aussagekräftigen Namen const {Ironman, Cap, BlackWidow} = avengers; // Ausgabe Ironman: Ironman;Extrahieren Sie ein tief verschachteltes Eigentum aus einem Objekt
Die Dinge sind noch interessanter, wenn wir eine tief verschachtelte Objekteigenschaft extrahieren wollen:
// Setup our objectconst avengers = { blackWidow: 'Natasha Romanoff', ironManCharacters: { couple: { ironMan: 'Tony Stark', hera: 'Pepper Potts', }, partner: { warMachine: 'James Brodie' } }, capCharacters: { cap: 'Steve Rogers', partner: { falcon: 'Sam Wilson' } }}; // zerstörern Sie eine tief verschachtelte ObjectConst {IronManCharacters: {paar}} = avengers; // pace = {// Ironman: 'Tony Stark', // Hera: 'Pepper Potts', //} // Ausgabepaar: Paar: Paar;Warten Sie, wie haben Sie diesen Code gelesen? Wie wird das variable Paar definiert?
Durch die Aufteilung dieser Weise können wir sehen, dass der Zuordnungsoperator = links eine Karte des dekonstruierten Objekts ist:
const avengers = {ironmanCharacters: {paar: {ironman: 'Tony Stark', Hera: 'Pepper Potts',}}}; const {ironManCharacters: {paar} = avengers; // Ausgabepaar: Paar; Nur mit const { couple } = avengers; Es gibt keine Möglichkeit, den Wert des Paares zu extrahieren. Nur durch die Zuordnung des Speicherorts und des Namens des zu extrahierenden Objektattributs kann der JS -Compiler die entsprechenden Informationen erhalten, alle Attribute des Objekts nach unten suchen und den gewünschten Wert genau extrahieren.
Hier sollte auch beachtet werden , dass Paar Syntax -Verknüpfungen verwendet, um Variablen zu nennen, was eigentlich so ist:
const {ironManCharacters: {paar: paar}} = avengers;So wird das Paar definiert, und sein Wert ist der Wert, dessen Attributnamenpaar im Objekt Avengers ist .
Dekonstruktion der Attribute des Objekts
Bisher haben wir den Wert des Objekts dekonstruiert, einer einzelnen Variablen Werte zuzuweisen, und wir können tatsächlich auch Werte den Eigenschaften eines anderen Objekts zuweisen.
const avengers = {schwarzwidow: 'natasha romanoff', ironmancharacters: {paar: {ironman: 'Tony Stark', Hera: 'Pepper Potts'}}; const ironManProperties = {familie: {{}}; IronManProperties.Family// IronmanProperties.family = {// Ironman: 'Tony Stark', // Hera: 'Pepper Potts' //} // IronManProperties.Family:ironManProperties.Family; Hier weisen wir den Wert von ironManCharacters.couple der Eigenschaft von ironManProperties.family zu. Hier sind zwei Punkte zu erklären:
1. Die Dekonstruktionszuordnung muss in Klammern enthalten sein
Wenn wir eine vorhandene Variable dekonstruieren (z. B. IronManProperties im obigen Beispiel), müssen wir dies tun, anstatt eine neue Variable zu deklarieren.
2. Das Muster stimmt immer noch überein
{ ironManCharacters: { couple... } } entspricht IronmanCharacters in Object Avengers . Auf diese Weise können Sie den Wert von ironManCharacters.couple aus dem Avengers -Objekt nach Belieben extrahieren. Aber jetzt werden ein neues Objekt IronmanProperties und seine Eigenschaftsfamilie hinter das Paar gelegt. Tatsächlich wird die Eigenschaft ironManProperties.family dieses Objekts tatsächlich zugewiesen.
Sind Sie immer noch verwirrt, wenn Sie versuchen, diese Situation klar zu erklären? Probieren Sie den obigen Code in JSFIDDLE aus und alles wird klar sein.
Wenn Sie nicht sicher sind, warum Sie dies tun, finden Sie im nächsten Artikel das Beispiel. Diese Beispiele werden Ihnen sagen, warum dieses Muster verwendet wird, um das von API bezeichnete JSON -Objekt zu dekonstruieren, sodass Sie die Magie der Dekonstruktion schätzen können!
Standardwert
Bei der Dekonstruktion können Sie auch einen Standardwert für die Variable angeben:
// Setzen Sie unser Objekt const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff'}; // Zerstörung mit Standardeinstellungen const {Ironman, Cap, Blackwidow, theHulk = 'Bruce Banner'} = avengers; // Ironman = 'Tony Stark' // Cap = 'Steve Rogers' // Blackwidow = 'Natasha Romanoff' // theHulk = 'Bruce Banner' // Ausgabe BlackWidow: BlackWidow;Vermeiden Sie diese Probleme während der Dekonstruktion
Const, let, var wird bei der Dekonstruktion der Zuordnung nicht verwendet
Dieser Punkt wurde erwähnt, wenn man über die Dekonstruktion und Zuweisung von Objekteigenschaften sprach, aber es ist immer noch notwendig, sie hier zu wiederholen, um jedem einen tiefen Eindruck zu vermitteln.
Kann nicht dekonstruierte dekonstierte Variablen dekonstruieren
Das heißt, Sie können nur Variablen erklären, während Sie die Variablen dekonstruieren.
// Setzen Sie unser Objekt const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', theHulk: 'Bruce Banner'}; // Gültige zerstörende const {ironman} = avengers; lass {Cap} = avengers; var {BlackWidow} = avengers; // Ungültige Zerstörungen von TheHulk; {theHulk} = avengers; // Fehler // Ausgabe thulk: theHulk;Warum kann eine deklarierte Variable nicht dekonstruiert werden? Das liegt daran, dass wenn Sie Curly Braces verwenden ( dann wird JavaScript denken, dass Sie einen Block deklarieren.
Die Lösung besteht darin, die gesamte dekonstruierte Aufgabe in zwei Klammern einzuschließen.
Wie man eine deklarierte Variable dekonstruiert und zugewiesen
// Setzen Sie unser Objekt const avengers = {Ironman: 'Tony Stark', Cap: 'Steve Rogers', Blackwidow: 'Natasha Romanoff', theHulk: 'Bruce Banner'}; // ein gültiger Hulk theHulk; ({theHulk} = avengers); // theHulk = 'bruce banner' // output theHulk: theHulk;Jetzt beginnen wir nicht mit lockigen Zahnspangen, daher werden JS nicht glauben, dass wir einen Block deklarieren, damit wir das erwartete Dekonstruktionsergebnis erzielen können.
Gibt einen dekonstruierten Wert direkt zurück
Wenn eine Variable, die als nächstes zurückgegeben werden soll, nicht zuerst dekonstruiert wird, wird ein dekonstruierter Wert direkt zurückgegeben, was den erwarteten Effekt nicht erreicht. Im folgenden Code ist das zurückgegebene gesamte Ironman -Objekt beispielsweise nicht der erwartete Wert von Tony Stark .
// Hinweis: Das funktioniert nicht! Funktion Gettonystark (Avengers) {return {Ironman: {Realname}} = avengers; // Rückgabe das Avengers -Objekt, nicht den Realname -Wert} const avengers = {ironman: {realname: 'Tony Stark'}}; const tonystark = gettonystark (avengers); // TonyStark = {// Ironman: {// Realname: 'Tony Stark' //} //}; // Ausgabe TonyStark: TonyStark;Um einen Wert aus einem dekonstruierten Objekt zu extrahieren, müssen Sie ihn zuerst einer Variablen zuweisen und diese Variable zurückgeben, wie im folgenden Code gezeigt:
// Hinweis: Das funktioniert! Funktion Gettonystark (Avengers) {const {Ironman: {Realname}} = avengers; realname zurückgeben; } const avengers = {ironman: {realname: 'Tony Stark'}}; const tonystark = gettonystark (avengers); // Tonystark = 'Tony Stark' // Ausgabe TonyStark: TonyStark;Diese Art der Aufteilung der Zuordnung und die Rückkehr in zwei Codezeilen ist wirklich ärgerlich, und der Code ist hässlich und unnötig. Leider funktioniert JavaScript wie diese - Sie müssen zuerst den dekonstruierten Wert einer Variablen zuweisen und dann zurückgeben, und die beiden Schritte müssen separat durchgeführt werden.
Wir haben jedoch nicht gesagt, dass wir es gerade separat gemacht haben und nicht gesagt haben, dass wir es in zwei Codezeilen einfügen müssen. Wenn Sie es also in eine Zeile wie die folgende schreiben, können Sie auch die erwarteten Ergebnisse erzielen:
Funktion Gettonystark (Avengers) {return ({ironman: {realname}} = avengers) && realname; } const avengers = {ironman: {realname: 'Tony Stark'}}; const tonystark = gettonystark (avengers); // Tonystark = 'Tony Stark' // Ausgabe TonyStark: TonyStark; Da JavaScripts _short-circuit_ Circuit_logical Operator (&& und ||) den Wert des zweiten Operanden basierend auf dem Wert des ersten Operanden zurückgibt, kann diese Schreibmethode den erwarteten Effekt erreichen. Hier soll der erste Operand den Ausdruck der Zuordnung dekonstruieren und den Wert Realname zuweisen. RealName ist der zweite Operand, daher wird sein Wert endgültig zurückgegeben.
Dies ist nicht optimal, kann aber erreicht werden. Während Sie die Kürze des Code verfolgen, müssen Sie auf die Lesbarkeit des Codes achten.
Zusammenfassen
In diesem Artikel werden ausführlich die Hauptprinzipien der Dekonstruktion der Zuordnung erläutert. Die Dekonstruktion reduziert nicht nur die Menge Ihres Code, sondern ändert sich auch grundlegend, wie Sie ihn codieren. Je mehr Sie es verwenden, desto mehr Möglichkeiten können Sie Daten und Funktionen gestalten, die in der Vergangenheit fast unmöglich waren. Ich hoffe, dieser Artikel wird für alle hilfreich sein, es6 zu lernen.