ホームページ >ウェブフロントエンド >jsチュートリアル >オプションのチェーン化とヌル合体
ユーザーを表すオブジェクトがあり、そのアドレスにアクセスしたいとします。
過去には、次のようなことを行っていたかもしれません:
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 や空の文字列などの「偽」の値を保持している場合、予期しない動作が発生する可能性があります。
これが役立つ理由:
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
オプションのプロパティや欠落している可能性のあるデータを扱う場合に特に便利です。
オプションのチェーンとヌル合体により、より読みやすく、堅牢で、エラーに強いコードを作成できます。
以上がオプションのチェーン化とヌル合体の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。