Verwendung der Objektdestrukturierung in JavaScript

Die Objektdestrukturierung ist eine nützliche JavaScript-Funktion, um Eigenschaften von Objekten zu extrahieren und an Variablen zu binden.

Was noch besser ist, die Objektdestrukturierung kann mehrere Eigenschaften in einer Anweisung extrahieren, auf Eigenschaften von verschachtelten Objekten zugreifen und einen Standardwert festlegen, wenn die Eigenschaft nicht vorhanden ist.

In diesem Beitrag erkläre ich, wie Sie die Objektdestrukturierung in JavaScript verwenden.

1. Die Notwendigkeit der Objektdestrukturierung

Stellen Sie sich vor, Sie möchten einige Eigenschaften eines Objekts extrahieren. In einer Umgebung vor ES2015 müssten Sie den folgenden Code schreiben:

var hero = { name: 'Batman', realName: 'Bruce Wayne'};var name = hero.name;var realName = hero.realName;name; // => 'Batman',realName; // => 'Bruce Wayne'

Der Wert der Eigenschaft hero.name wird der Variablen name zugewiesen. Auf die gleiche Weise wird der Wert hero.realName realName zugewiesen.

Eine solche Möglichkeit, auf Eigenschaften zuzugreifen und sie Variablen zuzuweisen, erfordert Boilerplate-Code. Wenn Sie var name = hero.name schreiben, müssen Sie die name Bindung 2 Mal erwähnen, und dasselbe gilt für realName.

Hier ist die Objektdestrukturierungssyntax nützlich: Sie können eine Eigenschaft lesen und ihren Wert einer Variablen zuweisen, ohne den Eigenschaftsnamen zu duplizieren. Darüber hinaus können Sie mehrere Eigenschaften desselben Objekts in nur einer Anweisung lesen!

Lassen Sie uns das obige Skript umgestalten und die Objektdestrukturierung anwenden, um auf die Eigenschaften zuzugreifen name und realName:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero ist eine Objektdestrukturierungszuweisung. Diese Anweisung definiert die Variablen name und realName und weist ihnen dann die Werte der Eigenschaften hero.name und hero.realName entsprechend zu.

Vergleich der 2 Ansätze für den Zugriff auf die Objekteigenschaften:

const name = hero.name;const realName = hero.realName;// is equivalent to:const { name, realName } = hero;

es ist sichtbar, dass die Objektdestrukturierung praktischer ist, da weder die Eigenschaftsnamen noch die Objektvariable dupliziert werden.

2. Extrahieren einer Eigenschaft

Die grundlegende Syntax der Objektdestrukturierung ist ziemlich einfach:

const { identifier } = expression;

Wobei identifier der Name der Eigenschaft ist, auf die zugegriffen werden soll, und expression zu einem Objekt ausgewertet werden soll. Nach der Destrukturierung enthält die Variable identifier den Eigenschaftswert.

Hier ist der entsprechende Code, der einen Eigenschaftenzugriff verwendet:

const identifier = expression.identifier;

Versuchen wir die Objektdestrukturierung in der Praxis:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name } = hero;name; // => 'Batman'

Die Anweisung const { name } = hero definiert die Variable name und initialisiert sie mit dem Wert der Eigenschaft hero.name.

3. Extrahieren mehrerer Eigenschaften

Um das Objekt in mehrere Eigenschaften zu zerlegen, zählen Sie so viele Eigenschaften auf, wie Sie möchten, und fügen Sie dazwischen Kommas , hinzu:

const { identifier1, identifier2, ..., identifierN } = expression;

Wobei identifier1, …, identifierN Namen von Eigenschaften sind, auf die zugegriffen werden soll, und expression zu einem Objekt ausgewertet werden soll. Nach der Destrukturierung enthalten die Variablen identifier1, …, identifierN entsprechende Eigenschaftswerte.

Hier ist der entsprechende Code:

const identifier1 = expression.identifier1;const identifier2 = expression.identifier2;// ...const identifierN = expression.identifierN;

Schauen wir uns noch einmal das Beispiel aus dem ersten Abschnitt an, in dem 2 Eigenschaften extrahiert werden:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, realName } = hero;name; // => 'Batman',realName; // => 'Bruce Wayne'

const { name, realName } = hero erstellt 2 Variablen name und realName, denen Werte der entsprechenden Eigenschaften hero.name und hero.realName zugewiesen sind.

4. Standardwerte

Wenn das destrukturierte Objekt nicht über die in der Destrukturierungszuweisung angegebene Eigenschaft verfügt, wird die Variable mit undefined zugewiesen. Mal sehen, wie es passiert:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies } = hero;enemies; // => undefined

Nach der Destrukturierung ist die Variable enemies undefined, da die Eigenschaft enemies im Objekt hero nicht vorhanden ist.

Glücklicherweise können Sie einen Standardwert festlegen, wenn die Eigenschaft im destrukturierten Objekt nicht vorhanden ist. Hier ist die grundlegende Syntax:

const { identifier = defaultValue } = expression;

Wobei identifier der Name der Eigenschaft ist, auf die zugegriffen werden soll, und expression zu einem Objekt ausgewertet werden soll. Nach der Destrukturierung enthält die Variable identifier den Eigenschaftswert oder wird mit defaultValue zugewiesen, wenn die Eigenschaft identifier nicht vorhanden ist.

Hier ist der entsprechende Code:

const identifier = expression.identifier === undefined ? defaultValue : expression.identifier;

Lassen Sie uns das vorherige Codebeispiel ändern und die Standardwertfunktion verwenden:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { enemies = } = hero;enemies; // => 

Anstelle von undefined ist die Variable enemies standardmäßig .

5. Aliase

Wenn Sie Variablen mit anderen Namen als den Eigenschaften erstellen möchten, können Sie die Aliasing-Funktion der Objektdestrukturierung verwenden.

const { identifier: aliasIdentifier } = expression;

identifier ist der Name der Eigenschaft, auf die zugegriffen werden soll, aliasIdentifier ist der Variablenname, und expression sollte zu einem Objekt ausgewertet werden. Nach der Destrukturierung enthält die Variable aliasIdentifier den Eigenschaftswert.

Der äquivalente Code:

const aliasIdentifier = expression.identifier;

Hier ist ein Beispiel für die Objektdestrukturierungs-Alias-Funktion:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { realName: secretName } = hero;secretName; // => 'Bruce Wayne'

Bei const { realName: secretName } = hero definiert die Destrukturierung eine neue Variable secretName (Alias-Variable) und weist ihr den Wert hero.realName zu.

6. Extrahieren von Eigenschaften aus verschachtelten Objekten

In den vorherigen Beispielen waren die Objekte einfach: Die Eigenschaften haben primitive Datentypen (z. B. Zeichenfolgen).

Oft können Objekte in anderen Objekten verschachtelt werden. Mit anderen Worten, einige Eigenschaften können Objekte enthalten.

In diesem Fall können Sie weiterhin die Objektdestrukturierung verwenden und von deep aus auf Eigenschaften zugreifen. Hier ist die grundlegende Syntax:

const { nestedObjectProp: { identifier } } = expression;

nestedObjectProp ist der Name der Eigenschaft, die ein verschachteltes Objekt enthält. identifier ist der Eigenschaftsname, auf den vom verschachtelten Objekt aus zugegriffen werden soll. expression sollte für das destrukturierte Objekt ausgewertet werden.

Nach der Destrukturierung enthält die Variable identifier den Eigenschaftswert des verschachtelten Objekts.

Die obige Syntax ist äquivalent zu:

const identifier = expression.nestedObjectProp.identifier;

Die Verschachtelungsebene, aus der Sie Eigenschaften extrahieren können, ist unbegrenzt. Wenn Sie Eigenschaften aus der Tiefe extrahieren möchten, fügen Sie einfach weitere verschachtelte geschweifte Klammern hinzu:

const { propA: { propB: { propC: { .... } } } } = object;

Beispielsweise enthält das Objekt hero ein verschachteltes Objekt { city: 'Gotham'}.

const hero = { name: 'Batman', realName: 'Bruce Wayne', address: { city: 'Gotham' }};// Object destructuring:const { address: { city } } = hero;city; // => 'Gotham'

Mit der Objektdestrukturierung const { address: { city } } = hero können Sie vom verschachtelten Objekt aus auf die Eigenschaft city zugreifen.

