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

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

Patricia Arquette
リリース: 2024-12-05 07:37:09
オリジナル
427 人が閲覧しました

How Can I Safely Access Nested Object Properties in JavaScript and Avoid

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

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート