Grundlegendes zum JavaScript-Nullish-Coalescing-Operator (??)

Der Nullish Coalescing Operator (??) ist eine Funktion in JavaScript, die in ECMAScript 2020 eingeführt wurde. Mit diesem Operator können Sie Standardwerte für Variablen verarbeiten, die möglicherweise null oder undefiniert sind.

Vor seiner Einführung wurde für diesen Zweck häufig der logische ODER-Operator (||) verwendet, der jedoch nicht immer geeignet war, da er alle falschen Werte verarbeitet. Der ?? Der Operator bietet eine präzisere und klarere Alternative.

In diesem Artikel lernen Sie das Konzept des Nullish Coalescing Operators, seine Vorteile, seine Verwendung und einige Beispiele kennen.

Lasst uns gleich loslegen!?

Was ist der Nullish-Coalescing-Operator (??)?

Der nullish-coalescing-Operator (??) ist ein logischer Operator, der verwendet wird, um zu prüfen, ob ein Wert null oder undefiniert ist.

Wenn sein Operand auf der linken Seite null oder undefiniert ist, gibt er seinen Operanden auf der rechten Seite (Fallback-Wert) zurück.

Wenn sein linker Operand nicht null oder undefiniert ist, wird der linke Operand zurückgegeben.

Zum Beispiel:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

In diesem Beispiel ist userInput null, also ist das ?? Der Operator gibt den Fallback-Wert „default“ zurück.

Jetzt fragen Sie sich vielleicht, was der Unterschied zum logischen ODER || ist Betreiber??

Dies unterscheidet sich vom logischen ODER || Operator, weil || Der Operator gibt den Operanden auf der rechten Seite zurück, wenn der Operand auf der linken Seite ein falscher Wert ist (z. B. falsch, 0, '', NaN usw.), nicht nur null oder undefiniert. Während die ?? Der Operator konzentriert sich nur auf die Null oder das Undefinierte.

Warum sollte der Operator „Nullish Coalescing“ (??) anstelle des Operators „Logical OR“ (||) verwendet werden?

Das ?? Der Operator konzentriert sich nur auf Null- und undefinierte Werte, während || Der Operator prüft auf alle falschen Werte (wie false, 0, '', NaN usw.), die zu unerwarteten Ergebnissen führen können.

Zum Beispiel:

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

In diesem Beispiel ist das Alter im Objekt nicht definiert, daher ist das ?? Der Operator gibt den Fallback-Wert „Standardwert“ zurück.

Nehmen wir nun ein weiteres Beispiel, um dies besser zu verstehen.

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

In diesem Beispiel ist userInput eine leere Zeichenfolge, die ein falscher Wert und nicht null oder undefiniert ist, sodass das ?? Der Operator gibt zurück.

Jetzt wollen wir sehen, was passiert, wenn Sie || verwenden statt ??.

let userInput = '';
let inputValue = userInput || 'default';
console.log(inputValue); // Output: default

Hier das || Der Operator gibt den Standardwert zurück, da er jeden falschen Wert prüft.

Ein weiterer Grund für die Verwendung von ?? statt || Operator ist Lesbarkeit.

Code mit ?? ist im Allgemeinen klarer und besser lesbar, da sein Zweck direkt mit der Behandlung von Null und Undefiniert zusammenhängt. Es stellt einen Fallback-Wert bereit, wenn eine Variable null oder undefiniert ist, wodurch der Code besser lesbar und weniger fehleranfällig ist.

Nullish-Operator ?? mit logischen Operatoren UND/ODER

Sie können auch das ?? Operator mit anderen logischen Operatoren, um mehrere Bedingungen zu überprüfen.

Zum Beispiel:

let userInput = null;
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: default

In diesem Beispiel erhält inputValue den Wert „default“, da der linke Operand (userInput) null ist.

Jetzt wollen wir sehen, was passiert, wenn userInput nicht null ist.

let obj = {};
let value = obj.age ?? 'default value';
console.log(value); // Output: default value

Ups!! Dies löst einen Fehler aus??

Aber warum passiert das??

Dies geschieht, weil der Nullish Coalescing Operator (??) nicht direkt in logischen Operatoren wie || verwendet werden kann OR und && AND ohne entsprechende Klammern.

Der Grund dafür ist, dass JavaScript spezielle Regeln für die Operatorpriorität hat, die sich auf die Prioritätsstufen verschiedener Operatoren beziehen, also die Reihenfolge, in der Vorgänge ausgewertet werden.

Zum Beispiel: ?? hat eine niedrigere Priorität als || und &&. Wenn Sie es also in Klammern setzen, wird sichergestellt, dass es in logischen Ausdrücken zuerst ausgewertet wird.

Also die richtige Art zu verwenden?? direkt mit logischen Operatoren:

let userInput = '';
let inputValue = userInput ?? 'default';
console.log(inputValue); // Output: <empty string>

Hier zwingen die Klammern JavaScript, das ?? auszuwerten. Zuerst wird die Operation durchgeführt, und danach wird das Ergebnis in der logischen ODER-Operation mit „Alternative“ verwendet.

Abschluss

In JavaScript bietet der Nullish Coalescing Operator (??) eine klarere und konsistentere Möglichkeit, Standardwerte für null und undefiniert zu verarbeiten. Es vermeidet die Fallstricke des || Operator, indem keine unbeabsichtigten falschen Werte zurückgegeben werden. Die Verwendung des Nullish Coalescing Operator (??) kann Ihren Code sauberer, lesbarer und weniger fehleranfällig machen, insbesondere wenn es um optionale Werte geht. Das Verstehen und Verwenden des Nullish Coalescing Operator (??) kann zu effizienterem und wartbarerem Code führen.

Das ist alles für heute.

Ich hoffe, es war hilfreich.

Danke fürs Lesen.

Hier sind 45 weitere JavaScript-Tipps und Tricks für Entwickler.

Für weitere Inhalte wie diesen klicken Sie hier.

Folgen Sie mir auf X (Twitter), um tägliche Tipps zur Webentwicklung zu erhalten.

Codieren Sie weiter!!

Schauen Sie sich toast.log an, eine Browser-Erweiterung, mit der Sie Fehler, Warnungen und Protokolle sehen können, sobald sie auf Ihrer Website auftreten  –  ohne die Konsole des Browsers öffnen zu müssen. Klicken Sie hier, um 25 % Rabatt auf toast.log zu erhalten.

Das obige ist der detaillierte Inhalt vonGrundlegendes zum JavaScript-Nullish-Coalescing-Operator (??). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!