7. Extrahieren eines dynamischen Namens Eigenschaft

Sie können Eigenschaften mit einem dynamischen Namen in Variablen extrahieren (der Eigenschaftsname ist zur Laufzeit bekannt):

const { : identifier } = expression;

propName der Ausdruck sollte einen Eigenschaftsnamen (normalerweise eine Zeichenfolge) ergeben, und identifier sollte den Variablennamen angeben, der nach der Destrukturierung erstellt wurde. Das zweite expression sollte für das Objekt ausgewertet werden, das Sie zerstören möchten.

Ein äquivalenter Code ohne Objektdestrukturierung:

const identifier = expression;

Schauen wir uns ein Beispiel an, in dem prop den Eigenschaftsnamen enthält:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const prop = 'name';const { : name } = hero;name; // => 'Batman'

const { : name } = hero ist eine Objektdestrukturierung, die der Variablen name den Wert hero zuweist, wobei prop eine Variable ist, die den Eigenschaftsnamen enthält.

8. Rest-Objekt nach der Destrukturierung

Die Rest-Syntax ist nützlich, um die verbleibenden Eigenschaften nach der Destrukturierung zu sammeln:

const { identifier, ...rest } = expression;

Wobei identifier der Name der Eigenschaft ist, auf die zugegriffen werden soll, und expression zu einem Objekt ausgewertet werden soll.

Nach der Destrukturierung enthält die Variable identifier den Eigenschaftswert. rest Variable ist ein einfaches Objekt mit den verbleibenden Eigenschaften.

Extrahieren wir beispielsweise die Eigenschaft name, behalten aber den Rest der Eigenschaften bei:

const hero = { name: 'Batman', realName: 'Bruce Wayne'};const { name, ...realHero } = hero;realHero; // => { realName: 'Bruce Wayne' }

Die Destrukturierung const { name, ...realHero } = hero extrahiert die Eigenschaft name.

Gleichzeitig werden die verbleibenden Eigenschaften (in diesem FallrealName) in der Variablen realHero: { realName: 'Bruce Wayne' } gesammelt.

9. Häufige Anwendungsfälle

9.1 Eigenschaften an Variablen binden

Wie in vielen Beispielen zuvor gezeigt, bindet die Objektdestrukturierung Eigenschaftswerte an Variablen.

Die Objektdestrukturierung kann Variablen, die mit const, let und var deklariert wurden, Werte zuweisen. Oder sogar einer bereits vorhandenen Variablen zuweisen.

Hier erfahren Sie beispielsweise, wie Sie mit der Anweisung let destrukturieren:

// letconst hero = { name: 'Batman',};let { name } = hero;name; // => 'Batman'

So zerstören Sie mit der Anweisung var:

// varconst hero = { name: 'Batman',};var { name } = hero;name; // => 'Batman'

Und wie man eine bereits deklarierte Variable zerstört:

// existing variablelet name;const hero = { name: 'Batman',};({ name } = hero);name; // => 'Batman'

Ich finde es befriedigend, den Zyklus for..of mit der Objektdestrukturierung zu kombinieren, um die Eigenschaft sofort zu extrahieren:

const heroes = ;for (const { name } of heroes) { console.log(name); // logs 'Batman', 'Joker'}

9.2 Funktionsparameter Destrukturierung

Im Allgemeinen kann die Objektdestrukturierung überall dort platziert werden, wo eine Zuweisung erfolgt.

Sie können beispielsweise ein Objekt direkt in der Parameterliste einer Funktion zerstören:

const heroes = ;const names = heroes.map( function({ name }) { return name; });names; // => 

function({ name }) destrukturiert den Funktionsparameter und erstellt eine Variable name, die den Wert der Eigenschaft name enthält.

10. Zusammenfassung

Die Objektdestrukturierung ist eine leistungsstarke Funktion, mit der Sie Eigenschaften aus einem Objekt extrahieren und diese Werte an Variablen binden können.

Ich mag besonders an der Objektdestrukturierung die prägnante Syntax und die Fähigkeit, mehrere Variablen in einer Anweisung zu extrahieren.

Hoffentlich hat mein Beitrag Ihnen geholfen zu sehen, wie nützlich die Objektdestrukturierung ist!