DerOptional Chaining (?.)-Operator greift auf eine Eigenschaft eines Objekts zu oder ruft eine Funktion auf. Wenn das Objekt, auf das zugegriffen wird, oder die Funktion, die mit diesem Operator aufgerufen wird,undefined odernull ist, wird der Ausdruck kurzgeschlossen und ergibtundefined anstelle eines Fehlers.

Probieren Sie es aus

const adventurer = {  name: "Alice",  cat: {    name: "Dinah",  },};const dogName = adventurer.dog?.name;console.log(dogName);// Expected output: undefinedconsole.log(adventurer.someNonExistentMethod?.());// Expected output: undefined

Syntax

obj?.propobj?.[expr]func?.(args)

Beschreibung

Der?.-Operator ist wie der.-Chaining-Operator, mit dem Unterschied, dass anstatt eines Fehlers, wenn ein Verweisnullish (null oderundefined) ist, der Ausdruck mit einem Rückgabewert vonundefined kurzgeschlossen wird. Bei Funktionsaufrufen wirdundefined zurückgegeben, wenn die angegebene Funktion nicht existiert.

Dies führt zu kürzeren und einfacheren Ausdrücken beim Zugriff auf verkettete Eigenschaften, wenn die Möglichkeit besteht, dass ein Verweis fehlen könnte. Es kann auch hilfreich sein, den Inhalt eines Objekts zu untersuchen, wenn keine Garantie besteht, welche Eigenschaften erforderlich sind.

Betrachten Sie zum Beispiel ein Objektobj mit einer verschachtelten Struktur. Ohne Optional Chaining erfordert das Nachschlagen einer tief verschachtelten Untereigenschaft die Validierung der zwischengeschalteten Verweise wie folgt:

const nestedProp = obj.first && obj.first.second;

Der Wert vonobj.first wird bestätigt, nicht-null (und nicht-undefined) zu sein, bevor der Wert vonobj.first.second aufgerufen wird. Dies verhindert den Fehler, der entstehen würde, wenn Sieobj.first.second direkt ohne Prüfung vonobj.first aufrufen würden.

Dies ist ein idiomatisches Muster in JavaScript, wird jedoch langatmig, wenn die Kette lang ist, und es ist nicht sicher. Zum Beispiel, wennobj.first einFalsy-Wert ist, der nichtnull oderundefined ist, wie0, würde es immer noch zum Kurzschluss kommen undnestedProp würde zu0, was möglicherweise nicht wünschenswert ist.

Mit dem Optional Chaining Operator (?.) müssen Sie jedoch nicht explizit testen und darauf basierend auf den Zustand vonobj.first verzichten, bevor Sie versuchen, aufobj.first.second zuzugreifen:

const nestedProp = obj.first?.second;

Durch die Verwendung des?.-Operators anstelle von nur. weiß JavaScript, dass es implizit prüfen soll, obobj.first nichtnull oderundefined ist, bevor versucht wird, aufobj.first.second zuzugreifen. Wennobj.firstnull oderundefined ist, wird der Ausdruck automatisch kurzgeschlossen undundefined zurückgegeben.

Dies ist gleichbedeutend mit dem Folgenden, außer dass die temporäre Variable in der Tat nicht erstellt wird:

const temp = obj.first;const nestedProp =  temp === null || temp === undefined ? undefined : temp.second;

Optional Chaining kann nicht auf einem nicht deklarierten Stammobjekt verwendet werden, aber es kann mit einem Stammobjekt verwendet werden, dessen Wertundefined ist.

undeclaredVar?.prop; // ReferenceError: undeclaredVar is not defined

Optional Chaining bei Funktionsaufrufen

Sie können Optional Chaining verwenden, wenn versucht wird, eine Methode aufzurufen, die möglicherweise nicht existiert. Dies kann hilfreich sein, zum Beispiel wenn Sie eine API verwenden, bei der eine Methode möglicherweise nicht verfügbar ist, entweder wegen des Alters der Implementierung oder weil eine Funktion nicht auf dem Gerät des Benutzers verfügbar ist.

Die Verwendung von Optional Chaining mit Funktionsaufrufen führt dazu, dass der Ausdruck automatischundefined zurückgibt, anstatt eine Ausnahme auszulösen, wenn die Methode nicht gefunden wird:

const result = someInterface.customMethod?.();

Wenn jedoch eine Eigenschaft mit einem solchen Namen existiert, die keine Funktion ist, wird die Verwendung von?. immer noch eineTypeError-Ausnahme auslösen: "someInterface.customMethod is not a function".

eval?.() ist der kürzeste Weg, um in denindirect eval-Modus einzutreten.

Optional Chaining mit Ausdrücken

Sie können den Optional Chaining Operator auch mit derBracket-Notation verwenden, die es ermöglicht, einen Ausdruck als Eigenschaftsnamen zu übergeben:

