オブジェクトと配列を含むネストされたデータ構造があります。情報を抽出する方法、つまり特定または複数の値 (またはキー) にアクセスする方法は?
の 2 番目の項目の name にアクセスするにはどうすればよいですか?
name
この方法でアクセスできます
どちらの方法も同等です。
JavaScript には、複数の値を含めることができるデータ型が 1 つだけあります: Object。 Array は特殊な形式のオブジェクトです。
(通常) オブジェクトの形式は次のとおりです
配列の形式は
配列とオブジェクトはどちらも key -> value 構造を公開します。配列内のキーは数値である必要がありますが、オブジェクト内のキーとしては任意の文字列を使用できます。キーと値のペアは "プロパティ" とも呼ばれます。
key -> value
ドット表記法を使用してプロパティにアクセスできます リーリー
ブラケット表記 (プロパティ名が有効な JavaScript ではない場合) 識別子名 [仕様]、またはname 変数の値です: リーリー
リーリー
JavaScript で JSON を解析しますか? JSON の解析方法は で説明します。 さらに読む資料
MDN JavaScript ガイド、特にさまざまな部分を読むことをお勧めします
名前
ご覧のとおり、data
ご覧のとおり、
items
リーリー 値は配列です。その 2 番目の要素にアクセスするには、括弧表記を使用する必要があります: リーリー 値はオブジェクトであり、ここでもドット表記を使用して name
値は配列です。その 2 番目の要素にアクセスするには、括弧表記を使用する必要があります:
値はオブジェクトであり、ここでもドット表記を使用して
リーリー プロパティにアクセスしようとしていますが、
のメッセージしか表示されません。
または
を使用して、オブジェクト/配列の構造を確認します。アクセスしようとしているプロパティが、実際にはネストされたオブジェクト/配列で定義されている可能性があります。 リーリー プロパティ名が動的で、事前にわからない場合はどうすればよいですか? プロパティ名が不明な場合、またはオブジェクト/配列要素のすべてのプロパティにアクセスしたい場合は、 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] が含まれます。 データ構造のあらゆるレベルにアクセスします。 次は、バイナリ ツリーの最初のリーフ ノードを取得する例です。リーリー リーリー
リーリー プロパティ名が動的で、事前にわからない場合はどうすればよいですか? プロパティ名が不明な場合、またはオブジェクト/配列要素のすべてのプロパティにアクセスしたい場合は、 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] が含まれます。 データ構造のあらゆるレベルにアクセスします。 次は、バイナリ ツリーの最初のリーフ ノードを取得する例です。リーリー リーリー
プロパティ名が不明な場合、またはオブジェクト/配列要素のすべてのプロパティにアクセスしたい場合は、 for...in [MDN]# を使用できます。 ## オブジェクトと for [MDN] 配列をループしてすべてのプロパティ/要素を反復します。 ＃＃＃＃＃＃物体＃＃＃＃＃＃
for...in
data のすべてのプロパティを反復するには、次のように オブジェクト
オブジェクトがどこから来たのか (そして何をしたいのか) に応じて、プロパティが実際にオブジェクトのプロパティであるか、それとも継承されたプロパティであるかを反復ごとにテストする必要がある場合があります。 Object#hasOwnProperty
を使用できます。 代码> for...in および hasOwnProperty の代わりに、
を使用できます。 代码> for...in および hasOwnProperty
Object.keys [MDN] を使用できます。 ] 属性名の配列 : を取得します リーリー ＃＃＃＃＃＃配列＃＃＃＃＃＃ data.items array のすべての要素を反復するには、for
[MDN] を使用できます。 ]
for...in を使用して配列を反復処理することも可能ですが、これを避けるべき理由がいくつかあります。
. ECMAScript 5 に対するブラウザのサポートが増え続けるにつれて、配列メソッド forEach
も興味深い代替案になります。 : リーリー ES2015 (ES6) をサポートする環境では、
for...of [MDN]# # を使用することもできます。 # ループ。配列だけでなく、任意の
#: リーリー 各反復で、for...of は、アクセスまたは使用する「インデックス」なしで、反復可能オブジェクトの次の要素を直接提供します。 データ構造の「深さ」がわからない場合はどうすればよいですか? 不明なキーに加えて、データ構造の「深さ」(つまり、ネストされたオブジェクトがいくつあるか) も不明な場合があります。深くネストされたプロパティにアクセスする方法は、多くの場合、正確なデータ構造に依存します。 しかし、データ構造にバイナリ ツリーの表現などの繰り返しパターンが含まれている場合、解決策には通常 再帰
for...of
[Wikipedia] が含まれます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
この方法でアクセスできます
リーリー ＃＃＃または＃＃＃ リーリーどちらの方法も同等です。
予備知識
JavaScript には、複数の値を含めることができるデータ型が 1 つだけあります: Object。 Array は特殊な形式のオブジェクトです。
(通常) オブジェクトの形式は次のとおりです
リーリー配列の形式は
です。 リーリー配列とオブジェクトはどちらも
key -> value構造を公開します。配列内のキーは数値である必要がありますが、オブジェクト内のキーとしては任意の文字列を使用できます。キーと値のペアは "プロパティ" とも呼ばれます。ドット表記法を使用してプロパティにアクセスできます リーリー
またはブラケット表記 (プロパティ名が有効な JavaScript ではない場合) 識別子名 [仕様]、またはname 変数の値です: リーリー
したがって、配列要素には括弧表記を使用してのみアクセスできます。リーリー
ちょっと待って...JSON はどうですか?
JSON は、XML、YAML、CSV などと同様に、データのテキスト表現です。このようなデータを処理するには、まずそれを JavaScript データ型、つまり配列とオブジェクトに変換する必要があります (これらのデータの処理方法は先ほど説明しました)。質問JavaScript で JSON を解析しますか? JSON の解析方法は で説明します。 さらに読む資料
配列とオブジェクトにアクセスする方法は JavaScript の基本知識であるため、MDN JavaScript ガイド、特にさまざまな部分を読むことをお勧めします
- ユーザー対象ユーザー
＃＃＃＃＃＃配列＃＃＃＃＃＃
- 雄弁な JavaScript - データ構造
-
ネストされたデータ構造へのアクセス
ネストされたデータ構造は、他の配列またはオブジェクトを参照する配列またはオブジェクトです。つまり、その値は配列またはオブジェクトです。このような構造には、ドットまたは括弧表記を連続して適用することでアクセスできます。これは例です:
リーリー
2 番目のプロジェクトの名前
にアクセスするとします。
これを段階的に行う方法を次に示します:
はオブジェクトなので、ドット表記を使用してそのプロパティにアクセスできます。ご覧のとおり、dataitems
属性には次のようにアクセスします:リーリー
プロパティにアクセスします。最終的には次のようになります:値は配列です。その 2 番目の要素にアクセスするには、括弧表記を使用する必要があります:リーリー値はオブジェクトであり、ここでもドット表記を使用してnameリーリー
また、特に名前にドット表記が無効になる文字が含まれている場合は、任意の属性に括弧表記を使用できます。リーリー
未定義のメッセージしか表示されません。
未定義
に遭遇した場合、ほとんどの場合、オブジェクト/配列にはその名前のプロパティが存在しないだけです。
console.logリーリー
console.dirまたはを使用して、オブジェクト/配列の構造を確認します。アクセスしようとしているプロパティが、実際にはネストされたオブジェクト/配列で定義されている可能性があります。
リーリー
リーリー
プロパティ名が動的で、事前にわからない場合はどうすればよいですか?
プロパティ名が不明な場合、またはオブジェクト/配列要素のすべてのプロパティにアクセスしたい場合は、
for...in[MDN]# を使用できます。 ## オブジェクトと fordata のすべてのプロパティを反復するには、次のように オブジェクト
を反復します。 リーリーオブジェクトがどこから来たのか (そして何をしたいのか) に応じて、プロパティが実際にオブジェクトのプロパティであるか、それとも継承されたプロパティであるかを反復ごとにテストする必要がある場合があります。
[MDN]Object#hasOwnPropertyを使用できます。 代码> for...in および hasOwnPropertyの代わりに、Object.keys
ループを使用します。 リーリー[MDN] を使用できます。 ]for...in を使用して配列を反復処理することも可能ですが、これを避けるべき理由がいくつかあります。
「for(var item in list)」を使用する理由JavaScript の配列の場合 悪い習慣と考えられますか?.
[MDN]も興味深い代替案になります。 : リーリー ES2015 (ES6) をサポートする環境では、for...of
反復可能なオブジェクト[MDN]# # を使用することもできます。 # ループ。配列だけでなく、任意の#: リーリー 各反復で、
for...ofは、アクセスまたは使用する「インデックス」なしで、反復可能オブジェクトの次の要素を直接提供します。 データ構造の「深さ」がわからない場合はどうすればよいですか? 不明なキーに加えて、データ構造の「深さ」(つまり、ネストされたオブジェクトがいくつあるか) も不明な場合があります。深くネストされたプロパティにアクセスする方法は、多くの場合、正確なデータ構造に依存します。 しかし、データ構造にバイナリ ツリーの表現などの繰り返しパターンが含まれている場合、解決策には通常 再帰[Wikipedia]
データ構造のあらゆるレベルにアクセスします。が含まれます。次は、バイナリ ツリーの最初のリーフ ノードを取得する例です。
リーリー