JavaScript-Objektdestrukturierung

Zusammenfassung: In diesem Tutorial erfahren Sie mehr über die JavaScript-Objektdestrukturierung, die einzelnen Variablen Eigenschaften eines Objekts zuweist.

Wenn Sie lernen möchten, wie Sie ein Array zerstören, können Sie das Tutorial zur Array-Destrukturierung lesen.

Einführung in die JavaScript-Objektdestrukturierungszuweisung

Angenommen, Sie haben ein person -Objekt mit zwei Eigenschaften: firstName und lastName.

Code language: JavaScript (javascript)

Wenn Sie vor ES6 Variablen Eigenschaften des person -Objekts zuweisen möchten, gehen Sie normalerweise folgendermaßen vor:

Code language: JavaScript (javascript)

ES6 führt die Objektdestrukturierungssyntax ein, die eine alternative Möglichkeit bietet, Variablen Eigenschaften eines Objekts zuzuweisen:

Code language: JavaScript (javascript)

In diesem Beispiel werden die Eigenschaften firstName und lastName den Variablen fName bzw. lName zugewiesen.

In dieser Syntax:

Code language: JavaScript (javascript)

Der Bezeichner vor dem Doppelpunkt (:) ist die Eigenschaft des Objekts und der Bezeichner nach dem Doppelpunkt ist die Variable.

Beachten Sie, dass der Eigenschaftsname immer links ist, unabhängig davon, ob es sich um ein Objektliteral oder eine Objektdestrukturierungssyntax handelt.

Wenn die Variablen dieselben Namen wie die Eigenschaften des Objekts haben, können Sie den Code wie folgt präzisieren:

Code language: JavaScript (javascript)

In diesem Beispiel haben wir zwei Variablen firstName und lastName deklariert und den Variablen in derselben Anweisung die Eigenschaften des person-Objekts zugewiesen.

Es ist möglich, Deklaration und Zuweisung zu trennen. Sie müssen die Variablen jedoch in Klammern setzen:

Wenn Sie die Klammern nicht verwenden, interpretiert die JavaScript-Engine die linke Seite als Block und gibt einen Syntaxfehler aus.

Wenn Sie einer Variablen mithilfe der Objektdestrukturierung eine Eigenschaft zuweisen, die nicht vorhanden ist, wird die Variable auf undefined gesetzt. Zum Beispiel:

Code language: JavaScript (javascript)

In diesem Beispiel ist die Eigenschaft middleName im Objekt person nicht vorhanden, daher lautet die Variable middleName undefined.

Standardwerte festlegen

Sie können der Variablen einen Standardwert zuweisen, wenn die Eigenschaft eines Objekts nicht vorhanden ist. Beispielsweise:

Code language: JavaScript (javascript)

In diesem Beispiel haben wir der Variablen middleName die leere Zeichenfolge zugewiesen, wenn das person Objekt nicht über die Eigenschaft middleName verfügt.

Außerdem weisen wir der Variablen age die Eigenschaft currentAge mit dem Standardwert 18 zu.

Wenn das person-Objekt jedoch die Eigenschaft middleName hat, funktioniert die Zuweisung wie gewohnt:

Code language: JavaScript (javascript)

Destrukturierung eines Nullobjekts

Eine Funktion kann in einigen Situationen ein Objekt oder null zurückgeben. Zum Beispiel:

Code language: JavaScript (javascript)

Und Sie verwenden die Objektdestrukturierungszuweisung:

Code language: JavaScript (javascript)

Der Code wird eine TypeError:

Code language: JavaScript (javascript)

Um dies zu vermeiden, können Sie den Operator OR (||) verwenden, um das Objekt null auf ein leeres Objekt zurückzusetzen:

Code language: JavaScript (javascript)

Jetzt wird kein Fehler auftreten. Und die firstName und lastName werden undefined sein.

Verschachtelte Objektdestrukturierung

Angenommen, Sie haben ein employee -Objekt, das ein name -Objekt als Eigenschaft hat:

Code language: JavaScript (javascript)

Die folgende Anweisung destrukturiert die Eigenschaften des verschachtelten name -Objekts in einzelne Variablen:

Code language: JavaScript (javascript)

Es ist möglich, eine Eigenschaft mehreren Variablen mehrfach zuzuweisen:

Code language: JavaScript (javascript)

Destrukturierungsfunktionsargumente

Angenommen, Sie haben eine Funktion, die das person-Objekt anzeigt:

Code language: JavaScript (javascript)

Es ist möglich, das an die Funktion übergebene Objektargument wie folgt zu zerstören:

Code language: JavaScript (javascript)

Es sieht weniger ausführlich aus, insbesondere wenn Sie viele Eigenschaften des Argumentobjekts verwenden. Diese Technik wird häufig in React verwendet.

Zusammenfassung

• Die Objektdestrukturierung weist die Eigenschaften eines Objekts standardmäßig Variablen mit demselben Namen zu.