Einführung

JavaScript ist eine der beliebtesten Programmiersprachen und stellt Entwicklern eine Reihe von Operatoren zur Verfügung, mit denen sie verschiedene logische Operationen ausführen können. Unter diesen sind die Operatoren „Logisches ODER“ (||) und „Nullish Coalescing“ (??) grundlegende Werkzeuge für die Verwaltung von Standardwerten und den Umgang mit Nullwerten. Dieser Artikel befasst sich mit den Unterschieden zwischen diesen beiden Operatoren, ihren Anwendungsfällen und praktischen, komplexen Beispielen, um ihre Verwendung zu veranschaulichen.

Den logischen ODER-Operator (||) verstehen

Der logische ODER-Operator (||) in JavaScript wird häufig verwendet, um den ersten wahren Wert unter seinen Operanden oder den letzten Wert zurückzugeben, wenn keiner wahr ist. Es wird hauptsächlich zum Festlegen von Standardwerten verwendet.

Syntax

result = operand1 || operand2;

Wie es funktioniert

Das || Der Operator wertet von links nach rechts aus und gibt den ersten Operanden zurück, wenn er wahr ist; andernfalls wird der zweite Operand ausgewertet und zurückgegeben.

Beispiel 1: Standardwerte festlegen

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput || defaultText;
console.log(message); // Output: 'Hello, World!'

In diesem Beispiel ist userInput eine leere Zeichenfolge (falsch), daher wird defaultText zurückgegeben.

Beispiel 2: Umgang mit mehreren Werten

let firstName = null;
let lastName = 'Doe';

let name = firstName || lastName || 'Anonymous';
console.log(name); // Output: 'Doe'

Hier ist „Vorname“ null (falsch), daher wird „Nachname“ zurückgegeben, da er wahr ist.

Einschränkungen des logischen ODER-Operators (||).

Die Haupteinschränkung des || Der Operator besteht darin, dass er mehrere Werte als falsch behandelt, z. B. 0, NaN, '', falsch, null und undefiniert. Dies kann zu unerwarteten Ergebnissen führen, wenn diese Werte gültig sein sollen.

Einführung des Nullish Coalescing (??)-Operators

Der Nullish Coalescing (??)-Operator ist eine neuere Ergänzung zu JavaScript, die in ES2020 eingeführt wurde. Es ist für die Behandlung von Fällen konzipiert, in denen null oder undefiniert explizit als einzige berücksichtigte Nullwerte vorgesehen sind.

Syntax

result = operand1 ?? operand2;

Wie es funktioniert

Der ?? Der Operator gibt den rechten Operanden zurück, wenn der linke Operand null oder undefiniert ist. Andernfalls wird der linke Operand zurückgegeben.

Beispiel 1: Standardwerte festlegen

let userInput = '';
let defaultText = 'Hello, World!';

let message = userInput ?? defaultText;
console.log(message); // Output: ''

In diesem Beispiel ist userInput eine leere Zeichenfolge, die nicht null oder undefiniert ist und daher zurückgegeben wird.

Beispiel 2: Umgang mit Nullwerten

let firstName = null;
let lastName = 'Doe';

let name = firstName ?? lastName ?? 'Anonymous';
console.log(name); // Output: 'Doe'

Hier ist „firstName“ null, daher wird „lastName“ zurückgegeben, da er weder null noch undefiniert ist.

Vergleich von logischen ODER-Operatoren (||) und Nullish-Coalescing-Operatoren (??).

Beispiel 1: Vergleich falscher Werte

let value1 = 0;
let value2 = '';

let resultOR = value1 || 'default';
let resultNullish = value1 ?? 'default';

console.log(resultOR); // Output: 'default'
console.log(resultNullish); // Output: 0

In diesem Beispiel wird 0 von || als falsch angesehen Operator, aber ist ein gültiger Wert für das ?? Operator.

Beispiel 2: Verwendung beider Operatoren zusammen

let userInput = null;
let fallbackText = 'Default Text';

let message = (userInput ?? fallbackText) || 'Fallback Message';
console.log(message); // Output: 'Default Text'

Hier ist userInput null, daher wird fallbackText vom ?? verwendet. Operator. Anschließend wird das Ergebnis durch || überprüft Operator, aber da fallbackText wahr ist, wird er zurückgegeben.

Komplexe Beispiele für logische ODER- (||) und Nullish-Coalescing-Operatoren (??).

Beispiel 3: Verschachtelte Operationen mit Objekten

Stellen Sie sich ein Szenario vor, in dem Sie Standardwerte für verschachtelte Objekteigenschaften festlegen müssen.

let userSettings = {
  theme: {
    color: '',
    font: null
  }
};

let defaultSettings = {
  theme: {
    color: 'blue',
    font: 'Arial'
  }
};

let themeColor = userSettings.theme.color || defaultSettings.theme.color;
let themeFont = userSettings.theme.font ?? defaultSettings.theme.font;

