Optional chaining: Wie funktioniert es und wie benutzt man es?

Optional chaining ist eine neue nützliche Funktion, die JavaScript hinzugefügt wurde, um einen Fehler wie "Cannot read property 'something' of undefined" beim Zugriff auf Eigenschaften und Methoden eines Objekts zu vermeiden, die möglicherweise nicht definiert sind. Zusätzlich zur Bequemlichkeit hilft optional chaining, den Code besser lesbar zu machen und Programmabstürze zu vermeiden.

Das Schlüsselwort hier ist "optional". Wenn Sie optional chaining verwenden, geben Sie an, dass der Zugriff auf die Eigenschaft oder Methode des Objekts optional ist, und wenn eine solche Eigenschaft oder Methode nicht vorhanden ist, wird der Wert undefined zurückgegeben, anstatt dass ein Fehler auftritt.

Die Syntax von optional chaining ist sehr einfach. Um auf eine Eigenschaft oder Methode eines Objekts zuzugreifen, fügen Sie einfach ein Fragezeichen nach dem Punkt hinzu. Wenn Sie beispielsweise ein Person-Objekt haben und den Wert der name-Eigenschaft abrufen möchten, können Sie schreiben person?.name . Wenn die name-Eigenschaft nicht vorhanden ist, wird der Wert undefined anstelle des Fehlers zurückgegeben. Kann das Gleiche auch für Methoden wie person gemacht werden?.sayHello().

Beispiel für die Verwendung von optional chaining:

// Person-Objekt ohne age-Eigenschaft

// Der Autor dieses Artikels kennt das Alter von John'a nicht :)

let age = person?.age;

// age wäre gleich undefined und es wird kein Fehler auftreten

Optional chaining ermöglicht auch den Zugriff auf verschachtelte Eigenschaften und Methoden eines Objekts. In diesem Fall wird nach jedem Punkt ein Fragezeichen hinzugefügt. Um beispielsweise auf die city-Eigenschaft eines Person-Objekts zuzugreifen, können Sie eine person schreiben?.address?.city.

Es ist jedoch zu beachten, dass optional chaining nur in Verbindung mit einem Null- und einem undefined-Wert funktioniert. Wenn die Eigenschaft null ist, wird ein Fehler vom TypeError: Cannot read property 'something' of null. Optional chaining wird auch in älteren Versionen von JavaScript nicht unterstützt, daher sollten Sie vor der Verwendung sicherstellen, dass es im Browser unterstützt wird oder dass das Polyfill installiert wird.

Was ist optional chaining?

Der optionale chaining-Operator ist ein Fragezeichen (?), und es wird nach dem Objekt oder der Eigenschaft angegeben, auf das zugegriffen wird. Also sagt dieser Operator dem Interpreter: "Wenn ein Objekt oder eine Eigenschaft null oder undefined ist, dann gib undefined zurück, anstatt einen Fehler zu werfen."

Beispiel für die Verwendung von optional chaining:

const obj = >>;console.log(obj?.property1?.property2?.property3);

const obj = ;console.log(obj?.property1?.property2);

Optional chaining ist sehr praktisch, wenn Sie mit Daten arbeiten, die möglicherweise nicht vollständig definiert sind oder von externen Quellen wie APIs stammen.

Wie optional chaining funktioniert

Verwendet Optional chaining einen Operator ?. , das nach der Eigenschaft oder Methode hinzugefügt wird, auf die wir zugreifen möchten. Wenn diese Eigenschaft oder Methode vorhanden ist, wird ihr Wert zurückgegeben oder eine Funktion aufgerufen. Wenn die Eigenschaft oder Methode nicht vorhanden ist, wird der Wert undefined .

Für ein klareres Verständnis betrachten wir das folgende Beispiel:

const user = >;const streetName = user.address?.street;console.log(streetName); // 'Lenin Street'

In diesem Beispiel haben wir ein user-Objekt mit unterschiedlichen Eigenschaften erstellt. Dann haben wir optional chaining verwendet, um auf die street-Eigenschaft innerhalb der address-Eigenschaft zuzugreifen. Ohne optional chaining, wenn die address-Eigenschaft nicht existiert, würden wir den Fehler "Cannot read property 'street' of undefined" erhalten. Aufgrund der optionalen Verkettung entspricht die Variable streetName jedoch dem Wert der street-Eigenschaft, oder undefined , wenn die address- oder street-Eigenschaften nicht vorhanden sind.

Optional chaining kann auch verwendet werden, um die Methoden eines Objekts aufzurufen:

const user = >;user.sayHello?.(); // 'Hello!'

In diesem Beispiel wird die sayHello-Methode aufgerufen, wenn sie existiert. Wenn es keine Methode gibt, wird nichts passieren.

Optional chaining kann auch mit Promis verwendet werden:

async function getData() const data = await getData()?.data;

In diesem Beispiel verwenden wir optional chaining, um aus dem Ergebnis einer asynchronen Abfrage auf die data-Eigenschaft zuzugreifen. Wenn das Objekt keine data-Eigenschaft enthält, ist die data-Variable undefined .

