Nicht verwirren?? mit || in JavaScript: So unterscheiden sie sich!

?? vs. || in JavaScript: Der wenig bekannte Unterschied

Einführung

JavaScript bietet mehrere Möglichkeiten, undefinierte oder Nullwerte im Code zu verarbeiten. Zwei gängige Operatoren für diesen Zweck sind der Null-Koaleszenzoperator (??) und der logische ODER-Operator (||). Obwohl diese Operatoren auf den ersten Blick ähnlich erscheinen mögen, kann ihr Verhalten in bestimmten Situationen erheblich unterschiedlich sein. Das Verständnis der Unterschiede zwischen diesen beiden Operatoren ist wichtig, insbesondere für Anfänger, die präziseren und fehlerfreien Code schreiben möchten.

In diesem Leitfaden untersuchen wir den Unterschied zwischen ?? und || in JavaScript, indem Sie es Schritt für Schritt mit Beispielen aufschlüsseln, damit Sie in kürzester Zeit vom Nullpunkt zum Helden werden.

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

Der nullische Koaleszenzoperator ?? wird verwendet, um einen Fallback-Wert bereitzustellen, wenn mit null oder undefiniert umgegangen wird. Es prüft nur, ob ein Wert null oder undefiniert ist – und wenn ja, gibt es den bereitgestellten Fallback-Wert zurück.

Syntax:

let result = value ?? fallbackValue;

Wenn in diesem Ausdruck der Wert entweder null oder undefiniert ist, wird der FallbackValue zurückgegeben.

Beispiel 1: Verwendung des Nullish-Coalescing-Operators (??)

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

In diesem Beispiel ist der Name null, daher wird defaultName als Fallback „John Doe“ zugewiesen.

Kernpunkte:

• ?? Prüft auf null oder undefiniert.
• Es gibt den Wert auf der linken Seite zurück, wenn er NICHT null oder undefiniert ist, andernfalls wird der Fallback auf der rechten Seite zurückgegeben.

Was ist der logische ODER-Operator (||)?

Der logische ODER-Operator || ist ein weiterer Operator, der für Fallback-Werte verwendet wird, aber er funktioniert anders. Es prüft, ob die linke Seite des Ausdrucks ein falscher Wert ist. In JavaScript umfassen falsche Werte null, undefiniert, falsch, 0, NaN und '' (leere Zeichenfolge).

Syntax:

let result = value || fallbackValue;

Wenn der Wert falsch ist, wird fallbackValue zurückgegeben.

Beispiel 2: Verwendung des logischen ODER-Operators (||)

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

In diesem Fall ist das Alter 0, was ein falscher Wert ist, daher wird defaultAge 18 zugewiesen.

Kernpunkte:

• || prüft auf falsche Werte.
• Wenn der Wert auf der linken Seite falsch ist, wird der Fallback-Wert auf der rechten Seite zurückgegeben.

Der Hauptunterschied zwischen ?? und ||

Auf den ersten Blick ?? und || scheint den gleichen Zweck zu erfüllen – die Bereitstellung von Fallback-Werten –, aber es gibt einen wichtigen Unterschied:

• Das ?? Der Operator prüft nur auf null oder undefiniert.
• Das || Der Operator prüft auf falsche Werte.

Dieser subtile Unterschied wird entscheidend, wenn Sie es mit falschen, aber gültigen Werten wie 0, '' oder falsch

zu tun haben

Beispiel 3: ?? vs. || mit falschen Werten

let result = value ?? fallbackValue;

Hier ist count 0, was ein gültiger, aber in JavaScript falscher Wert ist.

• Bei Verwendung von ?? behält defaultCount1 0 bei, da 0 weder null noch undefiniert ist.
• Mit || wird defaultCount2 zu 10, da 0 ein falscher Wert ist.

Wann sollten Sie verwenden? oder ||?

Die Wahl zwischen ?? und || hängt von dem spezifischen Verhalten ab, das Sie wünschen.

Verwenden ?? Wann:

• Sie möchten null- oder undefinierte-Werte gezielt verarbeiten, ohne falsche Werte wie 0, false oder '' zu beeinflussen.
• Sie müssen gültige falsche Werte beibehalten, z. B. 0 (eine gültige Anzahl) oder '' (eine gültige leere Zeichenfolge).

Beispiel:

let name = null;
let defaultName = name ?? 'John Doe';

console.log(defaultName); // Output: 'John Doe'

In diesem Beispiel ist eine leere Zeichenfolge '' eine gültige Benutzereingabe, also ?? lässt es passieren, ohne es durch den Fallback zu ersetzen.

Verwenden Sie || Wann:

• Sie möchten alle falschen Werte (wie 0, false, NaN, '' und undefiniert) so behandeln, dass sie Fallback-Werte benötigen.
• Sie können problemlos Werte wie 0 oder falsch ersetzen.

Beispiel:

let result = value || fallbackValue;

Hier wird „false“ als „falsy“ behandelt und der Fallback „Nicht angemeldet“ verwendet.

Häufige Fallstricke und wie man sie vermeidet

Da Sie nun den Unterschied kennen, schauen wir uns ein paar häufige Fehler an, die Anfänger oft machen, und wie man sie vermeidet.

Fehler 1: || verwenden für gültige Falschwerte

let age = 0;
let defaultAge = age || 18;

console.log(defaultAge); // Output: 18

Problem: Sie wollten 0 als Ergebnis anzeigen, aber || hat es durch „Keine Punktzahl“ ersetzt, da 0 falsch ist.

Lösung: Verwendung ?? um 0 durchzulassen.

let count = 0;
let defaultCount1 = count ?? 10; // Using nullish coalescing
let defaultCount2 = count || 10; // Using logical OR

console.log(defaultCount1); // Output: 0
console.log(defaultCount2); // Output: 10

Fehler 2: Missverständnis von Nullish Coalescing

let userInput = '';
let fallbackInput = userInput ?? 'default input';

console.log(fallbackInput); // Output: ''

Erklärung: userPreference ist null, daher wird der Fallback false verwendet. Das ist das richtige Verhalten für ??.

Häufig gestellte Fragen

Kann ich verwenden? und || Zusammen?

Ja, Sie können bei Bedarf beide Operatoren in verschiedenen Teilen desselben Ausdrucks verwenden.

Beispiel:

let isLoggedIn = false;
let loginStatus = isLoggedIn || 'Not logged in';

console.log(loginStatus); // Output: 'Not logged in'

Dies prüft zunächst mit ??, ob null oder undefiniert ist. und sucht dann mit ||.

nach anderen falschen Werten

Wird der Nullish-Coalescing-Operator in allen Browsern unterstützt?

Das ?? Der Operator wird in modernen Browsern unterstützt, aber für ältere Umgebungen müssen Sie möglicherweise einen Transpiler wie Babel verwenden.

Was ist der Anwendungsfall für jeden Betreiber?

• Verwenden ?? wenn Sie sich speziell für null oder undefiniert interessieren.
• Verwenden Sie || wenn Sie mit falschen Werten umgehen möchten.

Tut ?? Mit anderen falschen Werten arbeiten?

Nein, ?? Prüft nur auf null und undefiniert, nicht auf andere falsche Werte wie false, 0 oder ''.

Abschluss

Verstehen Sie den Unterschied zwischen ?? und || in JavaScript ist entscheidend für das Schreiben von robustem und fehlerfreiem Code. Während beide Operatoren bei der Bereitstellung von Fallback-Werten hilfreich sind, unterscheidet sich ihr Verhalten bei der Behandlung falscher Werte. Verwenden ?? wenn Sie nach null oder undefiniert suchen und || verwenden müssen wenn Sie nach falschen Werten suchen möchten.

Wenn Sie diese Operatoren beherrschen, können Sie flexibleren und genaueren Code schreiben, der sich genau wie beabsichtigt verhält.

Das obige ist der detaillierte Inhalt vonNicht verwirren?? mit || in JavaScript: So unterscheiden sie sich!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!