JavaScript で「未定義のプロパティを読み取れません」エラーを防ぐ方法は?

未定義のプロパティ エラーを回避する方法

JavaScript では、さまざまなレベルのネストを持つオブジェクトが混在する配列がよく発生します。すべてのオブジェクトの深さが同じでない場合、配列を反復処理するときにエラーが発生する可能性があります。

問題:

オブジェクトのネストされたプロパティにアクセスしようとすると、そのプロパティへのパスが存在しない場合、JavaScript はエラーをスローします。たとえば、次のコードでは:

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

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

i が 1 の場合、テスト配列の 2 番目の要素には a プロパティが 1 つしかないため、ループは「未定義のプロパティを読み取れません」エラーをスローします。ネストされた b プロパティではありません。

解決策:

これらのエラーを回避する 1 つの方法は、以下を使用することです。アクセスする前に各プロパティが存在するかどうかを確認する条件演算子:

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

ただし、深くネストされたオブジェクトや確認する複数のプロパティがある場合、この方法は面倒になる可能性があります。

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

ES2020 以降の JavaScript バージョンの場合、オプションのチェーン(?.) は、アクセスする前にプロパティの存在を確認するためのより簡潔な方法を提供します。例:

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

配列内のどのオブジェクトにも a または b が存在しない場合、オプションの連鎖演算子は、エラーをスローする代わりに未定義を返します。

getSafe () ヘルパー関数 (ES2020 より前):

ES2020 より前の JavaScript バージョンの場合、 try/catch ブロックを使用してプロパティに安全にアクセスするヘルパー関数を定義できます。

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

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

この関数は、プロパティが存在する場合はプロパティ値を返し、プロパティが存在しない場合はデフォルト値を返します。

以上がJavaScript で「未定義のプロパティを読み取れません」エラーを防ぐ方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。