JavaScriptでネストされたオブジェクト、まだ存在してアクセスする方法

JavaScriptは非常に素晴らしいことです。しかし、本当に奇妙なJavaScriptの何か、で混乱。あなたは、このエラーが発生し、アクセスネストされたオブジェクトにしようとしているときにそれらの一つがある：缶のない未定義の読み取りプロパティ「foo」で

ほとんどの場合、プロセスネストされたオブジェクトは、通常、我々は安全に最も内側のネストされた値にアクセスする必要があります。栗へ：

CONSTユーザー= {
    ID： 101 、
    電子メール： '[email protected]' 、
    personalInfo：{
        名前：「ジャック」、
        住所： {
            ライン1：「westwish STの、
            LINE2： 'washmasher' 、
            市： 'WALLAS' 、
            状態： 'WX'
        }
    }
}

私たちがアクセスしたいときにuser内部をnameとcityするとき、私たちは書きます。

constの名前= user.personalInfo.name。
constのuserCity = user.personalInfo.address.city。

それはシンプルで簡単です。しかし、何らかの理由user で personal利用できない、オブジェクト構造があるようです。

CONSTユーザー= {
    ID： 101 、
    電子メール： '[email protected]' 
}

あなたがアクセスしようとしている場合さて、 name あなたは取得します Cannot read property 'name' of undefined エラーを。

constの名前= user.personalInfo.name。 
//は、未定義のproperty'name「を読み取ることができません

我々は、オブジェクトではありませんアクセスキーにしようとしているためです name プロパティ。次のようにこのような状況を処理するために、ほとんどの開発者の一般的な方法があり、

constの名前=ユーザー&& user.personalInfo？user.personalInfo.name：ヌル。

あなたのネストされた構造が非常に簡単である場合、それは可能ですが、あなたのコードはルックスは非常に混乱しますので、データは、深い5または6にネストされている場合：

都市ましょう。
もし（
    データ && && data.user data.user.personalInfo && 
    data.user.personalInfo.addressDetails &&
    data.user.personalInfo.addressDetails.primaryAddress
   ）{
    市 = data.user.personalInfo.addressDetails.primaryAddress。
}

オリバースティールネストされたオブジェクトのアクセスモード

CONST名=（（ユーザー|| {}）personalInfo || {}）名前。

この表記を使用すると、未定義のプロパティを読み取ることができません遭遇することはありませんname「」練習は存在しない場合は、次のキーレベルは常に既存のオブジェクトからアクセスできるようになりますように、空のオブジェクトを作成し、ユーザーが存在するかどうかをチェックすることです。残念ながら、あなたはアクセスネストされた配列には、この技術を使用することはできません。

ネストされたオブジェクトの配列を使用してアクセスを減らします

アレイ減らす方法は、非常に強力ですが、ネストされたオブジェクトへのアクセスを保護するために使用することができます。

constのgetNestedObject =（nestedObj、pathArr）=> {
     リターン pathArr.reduce（（OBJ、キー）=> 
        （OBJ！？&& OBJ [キー] == '未定義'）OBJ [キー]：ヌル、nestedObj）。
}

// 配列要素渡されたオブジェクト構造 
CONST = getNestedObject名（ユーザ、[「PersonalInfo」、「名称」]）。

// 配列インデックス配列要素が渡されたのと同様に、ネストされた配列にアクセスするには。。 
のConst = getNestedObjectシティ（ユーザー、[ 'PersonalInfo'、 'アドレス' 0 '都市' ]）;
 // 都市のアドレスを返すであろう第一層

タイプ

あなたは上記の方法はあまりにも非主流であると思われる場合は、Typyライブラリを使用することができます。セキュアなアクセスネストされたオブジェクトに加えて、それは多くの素晴らしいことを行うことができます。Typy場合は、次のように、コードは次のとおりです。

「typy」からの輸入トン。

CONST名 = T（ユーザ、 'personalInfo.name' ）.safeObject。
CONST都市 = T（ユーザ、 'personalInfo.addresses [0] .city' ）.safeObject。
// アドレスは配列であります

ここでは、そのようなLodashやRAMDAなど他のいくつかのライブラリは、あなたがそれを行うことができ、あります。しかし、軽量なフロントエンドのプロジェクトで、あなただけの1つまたは複数のこれらのライブラリー方法の2つの、別の軽量ライブラリーのための最良の選択、または独自のライブラリを記述する必要がある場合は特に。