JavaScript - for 文を使った配列のループ

JavaScript で配列のループ処理を行う方法は for、while、 forEach()、map() など複数あります。

その中でも最も使用頻度が高いのが for文です。

ここでは、for 文を使った配列のループ処理の仕方について説明します。

for 文の書式

for 文の書式は次の通りです。

for (初期化式; 条件式; 更新式) ステートメント

for 文のサンプルコード

一般的な for 文の書き方

for 文の一般的な書き方は次のようになります。

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

配列の要素数が多い場合の for 文

配列の要素数が多い場合、 arr.length で配列の長さを毎回取得するよりも、 最初に1度だけ取得した方が良いでしょう。

その場合、次のようなコードになります。

var arr = [1, 2, 3, 4, 5];

for (var i = 0, len = arr.length; i < len; i++){
	console.log(arr[i]);
}

次のように「len = arr.length」を for 文の前に出しても構いません。

var arr = [1, 2, 3, 4, 5];

var len = arr.length;
for (var i = 0; i < len; i++){
	console.log(arr[i]);
}

break 文で for 文を途中で抜け出す

途中で for 文を抜け出したい場合は break 文を使います。

次のコードは、要素の値が「4」の場合に、for 文を抜け出します。

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++){
	if (arr[i] == 4) break;
	console.log(arr[i]);
}

// 実行結果
1
2
3

continue 文で for 文をスキップする

特定の値のときにループをスキップしたい場合は、 continue 文を使います。

次のコードは、要素の値が「4」の場合に、スキップします。

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++){
	if (arr[i] == 4) continue;
	console.log(arr[i]);
}

// 実行結果
1
2
3
5

undefined 値をスキップする場合

疎な配列で undefined 値と存在しない要素をスキップする場合は、 continue を使って次のようなコードになります。

// 疎な配列
var arr = [1, 2, 3,, 5];

for (var i = 0; i < arr.length; i++){
	if (arr[i] === undefined) continue;
	console.log(arr[i]);
}

// 実行結果
1
2
3
5

まとめ

配列のループ処理をする場合に、最も使用頻度が高いのが for 文です。

for 文を抜け出す場合は break 文を使います。

for 文をスキップする場合は continue 文を使います。