ホームページ  >  記事  >  ウェブフロントエンド  >  オプションのチェーン化とヌル合体

オプションのチェーン化とヌル合体

王林
王林オリジナル
2024-08-21 06:13:02693ブラウズ

Optional Chaining and Nullish Coalescing

オプションのチェーン: グレースフル アクセサー

ユーザーを表すオブジェクトがあり、そのアドレスにアクセスしたいとします。

過去には、次のようなことを行っていたかもしれません:

const user = {
 name: "Alice",
 address: { street: "123 Main St" }
};

const street = user.address && user.address.street;

console.log('Street: ', street); // Output: 123 Main St

しかし、ユーザー オブジェクトに住所プロパティがない場合、または住所オブジェクトに番地プロパティがない場合はどうなるのでしょうか?

エラーが発生します!

オプションのチェーンを入力してください!

この演算子 (?.) を使用すると、ネストされたプロパティに安全にアクセスでき、チェーンのいずれかの部分が欠落している場合は未定義を返します。

例:

const user = {
 name: "Bob"
};

const street = user.address?.street;
console.log('Street: ', street); // Output: undefined

コードがどれだけクリーンで簡潔になったかわかりますか?

ヌルリッシュ合体

デフォルト値のディフェンダー。

ここで、変数が null または未定義の場合に、デフォルト値を変数に割り当てたいと考えてみましょう。従来は、OR 演算子 (||) を使用することがありました。ただし、変数が 0 や空の文字列などの「偽」の値を保持している場合、予期しない動作が発生する可能性があります。

これが役立つ理由:

  • 冗長な if ステートメントまたは三項演算子を置き換えることによりコードを簡素化します。
  • これは、偽の値 (0 や空の文字列など) を「欠損」として扱う論理 OR 演算子 (||) とは異なり、特に null と未定義に焦点を当てています。
let userSettings = null; // Imagine this comes from an API or user input

// Without nullish coalescing:
let theme = userSettings !== null && userSettings !== undefined ? userSettings.theme : 'light';

// With nullish coalescing:
let theme = userSettings?.theme ?? 'light'; // If userSettings.theme is null or undefined, 'light' is used

重要なポイント:

  • ??の左側が最初に評価されます。
  • 左側が null または未定義の場合、右側が返されます。
  • それ以外の場合は、左側が返されます。

オプションのプロパティや欠落している可能性のあるデータを扱う場合に特に便利です。


オプションのチェーンとヌル合体により、より読みやすく、堅牢で、エラーに強いコードを作成できます。

以上がオプションのチェーン化とヌル合体の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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