JavaScript でネストされたオブジェクトのプロパティに安全にアクセスし、「未定義のプロパティを読み取れません」エラーを回避するにはどうすればよいですか?

ネストされたオブジェクトでの「未定義のプロパティを読み取れません」エラーを回避する

JavaScript では、一部のオブジェクトがプロパティがありません。これにより、存在しない可能性のあるプロパティにアクセスしようとすると、「未定義のプロパティを読み取れません」などのランタイム エラーが発生します。

解決策の 1 つは、条件ステートメントを使用して、プロパティにアクセスする前にプロパティが存在するかどうかを確認することです。ただし、深くネストされたオブジェクトの場合、これは面倒になる可能性があります。別のアプローチは、try/catch でヘルパー関数を利用することです。

function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}

この関数は 2 つのパラメータを取ります:

• fn: を取得する関数プロパティ値。
• defaultVal: 返されるオプションのデフォルト値プロパティが未定義の場合。

このヘルパー関数を使用すると、エラーをスローせずにネストされたプロパティにアクセスできます:

console.log(getSafe(() => obj.a.b.c)); // Logs "foo" or undefined if "c" doesn't exist

console.log(getSafe(() => obj.a.b.c, "Not found")); // Logs "Not found" if "c" doesn't exist

オプションのチェーン (ES2020 )

ECMAScript 2020 以降に従って JavaScript を使用している場合、オプションのチェーンを次のように利用できます。より簡単な解決策:

console.log(obj?.a?.b?.c); // Logs "foo" or undefined if any property in the chain is undefined

オプションのチェーンは、チェーン内の各プロパティをチェックし、未定義のプロパティがある場合は未定義を返し、エラーを防ぎます。

TypeScript バージョン 3.7 以降では、オプションのチェーンもサポートされています。カスタム ヘルパー関数や条件チェックを必要とせずに、ネストされたオブジェクトを処理する便利な方法を提供します。

以上がJavaScript でネストされたオブジェクトのプロパティに安全にアクセスし、「未定義のプロパティを読み取れません」エラーを回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。