ネストされたオブジェクト、配列、または JSON にアクセスして処理するにはどうすればよいですか?

Question

オブジェクトと配列を含むネストされたデータ構造があります。情報を抽出する方法、つまり特定または複数の値 (またはキー) にアクセスする方法は?

＃＃＃例えば：＃＃＃ リーリー

items

の 2 番目の項目の name にアクセスするにはどうすればよいですか?

Answer 1

この方法でアクセスできます

リーリー ＃＃＃または＃＃＃ リーリー

どちらの方法も同等です。

Answer 2

予備知識

JavaScript には、複数の値を含めることができるデータ型が 1 つだけあります: Object。 Array は特殊な形式のオブジェクトです。

(通常) オブジェクトの形式は次のとおりです

リーリー

配列の形式は

です。 リーリー

配列とオブジェクトはどちらも key -> value 構造を公開します。配列内のキーは数値である必要がありますが、オブジェクト内のキーとしては任意の文字列を使用できます。キーと値のペアは "プロパティ" とも呼ばれます。

ドット表記法を使用してプロパティにアクセスできます リーリー

または

ブラケット表記 (プロパティ名が有効な JavaScript ではない場合) 識別子名 [仕様]、またはname 変数の値です: リーリー

したがって、配列要素には括弧表記を使用してのみアクセスできます。

リーリー

ちょっと待って...JSON はどうですか?

JSON は、XML、YAML、CSV などと同様に、データのテキスト表現です。このようなデータを処理するには、まずそれを JavaScript データ型、つまり配列とオブジェクトに変換する必要があります (これらのデータの処理方法は先ほど説明しました)。質問

JavaScript で JSON を解析しますか? JSON の解析方法は で説明します。 さらに読む資料

配列とオブジェクトにアクセスする方法は JavaScript の基本知識であるため、

MDN JavaScript ガイド、特にさまざまな部分を読むことをお勧めします

• ユーザー対象ユーザー ＃＃＃＃＃＃配列＃＃＃＃＃＃
• 雄弁な JavaScript - データ構造
• ネストされたデータ構造へのアクセス

ネストされたデータ構造は、他の配列またはオブジェクトを参照する配列またはオブジェクトです。つまり、その値は配列またはオブジェクトです。このような構造には、ドットまたは括弧表記を連続して適用することでアクセスできます。

---

---

これは例です:

リーリー

2 番目のプロジェクトの

名前

にアクセスするとします。

これを段階的に行う方法を次に示します:

ご覧のとおり、data

はオブジェクトなので、ドット表記を使用してそのプロパティにアクセスできます。

items

属性には次のようにアクセスします:

リーリー 値は配列です。その 2 番目の要素にアクセスするには、括弧表記を使用する必要があります: リーリー 値はオブジェクトであり、ここでもドット表記を使用して name

プロパティにアクセスします。最終的には次のようになります:

リーリー

また、特に名前にドット表記が無効になる文字が含まれている場合は、任意の属性に括弧表記を使用できます。

リーリー プロパティにアクセスしようとしていますが、

未定義

のメッセージしか表示されません。

---

未定義

に遭遇した場合、ほとんどの場合、オブジェクト/配列にはその名前のプロパティが存在しないだけです。 リーリー

console.log

または

console.dir

を使用して、オブジェクト/配列の構造を確認します。アクセスしようとしているプロパティが、実際にはネストされたオブジェクト/配列で定義されている可能性があります。 リーリー

---

プロパティ名が動的で、事前にわからない場合はどうすればよいですか?

プロパティ名が不明な場合、またはオブジェクト/配列要素のすべてのプロパティにアクセスしたい場合は、 for...in ^{[MDN]# を使用できます。} ## オブジェクトと for [MDN] 配列をループしてすべてのプロパティ/要素を反復します。 ＃＃＃＃＃＃物体＃＃＃＃＃＃

data のすべてのプロパティを反復するには、次のように オブジェクト

を反復します。 リーリー

オブジェクトがどこから来たのか (そして何をしたいのか) に応じて、プロパティが実際にオブジェクトのプロパティであるか、それとも継承されたプロパティであるかを反復ごとにテストする必要がある場合があります。 Object#hasOwnProperty

[MDN]

を使用できます。 代码> for...in および hasOwnProperty の代わりに、

Object.keys [MDN] を使用できます。 ] 属性名の配列 : ^{を取得します リーリー ＃＃＃＃＃＃配列＃＃＃＃＃＃} data.items array のすべての要素を反復するには、for

ループを使用します。 リーリー

for...in を使用して配列を反復処理することも可能ですが、これを避けるべき理由がいくつかあります。

「for(var item in list)」を使用する理由JavaScript の配列の場合 悪い習慣と考えられますか?

. ECMAScript 5 に対するブラウザのサポートが増え続けるにつれて、配列メソッド forEach

[MDN]

も興味深い代替案になります。 : リーリー ES2015 (ES6) をサポートする環境では、

for...of ^[MDN]# # を使用することもできます。 # ループ。配列だけでなく、任意の

反復可能なオブジェクト

#: リーリー 各反復で、for...of は、アクセスまたは使用する「インデックス」なしで、反復可能オブジェクトの次の要素を直接提供します。 ^{データ構造の「深さ」がわからない場合はどうすればよいですか?} 不明なキーに加えて、データ構造の「深さ」(つまり、ネストされたオブジェクトがいくつあるか) も不明な場合があります。深くネストされたプロパティにアクセスする方法は、多くの場合、正確なデータ構造に依存します。 しかし、データ構造にバイナリ ツリーの表現などの繰り返しパターンが含まれている場合、解決策には通常 再帰

[Wikipedia] が含まれます。

データ構造のあらゆるレベルにアクセスします。

---

次は、バイナリ ツリーの最初のリーフ ノードを取得する例です。

リーリー

リーリー