const propName = "x";const nestedProp = obj?.[propName];

Dies ist besonders nützlich für Arrays, da Array-Indizes mit eckigen Klammern zugegriffen werden müssen.

function printMagicIndex(arr) {  console.log(arr?.[42]);}printMagicIndex([0, 1, 2, 3, 4, 5]); // undefinedprintMagicIndex(); // undefined; if not using ?., this would throw an error: "Cannot read properties of undefined (reading '42')"

Ungültiges Optional Chaining

Es ist ungültig, zu versuchen, das Ergebnis eines Optional-Chaining-Ausdrucks zuzuweisen:

const object = {};object?.property = 1; // SyntaxError: Invalid left-hand side in assignment

Vorlagenliteraltags können nicht eine Optionale Kette sein (sieheSyntaxError: tagged template cannot be used with optional chain):

String?.raw`Hello, world!`;String.raw?.`Hello, world!`; // SyntaxError: Invalid tagged template on optional chain

Der Konstruktor vonnew-Ausdrücken kann nicht eine Optionale Kette sein (sieheSyntaxError: new keyword cannot be used with an optional chain):

new Intl?.DateTimeFormat(); // SyntaxError: Invalid optional chain from new expressionnew Map?.();

Kurzschluss

Bei der Verwendung von Optional Chaining mit Ausdrücken, wenn der linke Operandnull oderundefined ist, wird der Ausdruck nicht ausgewertet. Zum Beispiel:

const potentiallyNullObj = null;let x = 0;const prop = potentiallyNullObj?.[x++];console.log(x); // 0 as x was not incremented

Nachfolgende Eigenschaftszugriffe werden ebenfalls nicht ausgewertet.

const potentiallyNullObj = null;const prop = potentiallyNullObj?.a.b;// This does not throw, because evaluation has already stopped at// the first optional chain

Dies entspricht:

const potentiallyNullObj = null;const prop =  potentiallyNullObj === null || potentiallyNullObj === undefined    ? undefined    : potentiallyNullObj.a.b;

Dieses Kurzschlussverhalten tritt jedoch nur innerhalb einer durchgehenden "Kette" von Eigenschaftszugriffen auf. Wenn Sie einen Teil der Kettegruppieren, werden nachfolgende Eigenschaftszugriffe dennoch ausgewertet.

const potentiallyNullObj = null;const prop = (potentiallyNullObj?.a).b;// TypeError: Cannot read properties of undefined (reading 'b')

Dies entspricht:

const potentiallyNullObj = null;const temp = potentiallyNullObj?.a;const prop = temp.b;

Außer dass dietemp-Variable nicht erstellt wird.

Beispiele

Einfaches Beispiel

Dieses Beispiel sucht den Wert dername-Eigenschaft für das MitgliedCSS in einer Map, wenn es kein solches Mitglied gibt. Das Ergebnis ist daherundefined.

const myMap = new Map();myMap.set("JS", { name: "Josh", desc: "I maintain things" });const nameBar = myMap.get("CSS")?.name;

Umgang mit optionalen Rückrufen oder Ereignishandlern

Wenn Sie Rückrufe verwenden oder Methoden von einem Objekt mit einemDestructuring-Muster abrufen, haben Sie möglicherweise nicht existierende Werte, die Sie nicht als Funktionen aufrufen können, es sei denn, Sie haben deren Existenz getestet. Mit?. können Sie diesen zusätzlichen Test vermeiden:

// Code written without optional chainingfunction doSomething(onContent, onError) {  try {    // Do something with the data  } catch (err) {    // Testing if onError really exists    if (onError) {      onError(err.message);    }  }}

// Using optional chaining with function callsfunction doSomething(onContent, onError) {  try {    // Do something with the data  } catch (err) {    onError?.(err.message); // No exception if onError is undefined  }}

Stapelung des Optional Chaining Operators

Mit verschachtelten Strukturen ist es möglich, Optional Chaining mehrmals zu verwenden:

const customer = {  name: "Carl",  details: {    age: 82,    location: "Paradise Falls", // Detailed address is unknown  },};const customerCity = customer.details?.address?.city;// This also works with optional chaining function callconst customerName = customer.name?.getName?.(); // Method does not exist, customerName is undefined

Kombination mit dem Nullish Coalescing Operator

DerNullish Coalescing Operator kann nach dem Optional Chaining verwendet werden, um einen Standardwert zu erstellen, wenn keiner gefunden wurde:

function printCustomerCity(customer) {  const customerCity = customer?.city ?? "Unknown city";  console.log(customerCity);}printCustomerCity({  name: "Nathan",  city: "Paris",}); // "Paris"printCustomerCity({  name: "Carl",  details: { age: 82 },}); // "Unknown city"

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Nullish Coalescing Operator (??)