JavaScript 配列の値をループで取得するサンプル(for…in文)

JavaScriptの配列の値をループで取得するサンプルです。
for...in文を使用します。

目次

for...in文

for (変数 in 配列または連想配列の変数){
  実行される処理 (変数を使用する)
}

配列の値を取得するサンプル

for...in文で配列の値を取得するサンプルです。
4行目は、for...in文で配列の値の数だけ処理を繰り返します。

<script>
    var colors1 = ['赤','黄','青'];

    for( var i in colors1 ){
		document.write(colors1[i]); //赤 黄 青
		document.write(i,'<br />'); //0 1 2
    }
</script>

連想配列のキーと値を取得するサンプル

for...in文で連想配列のキーと値を取得するサンプルです。
2行目は、連想配列です。
4-7行目は、for...in文でキーと値を取得しています。

<script>
    var colors2 = {c1:'赤',c2:'黄',c3:'青'};

    for( var i in colors2 ){
		document.write(colors2[i]); //赤 黄 青
		document.write(i,'<br />'); //c1 c2 c3
    }
</script>

オブジェクト(連想配列)のキーと値を取得するサンプル

for...in文でオブジェクト(連想配列)のキーと値を取得するサンプルです。
2-5行目は、オブジェクト(連想配列)です。
7-10行目は、for...in文でキーと値を取得しています。

<script>
	var colors3 = new Object();
	colors3.first = '赤';
	colors3.second = '黄';
	colors3.third = '青';

    for( var i in colors3 ){
		document.write(colors3[i]); //赤 黄 青
		document.write(i,'<br />'); //first second third
    }
</script>

for...in文でbreakを使用するサンプル

for...in文でbreakを使用するサンプルです。
6行目は、breakでfor...in文のループから抜けます。
結果「赤」のみ出力されます。

<script>
    var colors1 = ['赤','黄','青'];

    for( var i in colors1 ){
		if(colors1[i] == '黄'){
			break;
		}
		document.write(colors1[i]); //赤
    }
</script>

for...in文でcontinueを使用するサンプル

for...in文でcontinueを使用するサンプルです。
6行目は、continueでfor...in文の先頭(4行目)に戻ります。
結果「赤」と「青」が出力されます。

<script>
    var colors1 = ['赤','黄','青'];

    for( var i in colors1 ){
		if(colors1[i] == '黄'){
			continue;
		}
		document.write(colors1[i]); //赤青
    }
</script>

関連の記事

JavaScript 配列を作成するサンプル
JavaScript if文で配列を比較するサンプル
JavaScript 配列を操作するサンプル(Arrayオブジェクト)



△上に戻る