Verwendung der Destrukturierung in JavaScript zum Schreiben von sauberem und leistungsfähigerem Code

Manchmal muss man zerstören, um etwas Neues zu bauen. Mistborn: Der Held der Zeitalter

ES6 führte uns in eine der am meisten erwarteten JavaScript-Funktionen ein: die Destrukturierung. Als Konzept ist Destructuring nicht neu oder bahnbrechend und einige Sprachen hatten Destructuring (??) schon lange zuvor. Aber es war eine dringend benötigte und angeforderte Funktion in JavaScript.

Destrukturierung ist der Prozess des Aufbrechens einer Struktur. Im Kontext der Programmierung sind die Strukturen die Datenstrukturen, und die Destrukturierung dieser Datenstrukturen bedeutet das Entpacken einzelner Werte aus der Datenstruktur. In JavaScript kann die Destrukturierung auf ein Objekt oder ein Array angewendet werden.

Destrukturierung macht, bricht was auch immer ... Welchen Nutzen haben wir dafür?

Bevor wir diese Frage beantworten, wollen wir eine formale Definition für Destructuring haben. MDN zur Rettung!

Die Destrukturierungszuweisungssyntax ist ein JavaScript-Ausdruck, mit dem Werte aus Arrays oder Eigenschaften aus Objekten in unterschiedliche Variablen entpackt werden können. -MDN

Schauen wir uns einige Beispiele an, um die Grundlagen der Destrukturierung besser zu verstehen.

Arrays

Probe 1:

Als ich diesen einfachen Code zum ersten Mal sah, war ich verblüfft. Ich habe nicht verstanden, was passiert ist. Wenn Sie so sind wie ich, lassen Sie mich versuchen, es zu erklären.

In Zeile 1 definieren wir 2 Variablen aund b. In der nächsten Zeile befinden sich beide Variablen innerhalb eines Arrays auf der linken Seite, was wiederum einem tatsächlichen Array auf der Fahrseite entspricht. In den folgenden Zeilen drucken wir die Werte von a& bund erhalten 7 bzw. 8, die die Elemente im RHS-Array waren. Die Magie in Zeile 2 heißt Destrukturierung.

Die LHS zerstört die RHS und die beim Auspacken der Elemente gewonnenen Werte werden den Variablen der Reihe nach zugeordnet.

Aber warum befindet sich die LHS in einem Array?

Die Destrukturierungszuweisung verwendet eine ähnliche Syntax für die LHS im Vergleich zur RHS, um zu definieren, welche Werte aus der Quellvariablen entpackt werden sollen.

Probe 2:

Hier haben wir jetzt eine weitere Variable leftoutin den Code aufgenommen. Wir haben 2 verschiedene Verwendungsarten leftoutim Code.

  • [a,b,leftout]-> Dadurch wird das dritte Element im Array to leftwie erwartet zugewiesen.
  • [a,b,…leftout]-> Dies ergibt die ersten 2 Werte toaa ndb und der Rest des Arrays wird der he leftoVariablen ut zugewiesen .

Die Lösung liegt im Bediener. Dieser Operator reduziert alle verbleibenden Argumente ( Rest ) in einem Array. Im letzteren Punkt werden die ersten beiden Array-Elemente a& zugewiesen b, und die restlichen Argumente werden zu einem Array zusammengefasst (Umstrukturierung möglicherweise ??) und der leftoutVariablen zugewiesen . Wir können dasselbe überprüfen, indem wir uns die Ausgabe ansehen.

Objekte

Probe 1:

Die Destrukturierung funktioniert für Objekte und Arrays gleichermaßen. Das Objekt in der LHS hat Eigenschaften a&, bdie jeweils den Eigenschaften a& bdes RHS-Objekts zugeordnet sind. Wir erhalten 1 & 2, indem wir sie drucken.

Eine Sache zu beachten ( wenn Sie haben ) ist, dass es eine leichte Änderung in der Syntax gibt ( jetzt haben Sie ).

