Heim > Web-Frontend > js-Tutorial > Optionale Verkettung und Nullish Coalescing

Optionale Verkettung und Nullish Coalescing

王林
Freigeben: 2024-08-21 06:13:02
Original
829 Leute haben es durchsucht

Optional Chaining and Nullish Coalescing

Optionale Verkettung: Der Graceful Accessor

Angenommen, Sie haben ein Objekt, das einen Benutzer darstellt, und Sie möchten auf seine Adresse zugreifen.

In der Vergangenheit haben Sie vielleicht so etwas getan:

const user = {
 name: "Alice",
 address: { street: "123 Main St" }
};

const street = user.address && user.address.street;

console.log('Street: ', street); // Output: 123 Main St
Nach dem Login kopieren

Aber was passiert, wenn das Benutzerobjekt keine Adresseigenschaft oder das Adressobjekt keine Straßeneigenschaft hat?

Sie erhalten eine Fehlermeldung!

Geben Sie optionale Verkettung ein!

Mit diesem Operator (?.) können Sie sicher auf verschachtelte Eigenschaften zugreifen und undefiniert zurückgeben, wenn ein Teil der Kette fehlt.

Zum Beispiel:

const user = {
 name: "Bob"
};

const street = user.address?.street;
console.log('Street: ', street); // Output: undefined
Nach dem Login kopieren

Sehen Sie, wie viel klarer und prägnant der Code ist?

Nullish Coalescing

Der Standardwertverteidiger.

Stellen wir uns nun vor, Sie möchten einer Variablen einen Standardwert zuweisen, wenn diese null oder undefiniert ist. Herkömmlicherweise verwenden Sie möglicherweise den ODER-Operator (||). Dies kann jedoch zu unerwartetem Verhalten führen, wenn die Variable einen „falschen“ Wert wie 0 oder eine leere Zeichenfolge enthält.

Warum es nützlich ist:

  • Es vereinfacht den Code, indem es ausführliche if-Anweisungen oder ternäre Operatoren ersetzt.
  • Es konzentriert sich speziell auf Null und undefiniert, im Gegensatz zum logischen ODER-Operator (||), der auch falsche Werte (wie 0 oder leere Zeichenfolgen) als „fehlend“ behandelt.
let userSettings = null; // Imagine this comes from an API or user input

// Without nullish coalescing:
let theme = userSettings !== null && userSettings !== undefined ? userSettings.theme : 'light';

// With nullish coalescing:
let theme = userSettings?.theme ?? 'light'; // If userSettings.theme is null or undefined, 'light' is used
Nach dem Login kopieren

Kernpunkte:

  • Die linke Seite von ?? wird zuerst ausgewertet.
  • Wenn die linke Seite null oder undefiniert ist, wird die rechte Seite zurückgegeben.
  • Andernfalls wird die linke Seite zurückgegeben.

Es ist besonders praktisch, wenn es um optionale Eigenschaften oder möglicherweise fehlende Daten geht.


Optionale Verkettung und Nullish-Koaleszenz helfen Ihnen, besser lesbaren, robusteren und fehlerresistenteren Code zu schreiben.

Das obige ist der detaillierte Inhalt vonOptionale Verkettung und Nullish Coalescing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage