Heim Web-Frontend js-Tutorial JavaScript freischalten: Logisches ODER (||) vs. Nullish Coalescing Operator (??)

JavaScript freischalten: Logisches ODER (||) vs. Nullish Coalescing Operator (??)

Jul 28, 2024 am 09:23 AM

Unlocking JavaScript: Logical OR (||) vs Nullish Coalescing Operator (??)

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 zur Veranschaulichung ihrer Verwendung.

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;
Nach dem Login kopieren

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!'
Nach dem Login kopieren

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'
Nach dem Login kopieren

Hier ist „firstName“ null (falsch), daher wird „lastName“ zurückgegeben, da es 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;
Nach dem Login kopieren

Wie es funktioniert

Das ?? 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: ''
Nach dem Login kopieren

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'
Nach dem Login kopieren

Hier ist firstName null, daher wird lastName zurückgegeben, da es 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
Nach dem Login kopieren

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

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'
Nach dem Login kopieren

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'
Nach dem Login kopieren

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!'
Nach dem Login kopieren

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, um den Standardwert „Hallo“ festzulegen, 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'
Nach dem Login kopieren

In diesem Beispiel stellt die optionale Verkettung sicher, dass, wenn ein Teil des Eigenschaftspfads nicht existiert, er undefiniert zurückgegeben wird, wodurch Fehler vermieden werden. Das || Und ?? Die 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.

Das obige ist der detaillierte Inhalt vonJavaScript freischalten: Logisches ODER (||) vs. Nullish Coalescing Operator (??). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusionssystem, erklärt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Flüstern des Hexenbaum
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1676
14
PHP-Tutorial
1278
29
C#-Tutorial
1257
24
Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit Apr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

JavaScript und das Web: Kernfunktionalität und Anwendungsfälle JavaScript und das Web: Kernfunktionalität und Anwendungsfälle Apr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

JavaScript in Aktion: Beispiele und Projekte in realer Welt JavaScript in Aktion: Beispiele und Projekte in realer Welt Apr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

Verständnis der JavaScript -Engine: Implementierungsdetails Verständnis der JavaScript -Engine: Implementierungsdetails Apr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python gegen JavaScript: Community, Bibliotheken und Ressourcen Python gegen JavaScript: Community, Bibliotheken und Ressourcen Apr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Python vs. JavaScript: Entwicklungsumgebungen und Tools Python vs. JavaScript: Entwicklungsumgebungen und Tools Apr 26, 2025 am 12:09 AM

Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.

Die Rolle von C/C bei JavaScript -Dolmetschern und Compilern Die Rolle von C/C bei JavaScript -Dolmetschern und Compilern Apr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichen Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichen Apr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

See all articles