Bei der Objektzerstörung wird die gesamte LHS & RHS eingewickelt ()

Wir können den Fehler sehen, den wir bekommen, wenn wir ihn nicht einpacken. ().Es heißt, dass die Erklärung der Anweisung erwartet wird.

Was tatsächlich passiert, ist, dass das Einschließen von etwas in geschweifte Klammern {}JavaScript verwirrt, so dass es als Block und nicht als Objekt betrachtet wird. Aus diesem Grund wird nach einer Deklaration für den Block gesucht ( Funktionsdeklaration ), daher schließen wir den Code darin ein (). Dies macht es eher zu einem Ausdruck als zu einem Block, und wir erhalten unsere Ergebnisse.

Probe 2:

Wieder der restBediener. Funktioniert genau wie in Arrays, außer dass diesmal die Restwerte innerhalb eines Objekts reduziert werden, da die zu verwendende Struktur von der LHS definiert wird.

Wofür wird Destrukturierung eingesetzt?

Wie aus den obigen Beispielen hervorgeht, wissen wir jetzt, wie wichtig die Destrukturierung ist. Es gibt viele Verwendungszwecke und verschiedene Fälle, wie Destrukturierung sowohl für Objekte als auch für Arrays verwendet werden kann. Wir werden einige davon ausprobieren. ( PS - Die Beispiele gelten sowohl für Objekte als auch für Arrays, sofern nicht anders angegeben. )

Variablenzuordnung

Wir haben bereits in den obigen Beispielen gesehen, wie Variablen zugewiesen werden. Schauen wir uns also eine andere an.

In diesem Beispiel wird ein bereits erstelltes Array direkt zur Destrukturierung zugewiesen. Den Variablen werden dennoch Werte zugewiesen.

Gleiches gilt für das Objekt.

Standardwerte

Manchmal kann es vorkommen, dass wir die nAnzahl der Variablen definieren , um Werte aus der Destrukturierung zu erhalten, aber das Array / Objekt enthält möglicherweise nur n-xElemente. In diesem Fall werden xVariablen zugewiesen undefined.

Wir können sehen, dass dies bundefiniert ist, da das Array einfach nicht so viele Elemente enthält, um jede Variable zu zerstören und zuzuweisen.

Die Lösung besteht darin, den Variablen Standardwerte zuzuweisen. Wenn also nicht genügend Elemente vorhanden sind, nehmen die Variablen Standardwerte an, anstatt undefiniert zu bleiben.

Tauschen

Beim Austauschen werden Werte zwischen zwei oder mehr Variablen ausgetauscht. Eine Standardmethode zum Durchführen eines Austauschs ist entweder die Verwendung einer temporären Variablen oder die Verwendung von XOR. In JavaScript kann dasselbe durch Destrukturierung erfolgen.

Tauschen Sie mit einer variablen Temperatur. Der Code ist selbsterklärend.

Mit Destrukturierung tauschen wir einfach die Position der Elemente und Voilà! Tausch erledigt.

Werte ignorieren

Wir können nur die erforderlichen Werte erfassen und verwenden und die unnötigen Werte ablehnen oder ignorieren.

Hier können wir sehen, dass wir den Mittelwert ignoriert haben, indem wir ihn keiner Variablen zugewiesen haben, was uns den Ärger erspart.

Indirekte Zuordnung einer Funktionsrückgabe

Hier können wir sehen, dass die Funktion x ein Array zurückgibt. In Zeile 4, in der wir destrukturieren, stellen wir den Funktionsaufruf bereit, der das Array und nicht das Array direkt zurückgibt. Es macht den Code ordentlich und leicht zu lesen und zu verstehen.

Zuordnung zu neuen Variablen

Eigenschaften können aus einem Objekt entpackt und einer Variablen mit einem anderen Namen als der Objekteigenschaft zugewiesen werden.

