【JavaScript】繰り返し処理 - forの使用方法

JavaScript の for 文についてまとめました。

for文について

forの基本構文は次の通りです。

for (初期化式; 条件式; 増減式) { ... }

初期化式は最初に1回だけ実行されます。基本的にはループで使用するカウンタ変数を初期化するために使われます。

条件式はループの各反復の前に評価されます。この式が true である間だけ繰り返しループされます。省略可能ですが、その場合は常に true を返します。

増減式はループの各反復終わりに評価される式です。基本的にカウンタ変数の増減をするために使われます。

for (var i = 0; i < 10; i++) {
    document.writeln(i + '回目');
}

ブロック文の波括弧 ({ ... }) は処理内容が1つのみの場合は省略できますが、復数の処理文を実行する場合は省略できません。

for - JavaScript | MDN

for...in文について

for...in は指定された配列やオブジェクトに対して、先頭から順番に繰り返し処理を行ないます。

for (変数 in 配列／オブジェクト) { ... }

Java の拡張for文とイメージは近いですが、配列の場合は要素値ではなくインデックス番号が、オブジェクトの場合はキー名が変数に格納されます。

// 配列はインデックス値を取り出す
var fruits = ['apple','orange','grape']
for (var i in fruits) {
    document.writeln(i + ':' + fruits[i]);
}
// オブジェクトはキー名を取り出す
var train = {'width':300,'height':200}
for (var k in train) {
    document.writeln(k + ':' + train[k]);
}

for...in - JavaScript | MDN

for...of文について

for...of は反復処理可能なオブジェクトに対して繰り返し処理を行ないます。

for (変数 of 配列／オブジェクト) { ... }

for...in ループとの違いはプロパティ名に対して反復するのに対して、for...of はプロパティの値に対して反復します。また、 Array や Map に対しては使用できますが、Object には使用できません。

// 配列の値を取り出す
var fruits = ['apple','orange','grape']
for (var v of fruits) {
    document.writeln(v);
}
// Objectは使用できない
var train = {'width':300,'height':200}
for (var k of train) {
    document.writeln(k);
}
// Mapはキーと値を配列で返す
var map = new Map();
map.set('width',300);
map.set('height',200);
for (var a of map) {
    document.writeln(a[0] + a[1]);
}

for...of - JavaScript | MDN

復数のカウンタ変数

カンマ演算子を使用するとfor文において、復数のカウンタ変数を持つループを作ることができます。

for (var i = 0, j = 0; i < 10; i++, j++) {
    document.writeln(i * j);
}

無限ループ

最初に答えを書いてますが無限ループにしたい場合は条件式（全部）を省略します。本当に実行するとブラウザが固まりますので、break などを使ってループを抜ける方法は用意しておきましょう。

var n = 0;
for (;;) {
    document.writeln(n);
    n++;
    if (n > 100) break;
}

TASK NOTES