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

未定義プロパティ エラーへの対処

JavaScript でネストされたデータ構造を扱う場合、「未定義のプロパティを読み取れません」エラーが発生するとイライラすることがあります。この問題は、未定義または null 値のプロパティにアクセスしようとすると発生します。次の配列を考えてみましょう:

const test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

この配列を反復処理してプロパティ c をログに記録しようとすると、次のようになります:

for (i=0; i<test.length; i++) {
    console.log(a.b.c);
}

では、a.b が含まれる 2 番目のエントリでエラーが発生します。未定義。このエラーを回避するための一般的なアプローチでは、プロパティ チェーンの各レベルをチェックします。

if (a && a.b) {
    console.log(a.b.c);
}

ただし、深くネストされたデータ構造を扱う場合、これは面倒になる可能性があります。幸いなことに、代替ソリューションがあります。

オプションのチェーン (ES2020 および TypeScript 3.7 )

ECMAScript 2020 以降、または TypeScript バージョン 3.7 に従って JavaScript を使用している場合以上の場合は、オプションのチェーンを利用できます。この演算子 ?. は、エラーをスローすることなく、ネストされたプロパティに安全にアクセスします。

console.log(obj?.a?.lot?.of?.properties);

ヘルパー関数の回避策 (以前の JavaScript バージョン)

以前のバージョンの JavaScript では、 ES6 アロー関数を使用した try/catch ヘルパー関数が解決策を提供します。

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

console.log(getSafe(() => obj.a.lot.of.properties));

オプションのデフォルト値を指定することもできます:

console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

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