Eine Wiedereinführung in die Destrukturierungsaufgabe

Wenn Sie JavaScript schreiben, sind Sie wahrscheinlich mit ES2015 und all den neu eingeführten Sprachstandards vertraut. Ein solcher Standard, der eine unglaubliche Popularität erfahren hat, ist die destrukturierende Zuweisung. Die Fähigkeit, in ein Array oder Objekt „einzutauchen“ und direkter auf etwas darin zu verweisen. Normalerweise geht das so.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

Die destrukturierende Zuweisung ist jedoch ein so mächtiges Stück Syntax, dass viele Entwickler, selbst diejenigen, die sie seit ihrer ersten Veröffentlichung verwenden, einige der Dinge vergessen, die sie tun kann. In diesem Beitrag gehen wir fünf reale Beispiele für die Destrukturierung von Objekten und Arrays durch, manchmal beides! Und nur zum Spaß füge ich ein wackeliges Beispiel hinzu, auf das ich neulich gestoßen bin.

1. Verschachtelte Destrukturierung

Der Zugriff auf einen Schlüssel der obersten Ebene innerhalb eines Objekts oder das erste Element eines Arrays ist mächtig, aber auch etwas einschränkend. Es entfernt nur eine Ebene der Komplexität und wir enden immer noch mit einer Reihe von Punkten oder [0] -Referenzen, um auf das zuzugreifen, wonach wir wirklich suchen.

Wie sich herausstellt, kann die Destrukturierung über die oberste Ebene hinaus funktionieren. Und dafür kann es triftige Gründe geben. Nehmen Sie dieses Beispiel einer Objektantwort von einer HTTP-Anfrage. Wir wollen über das Datenobjekt hinausgehen und nur auf den Benutzer zugreifen. Solange wir die gesuchten Schlüssel kennen, ist das kein Problem.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

Das gleiche kann mit verschachtelten Arrays gemacht werden. In diesem Fall müssen Sie den Schlüssel nicht kennen, da es keinen gibt. Was Sie wissen müssen, ist die Position dessen, was Sie suchen. Sie müssen für jedes Element bis zu dem Element, nach dem Sie suchen, eine Referenzvariable (oder einen Komma-Platzhalter) angeben (dazu kommen wir später). Die Variable kann einen beliebigen Namen haben, da sie nicht versucht, einen Wert innerhalb des Arrays abzugleichen.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Denken Sie daran, dass diese Funktionen wie bei jedem Tool mit Bedacht eingesetzt werden sollten. Erkennen Sie Ihren Anwendungsfall und die Zielgruppe Ihrer Codebasis. Berücksichtigen Sie die Lesbarkeit und die einfache spätere Änderung. Wenn Sie beispielsweise nur auf ein Subarray zugreifen möchten, wäre eine Karte vielleicht besser geeignet.

2. Objekt- und Array-Destrukturierung

Objekte und Arrays sind gängige Datenstrukturen. Tatsächlich so häufig, dass das eine oft im anderen auftaucht. Über die verschachtelte Destrukturierung hinaus können wir auf verschachtelte Eigenschaften zugreifen, selbst wenn sie sich in einer anderen Art von Datenstruktur befinden als die externe, auf die wir zugreifen.

Nehmen Sie dieses Beispiel eines Arrays innerhalb eines Objekts.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

Der umgekehrte Anwendungsfall ist ebenfalls gültig. Ein Array von Objekten.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

Wie sich herausstellt, haben wir in diesem Beispiel ein kleines Problem. Wir können nur auf den Namen des ersten Benutzers zugreifen; andernfalls versuchen wir, „name“ zu verwenden, um auf zwei verschiedene Zeichenfolgen zu verweisen, was ungültig ist. Unser nächstes Destrukturierungsszenario sollte dies klären.

3. Aliase

Wie wir im obigen Beispiel gesehen haben (wenn wir wiederholte Schlüssel in verschiedenen Objekten haben, die wir herausziehen möchten), können wir dies nicht auf die „typische“ Weise tun. Variablennamen dürfen sich nicht innerhalb desselben Bereichs wiederholen (das ist die einfachste Art, es zu erklären, es ist offensichtlich komplizierter als das).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

Aliasing ist nur auf Objekte anwendbar. Das liegt daran, dass Arrays jeden beliebigen Variablennamen verwenden können, den der Entwickler auswählt, anstatt mit einem vorhandenen Objektschlüssel übereinstimmen zu müssen.

4. Standardwerte

Die Destrukturierung geht oft davon aus, dass der Wert, auf den sie verweist, vorhanden ist, aber was ist, wenn dies nicht der Fall ist? Es ist nie angenehm, Code mit undefinierten Werten zu verunreinigen. Dann sind Standardwerte praktisch.

Schauen wir uns an, wie sie für Objekte funktionieren.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

Wenn der referenzierte Schlüssel bereits einen Wert hat, wird der Standardwert ignoriert. Wenn der Schlüssel im Objekt nicht vorhanden ist, wird der Standardwert verwendet.

Wir können etwas Ähnliches für Arrays tun.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

Wie beim Objektbeispiel wird der Standardwert ignoriert, wenn der Wert vorhanden ist. Wenn Sie sich das obige Beispiel ansehen, werden Sie vielleicht feststellen, dass wir mehr Elemente destrukturieren, als im Array vorhanden sind. Was ist mit der Destrukturierung von weniger Elementen?

5. Werte ignorieren

Einer der besten Aspekte der Destrukturierung besteht darin, dass Sie auf Werte zugreifen können, die Teil einer größeren Datenstruktur sind. Dazu gehört, diese Werte zu isolieren und den Rest des Inhalts zu ignorieren, wenn Sie dies wünschen.

Wir haben tatsächlich früher ein Beispiel dafür gesehen, aber isolieren wir das Konzept, über das wir sprechen.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

In diesem Beispiel destrukturieren wir niemals die organization und das ist vollkommen in Ordnung. Es ist immer noch als Referenz innerhalb des user verfügbar.

 user.organization

Bei Arrays gibt es tatsächlich zwei Möglichkeiten, Elemente zu „ignorieren“. Im Objektbeispiel verweisen wir speziell auf interne Werte, indem wir den zugehörigen Schlüsselnamen verwenden. Bei der Destrukturierung von Arrays wird der Variablenname nach Position zugewiesen. Beginnen wir damit, Elemente am Ende des Arrays zu ignorieren.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Wir destrukturieren das erste und zweite Element im Array und der Rest ist irrelevant. Aber wie sieht es mit späteren Elementen aus? Wenn es positionsbasiert ist, müssen wir dann nicht jedes Element destrukturieren, bis wir das gewünschte treffen?

Wie sich herausstellt, tun wir das nicht. Stattdessen verwenden wir Kommas, um die Existenz dieser Elemente anzudeuten, aber ohne Referenzvariablen werden sie ignoriert.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

Und wir können beides gleichzeitig tun. Elemente überspringen, wo immer wir wollen, indem wir den Komma-Platzhalter verwenden. Und wieder, wie beim Objektbeispiel, sind die „ignorierten“ Elemente weiterhin als Referenz innerhalb des roleCounts Arrays verfügbar.

Wackeliges Beispiel

Die Kraft und Vielseitigkeit der Destrukturierung bedeutet auch, dass Sie einige wirklich bizarre Dinge tun können. Ob sie sich als nützlich erweisen oder nicht, ist schwer zu sagen, aber wissenswert, dass es eine Option ist!

Ein solches Beispiel ist, dass Sie die Destrukturierung verwenden können, um flache Kopien zu erstellen.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Eine andere Sache, für die Destrukturierung verwendet werden kann, ist die Dereferenzierung.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

Wie immer ist die Lesbarkeit von größter Bedeutung, und alle diese Beispiele sollten vor Gericht verwendet werden. Aber wenn Sie alle Ihre Optionen kennen, können Sie die beste auswählen.

Fazit

JavaScript ist voll von komplexen Objekten und Arrays. Unabhängig davon, ob es sich um die Antwort auf eine HTTP-Anforderung oder um statische Datensätze handelt, ist es wichtig, effizient auf die eingebetteten Inhalte zugreifen zu können. Die Verwendung der destrukturierenden Zuweisung ist eine großartige Möglichkeit, dies zu tun. Es verarbeitet nicht nur mehrere Verschachtelungsebenen, sondern ermöglicht einen gezielten Zugriff und bietet Standardwerte im Fall von undefinierten Referenzen.

Selbst wenn Sie die Destrukturierung seit Jahren verwenden, sind in der Spezifikation so viele Details verborgen. Ich hoffe, dass dieser Artikel als Erinnerung an die Werkzeuge diente, die Ihnen die Sprache gibt. Wenn Sie das nächste Mal Code schreiben, wird sich vielleicht einer von ihnen als nützlich erweisen!