ホームページ >ウェブフロントエンド >jsチュートリアル >オプションのチェーンとヌル合体は JavaScript での条件付き代入をどのように改善しますか?

オプションのチェーンとヌル合体は JavaScript での条件付き代入をどのように改善しますか?

Susan Sarandon
Susan Sarandonオリジナル
2024-12-21 01:27:10844ブラウズ

How Do Optional Chaining and Nullish Coalescing Improve Conditional Assignments in JavaScript?

EcmaScript 6 のオプションのチェーンと条件付き代入

条件付き代入と null セーフなプロパティ アクセスを簡略化するために、EcmaScript 6 ではいくつかの機能が導入されています。演算子によりコード効率が向上し、

オプションのチェーン (ECMAScript 2020)

オプションのチェーン。? で表されます。演算子を使用すると、NULL 許容プロパティの安全なトラバースが可能になります。この例では、オプションの連鎖を使用して 4 行目を簡略化できます:

const query = succeed => (succeed ? { value: 4 } : undefined);

let value = 3;
for (let x of [true, false]) {
  value = query(x)?.value;
}
// Output: 4

Nullish Coalescing Assignment (ECMAScript 2021)

条件付き代入の場合は、Nullish Coalescing Assignment 演算子??= を使用できます。左側のオペランドが null または未定義と評価された場合にのみ、そのオペランドに値が割り当てられます。これにより、try-catch ブロックや明示的な null チェックが不要になります:

query(x)?.value ??= value;

考慮事項と代替案

  • ターゲットの互換性:オプションのチェーンとヌル合体割り当ては、最新のブラウザと EcmaScript でサポートされていますそれぞれ2020年と2021年。 「Can I Use」(https://caniuse.com/) を使用して、特定の環境の互換性を確認します。
  • Babel プラグイン: 古い環境の場合、Babel プラグインを使用してトランスパイルできます。これらの演算子を互換性のある構文に変換します。
  • CoffeeScript の代替: CoffeeScript イディオムquery(x).value if query(x)?.value?同様の動作を実現しますが、繰り返しが必要です。
  • オブジェクト プロパティ アクセス: オブジェクト プロパティを設定する場合、??= 演算子は、プロパティがまだ割り当てられていない場合にのみ割り当てが行われるようにします。 。これにより、不要なセッター呼び出しが回避されます。
  • 関数の抽象化: 条件付き代入は純粋に関数呼び出しで表現できないため、ロジックを関数に抽象化することはできません。

以上がオプションのチェーンとヌル合体は JavaScript での条件付き代入をどのように改善しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。