入れ子（ネスト）で多階層にしたfor-inループ文

投稿日: 2013年1月26日作成者: alphasis

for-inループ文は、入れ子（ネスト）にして使うこともできる。

多次元の配列（配列型オブジェクト）や連想配列（単純なオブジェクト）の各要素に、何らかの処理を実行したいときに便利だ。

構文

２階層

２次元の配列（配列型オブジェクト）や連想配列（単純なオブジェクト）の各要素に、何らかの処理を実行したいときなど。

for ( 変数Ａ in オブジェクト ) {
繰り返し行う処理文
for ( 変数Ｂ in オブジェクト[変数Ａ] ) {
繰り返し行う処理文
}
}

３階層

３次元の配列（配列型オブジェクト）や連想配列（単純なオブジェクト）の各要素に、何らかの処理を実行したいときなど。

for ( 変数Ａ in オブジェクト ) {
繰り返し行う処理文
for ( 変数Ｂ in オブジェクト[変数Ａ] ) {
繰り返し行う処理文
for ( 変数Ｃ in オブジェクト[変数Ａ][変数Ｂ] ) {
繰り返し行う処理文
}
}
}

サンプル

２次元の連想配列（単純なオブジェクト）

<script type="text/javascript">
var $obj = {
propA: {
propA: "値１－１",
propB: "値１－２",
propC: "値１－３"
},
propB: {
propA: "値２－１",
propB: "値２－２",
propC: "値２－３"
},
propC: {
propA: "値３－１",
propB: "値３－２",
propC: "値３－３"
}
};
for ( var $keyA in $obj ) {
for ( var $keyB in $obj[$keyA] ) {
document . write( $obj[$keyA][$keyB] );
document . write( ', ' );
}
document . write( '<br />' );
}
</script>

↓↓↓出力結果↓↓↓

２次元配列（配列型オブジェクト）

<script type="text/javascript">
var $arr = new Array(
[ "要素１－１", "要素１－２", "要素１－３" ],
[ "要素２－１", "要素２－２", "要素２－３" ],
[ "要素３－１", "要素３－２", "要素３－３" ]
);
for ( var $keyA in $arr ) {
for ( var $keyB in $arr[$keyA] ) {
document . write( $arr[$keyA][$keyB] + ', ' );
}
document . write( '<br />' );
}
</script>

↓↓↓出力結果↓↓↓

３次元配列（配列型オブジェクト）

<script type="text/javascript">
var $arr = new Array(
[
[ "要素１－１－１", "要素１－１－２", "要素１－１－３" ],
[ "要素１－２－１", "要素１－２－２", "要素１－２－３" ],
[ "要素１－３－１", "要素１－３－２", "要素１－３－３" ]
],
[
[ "要素２－１－１", "要素２－１－２", "要素２－１－３" ],
[ "要素２－２－１", "要素２－２－２", "要素２－２－３" ],
[ "要素２－３－１", "要素２－３－２", "要素２－３－３" ]
],
[
[ "要素３－１－１", "要素３－１－２", "要素３－１－３" ],
[ "要素３－２－１", "要素３－２－２", "要素３－２－３" ],
[ "要素３－３－１", "要素３－３－２", "要素３－３－３" ]
]
);
for ( var $keyA in $arr ) {
for ( var $keyB in $arr[$keyA] ) {
for ( var $keyC in $arr[$keyA][$keyB] ) {
document . write( $arr[$keyA][$keyB][$keyC] + ', ' );
}
document . write( '<br />' );
}
}
</script>

↓↓↓出力結果↓↓↓

カテゴリー: for-in, JavaScript, リファレンス, 制御構造タグ: JavaScript 1.0 パーマリンク