Heim > Web-Frontend > js-Tutorial > Hauptteil

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

王林
Freigeben: 2024-07-28 09:23:43
Original
812 Leute haben es durchsucht

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

導入

JavaScript は最も人気のあるプログラミング言語の 1 つであり、さまざまな論理演算を処理するためのさまざまな演算子を開発者に提供します。これらの中で、論理 OR (||) 演算子と Nullish Coalescing (??) 演算子は、デフォルト値を管理し、Nullish 値を処理するための基本的なツールです。この記事では、これら 2 つの演算子の違い、使用例、および使用法を説明する実際的で複雑な例について詳しく説明します。

論理和 (||) 演算子について

JavaScript の論理 OR (||) 演算子は、オペランドの中で最初の真実の値を返すか、真実でない値がない場合は最後の値を返すために広く使用されています。これは主にデフォルト値を設定するために使用されます。

構文

リーリー

使い方

||演算子は左から右に評価し、真の場合は最初のオペランドを返します。それ以外の場合は、2 番目のオペランドを評価して返します。

例 1: デフォルト値の設定

リーリー

この例では、userInput は空の文字列 (falsy) であるため、defaultText が返されます。

例 2: 複数の値の処理

リーリー

ここでは、firstName が null (偽) なので、lastName がそのまま返されます。

論理和 (||) 演算子の制限事項

|| の主な制限事項演算子の特徴は、0、NaN、''、false、null、unknown など、いくつかの値を false として扱うことです。これらの値が有効であることを意図している場合、これにより予期しない結果が生じる可能性があります。

Nullish Coalescing (??) オペレーターの紹介

Nullish Coalescing (??) 演算子は、JavaScript に最近追加されたもので、ES2020 で導入されました。これは、考慮される唯一の null 値であることが明示的に意図されている null または未定義のケースを処理するように設計されています。

構文

リーリー

使い方

??演算子は、左側のオペランドが null または未定義の場合に右側のオペランドを返します。それ以外の場合は、左側のオペランドを返します。

例 1: デフォルト値の設定

リーリー

この例では、userInput は空の文字列であり、null または未定義ではないため、それが返されます。

例 2: NULL 値の処理

リーリー

ここでは、firstName が null であるため、null でも未定義でもない lastName が返されます。

論理和演算子 (||) とヌル結合演算子 (??) の比較

例 1: 偽の値の比較

リーリー

この例では、0 は || によって偽であると見なされます。演算子ですが、?? の有効な値です。オペレーター

例 2: 両方の演算子を一緒に使用する

リーリー

ここでは、userInput が null であるため、fallbackText が ?? によって使用されます。オペレーター。次に、結果は || によってチェックされます。演算子ですが、fallbackText は true であるため、それが返されます。

論理和 (||) およびヌル合体 (??) 演算子の複雑な例

例 3: オブジェクトを使用したネストされた操作

ネストされたオブジェクトのプロパティにデフォルト値を設定する必要があるシナリオを考えてみましょう。

リーリー
この例では、userSettings.theme.color が空の文字列であるため、defaultSettings.theme.color が使用されます。 userSettings.theme.font は null なので、defaultSettings.theme.font が使用されます。

例 4: デフォルトを使用した関数パラメータ

関数パラメータを扱うときは、欠落している引数にデフォルト値を指定することができます。

リーリー
この例では、name パラメーターに ?? name が null または未定義の場合、演算子を使用してデフォルト値「Guest」を設定します。挨拶パラメータは || を使用します。演算子は、挨拶が null または未定義以外の偽の値の場合、デフォルト値「Hello」を設定します。

例 5: オプションのチェーンとの組み合わせ

オプションのチェーン (?.) は || と組み合わせることができます。そして ??深くネストされたオブジェクトのプロパティを安全に処理するため。

リーリー
この例では、オプションのチェーンにより、プロパティ パスの一部が存在しない場合は unknown が返され、エラーが防止されます。 ||そして ??その後、演算子は適切なデフォルト値を提供します。

ベストプラクティスとユースケース

  1. 使用する ||広範なデフォルトの場合:

    さまざまな偽の条件 (空の文字列、0、NaN など) に対してデフォルト値を指定する必要がある場合。
  2. 使う??正確なヌルチェック用:

    他の偽の値に影響を与えずに、特に null または未定義を処理したい場合。
  3. 両方を組み合わせる:

    • 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 logische ODER-Operator (||) gibt den ersten wahren Wert unter seinen Operanden oder den letzten Operanden zurück, wenn keiner wahr ist.

Wann sollte ich den Nullish Coalescing (??)-Operator verwenden?
Verwenden Sie den Operator Nullish Coalescing (??), 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 ?? Betreiber?
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!

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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!