console.log(themeColor); // Output: 'blue'
console.log(themeFont); // Output: 'Arial'

In diesem Beispiel ist userSettings.theme.color eine leere Zeichenfolge, daher wird defaultSettings.theme.color verwendet. userSettings.theme.font ist null, daher wird defaultSettings.theme.font verwendet.

Beispiel 4: Funktionsparameter mit Standardwerten

Beim Umgang mit Funktionsparametern möchten Sie möglicherweise Standardwerte für fehlende Argumente angeben.

function greet(name, greeting) {
  name = name ?? 'Guest';
  greeting = greeting || 'Hello';

  console.log(`${greeting}, ${name}!`);
}

greet(); // Output: 'Hello, Guest!'
greet('Alice'); // Output: 'Hello, Alice!'
greet('Bob', 'Hi'); // Output: 'Hi, Bob!'
greet(null, 'Hey'); // Output: 'Hey, Guest!'

In diesem Beispiel verwendet der Namensparameter das ?? Operator zum Festlegen des Standardwerts „Gast“, wenn der Name null oder undefiniert ist. Der Begrüßungsparameter verwendet || Operator zum Festlegen des Standardwerts „Hallo“, wenn die Begrüßung ein falscher Wert außer Null oder undefiniert ist.

Beispiel 5: Kombination mit optionaler Verkettung

Optionale Verkettung (?.) kann mit || kombiniert werden Und ?? um tief verschachtelte Objekteigenschaften sicher zu handhaben.

let user = {
  profile: {
    name: 'John Doe'
  }
};

let userName = user?.profile?.name || 'Anonymous';
let userEmail = user?.contact?.email ?? 'No Email Provided';

console.log(userName); // Output: 'John Doe'
console.log(userEmail); // Output: 'No Email Provided'

In diesem Beispiel stellt die optionale Verkettung sicher, dass, wenn ein Teil des Eigenschaftspfads nicht vorhanden ist, undefiniert zurückgegeben wird, wodurch Fehler vermieden werden. Das || Und ?? Operatoren stellen dann entsprechende Standardwerte bereit.

Best Practices und Anwendungsfälle

1. Verwenden Sie || für Broad Defaulting:

   • Wenn Sie Standardwerte für eine Reihe falscher Bedingungen angeben müssen (z. B. leere Zeichenfolgen, 0, NaN).

2. Verwenden ?? für präzise Nullprüfungen:

   • Wenn Sie speziell mit null oder undefiniert umgehen möchten, ohne andere falsche Werte zu beeinflussen.

3. Beides kombinieren:

   • Verwenden Sie eine Kombination aus || Und ?? für komplexe Szenarien, in denen Sie sowohl wahrheitsgemäße/falsche Werte als auch Nullwerte eindeutig behandeln müssen.

FAQs

Was bewirkt der logische ODER-Operator (||)?
Der Operator Logisches ODER (||) gibt den ersten wahren Wert unter seinen Operanden zurück oder den letzten Operanden, wenn keiner wahr ist.

Wann sollte ich den Nullish Coalescing (??)-Operator verwenden?
Verwenden Sie den Nullish Coalescing-Operator (??), wenn Sie null oder undefiniert speziell behandeln müssen, ohne andere falsche Werte wie 0 oder leere Zeichenfolgen als nullish zu behandeln.

Kann ich beide Operatoren zusammen verwenden?
Ja, Sie können beide || verwenden Und ?? zusammen, um verschiedene Arten von Werten zu verarbeiten und sicherzustellen, dass Ihre Codelogik verschiedene Fälle effektiv abdeckt.

Wie funktioniert || Mit leeren Zeichenfolgen umgehen?
Das || Der Operator behandelt leere Zeichenfolgen als falsch und gibt daher den nächsten Operanden zurück, wenn der erste eine leere Zeichenfolge ist.

Wird der Nullish Coalescing (??)-Operator in allen Browsern unterstützt?
Der ?? Der Operator wird in modernen Browsern und Umgebungen unterstützt, die ES2020 unterstützen. Für ältere Umgebungen müssen Sie möglicherweise einen Transpiler wie Babel verwenden.

Was sind die Unterschiede zwischen || Und ?? Operatoren?
Der Hauptunterschied besteht darin, dass || betrachtet mehrere Werte als falsch (z. B. 0, '', falsch), während ?? Behandelt null und undefiniert nur als Nullwerte.

Abschluss

Das Verständnis der Unterschiede zwischen den Operatoren „Logisches ODER“ (||) und „Nullish Coalescing“ (??) in JavaScript ist entscheidend für das Schreiben von robustem und fehlerfreiem Code. Das || Der Operator eignet sich hervorragend für allgemeine Ausfallszenarien, während ?? ist perfekt für den präzisen Umgang mit Nullwerten. Durch die ordnungsgemäße Verwendung dieser Operatoren können Sie sicherstellen, dass Ihr Code verschiedene Datenzustände effektiv verarbeitet und so ein nahtloses Benutzererlebnis bietet.