Optional chaining ist eine leistungsstarke und praktische Funktionalität, die den Zugriff auf Eigenschaften und Methoden von Objekten vereinfacht, insbesondere in Fällen, in denen wir nicht sicher sind, ob sie verfügbar sind.

Wann man optional chaining verwendet

• Wenn Sie mit komplexen Datenstrukturen wie Objekten, Arrays oder verschachtelten Eigenschaften arbeiten.
• Beim Zugriff auf Eigenschaften oder Methoden von Objekten, die definiert werden können oder möglicherweise gar nicht vorhanden sind.
• Wenn Sie aufeinanderfolgende Operationen für ein Objekt ausführen, bei dem eine der Operationen null oder undefined zurückgeben kann, müssen die folgenden Operationen abgebrochen werden, um einen Fehler zu vermeiden.
• Wenn Sie mit APIs oder externen Daten arbeiten, bei denen unvollständige oder falsche Daten abgerufen werden können.

Optional chaining ermöglicht es Ihnen, auf Eigenschaften und Methoden von Objekten zuzugreifen, ohne sich Gedanken darüber zu machen, dass sie undefined oder null sein könnten. Auf diese Weise können Sie sich auf die Logik Ihres Codes konzentrieren und Laufzeitfehler vermeiden.

Beispiele für die Verwendung von optional chaining

const user = >;const phoneNumber = user?.address?.phoneNumber;console.log(phoneNumber); // undefined

Im obigen Beispiel hat das Objekt user es gibt eine Eigenschaft address, das auch ein Objekt mit einer Eigenschaft ist phoneNumber. Eine relativ normale Methode, um den Wert dieser Eigenschaft zu erhalten, ohne optional chaining zu verwenden, könnte folgendermaßen aussehen:

const phoneNumber = user.address ? user.address.phoneNumber : undefined;

Dank optional chaining können wir jedoch den Wert erhalten phoneNumber direkt über die Eigenschaftenkette eines Objekts user. Wenn die Eigenschaft existiert, erhalten wir ihren Wert, andernfalls wird das Ergebnis sein undefined.

const books = [ < title: 'The Great Gatsby', author: < name: 'F. Scott Fitzgerald' >>, < title: 'To Kill a Mockingbird', author: < name: 'Harper Lee' >>, < title: '1984', author: < name: 'George Orwell' >>];const firstAuthor = books[0]?.author?.name;console.log(firstAuthor); // "F. Scott Fitzgerald"

In diesem Beispiel haben wir ein Array von Arbeitsmappen, von denen jede eine Eigenschaft enthält author, die wiederum eine Eigenschaft enthält name. Um den Namen des ersten Autors zu erhalten, können wir optional chaining verwenden. Wenn keine der Eigenschaften vorhanden ist, ist der Wert undefined wird stattdessen verwendet.

const data = ,< title: 'Post 2' >,< title: 'Post 3', likes: 5 >]>;const secondPostLikes = data.posts[1]?.likes;console.log(secondPostLikes); // undefined

In diesem Beispiel haben wir ein Objekt data, die die Eigenschaft enthält posts - ein Array mit Posts. Jeder Beitrag kann eine Eigenschaft haben likes, die optional ist. Mit optional chaining können wir versuchen, den Wert der Eigenschaft zu erhalten likes<>/strong> für den zweiten Beitrag. Wenn es existiert, erhalten wir seinen Wert, andernfalls erhalten wir - undefined.

Die Verwendung von optional chaining vermeidet daher Fehler bei fehlenden Eigenschaften oder Methoden von Objekten, wodurch der Code sicherer und lesbarer wird.

Vorteile von optional chaining

Optional chaining bietet mehrere Vorteile, die den Code lesbarer, sicherer und bequemer machen:

1. Sicherheit: Wenn optional chaining verwendet wird, wenn die Eigenschaft nicht vorhanden ist oder null oder undefined ist, wird der Code nicht unterbrochen und gibt undefined zurück. Dies verhindert Fehler und Ausnahmen, die mit dem direkten Zugriff auf nicht vorhandene oder Null-Eigenschaften verbunden sind.
2. Bequemlichkeit: Durch den Einsatz eines Bedieners ?. der Code wird prägnanter und prägnanter, da wir die Überprüfung jeder Eigenschaft überspringen können, bevor sie darauf zugreift.
3. Lesbarkeit: optional chaining verbessert das Verständnis des Codes, da es explizit zeigt, dass die Eigenschaft optional ist und möglicherweise nicht vorhanden ist. Dies macht den Code für andere Entwickler verständlicher, die leicht erkennen können, welche Eigenschaften erforderlich sind und welche weggelassen werden können.

Die Verwendung von optional chaining vermeidet Probleme, die mit der Verwendung nicht vorhandener Eigenschaften von Objekten verbunden sind. Es vereinfacht und verbessert den Code und macht ihn sicherer, bequemer und leicht lesbarer.

Optional chaining Einschränkungen

• Optional chaining kann nicht mit logischen Operatoren wie 'oder' verwendet werden (