Wir können sehen, dass die Werte für Eigenschaften auch Variablen sind, denen Werte durch Destrukturierung zugewiesen werden.

Verschachtelte Objekt- und Array-Destrukturierung

Wie wir sehen können, sind diese Daten ein Objekt mit einer Eigenschaft namens location, die wiederum ein Array enthält, dessen Elemente Objekte sind.

Bei der Destrukturierung müssen die Werte aller im Objekt vorhandenen Eigenschaften innerhalb des Standortarrays ermittelt werden.

Deshalb haben wir ein Objekt namens obj erstellt, das dieselbe Struktur wie das Datenobjekt enthält, und die Werte, die wir entpacken möchten, werden als Variablen (Mylatitude, Mylongitude, Mycity) bereitgestellt. Diese werden wiederum dem Datenarray gleichgesetzt (wie zuvor die Destrukturierungssyntax). Wenn die Variablen gedruckt werden, erhalten wir die entsprechenden Werte.

Destrukturierung mit for-of-Schleife

Im obigen Codefragment haben wir ein Personenarray von Objekten, deren Eigenschaften wiederum ein Objekt enthalten (Personen> Objekt> Familie). Jetzt wollen wir einige der Werte mit der for..of-Schleife aus dem Objekt entpacken.

In der Schleife haben wir eine Objektvariable mit derselben Struktur wie im People-Array zugewiesen, wobei die nicht benötigten Werte ignoriert wurden. Wir haben den Namen- und Mutter-Eigenschaften die Variablen n & m zugewiesen, da dies die Werte sind, die wir entpacken möchten. Innerhalb der Schleife drucken wir die Variablen und erhalten die benötigten Werte.

Das große Bild.

Sie müssen Destrukturierung in Ihrem Code verwenden oder es üben, um tatsächlich einen Überblick zu bekommen. In den Beispielen scheint es einfach zu sein, da die Beispiele nur dazu dienen, Ihnen die Grundlagen zu vermitteln. Bei komplexen / mehrfachen Operationen (redu ()!) Kann die Desstrukturierung schnell verwirrend werden, was wir nicht wollen!

Darüber hinaus könnten Sie auch denken, dass Destrukturierung nur Zuckersyntax für die Ausführung einer Reihe von Aufgaben ist (wie wir Variablen den Wert jedes Elements aus einem Array mithilfe einer for-Schleife zuweisen können). Bis zu einem gewissen Grad können wir sagen, dass es Zucker ist, aber wenn wir uns das breitere Bild 'The Big Picture' ansehen, werden wir verstehen, warum Destrukturierung mehr Wert hat als nur ein Code-Minimierer.

JavaScript verfügt über viele Operationen zum Extrahieren und Erstellen von Daten, die jedoch alle jeweils für ein Element ausgeführt werden.

Zum Bauen

Zum Extrahieren (immer noch einzeln)

Es gibt zwar eine Syntax zum Erstellen mehrerer Eigenschaften gleichzeitig, diese kann jedoch nur zum Zeitpunkt der Zuweisung verwendet werden - sie kann nicht zum Ändern eines vorhandenen Objekts verwendet werden.

Vor der Einführung von ES6 gab es keinen Mechanismus zum gleichzeitigen Extrahieren aller Daten. Hier ist die Destrukturierung wirklich zum Leuchten gekommen. Sie können mehrere Eigenschaften aus einem Objekt extrahieren. Wir haben dies in den obigen Beispielen gesehen.

Tücken

Es gibt nur einen, an den ich denken kann, und wir haben darüber gesprochen:

  • Eine Anweisung sollte nicht mit einer geschweiften Klammer beginnen {

Fazit

Ich habe versucht, die Destrukturierung zu vereinfachen, indem ich so viele Anwendungsfälle für die Destrukturierung wie möglich demonstriert habe. Ich hoffe, es hat Ihnen dieses Konzept klar gemacht. Jetzt können Sie mithilfe der Destrukturierung leistungsstarken und sauberen Code schreiben.