loop文にJSを使う

前に、 whileループとdo whileループについて簡単に紹介しましたが、このセクションでは、別の種類のループである for ループを紹介します。

 

JS for ループ構文

JS for loop は、ループ回数がわかっている場合の使用に適しており、構文形式は次のとおりです。

for(初期化; 条件; インクリメント) {
// 実行するコード
}

for ループには、初期化、条件、インクリメントの 3 つのオプションの式が含まれています。

• 初期化: 式または変数を宣言します。通常、このステップは「カウンター変数の初期化」と呼ばれ、ループ中に 1 回だけ実行されます。
• condition: while ループの条件式と同じ機能を持つ条件式です. 通常はカウンタの値と比較してループするかどうかを決定するために使用されます. この式でループ回数を設定できます. ;
• インクリメント: 各ループの後にカウンターの値を更新 (インクリメントまたはデクリメント) するために使用される式。

サンプルコードは次のとおりです。

 for (var i = 1; i <= 10; i++) {
    document.write(i + " ");
}

操作結果:
1 2 3 4 5 6 7 8 9 10

上記のコードでは、ループ開始前にvar i = 1;を実行し、変数 i をカウンターとして使用し、 i <= 10かどうかを判断し、真であれば{ }内のコードを実行し、失敗した場合は for ループを終了します ; 各ループの実行が完了したら、 i++操作を実行します。つまり、カウンターの値を更新します。

JS for ループの 3 つの式

次の例に示すように、JS for ループの括弧内の 3 つの式は省略できますが、3 つの式を区切るために使用されるセミコロンは省略できません。

 // 省略第一個表達式
var i = 0;
for (; i < 5; i++) {
    // 実行するコード
}
// 省略第二個表達式
for (var y = 0; ; y++) {
    if (y > 5){
        break;
    }
    // 実行するコード
}
// 省略第一個和第三個表達式
var j = 0;
for (; j < 5;) {
    // 実行するコード
    j++;
}
// 省略所有表達式
var z = 0;
for (;;) {
    if (z > 5){
        break;
    }       
    // 実行するコード
    z++;
} 

ループのネストのための JS

ループの種類に関係なく、ネストすることができます (つまり、1 つのループで 1 つ以上のループを定義できます)。 for ループは、ループのネストされた使用法を示す例として使用されます。

 for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++) {
        document.write(j + " × " + i + " ＝ " + (i * j) + "&emsp;");
    }
    document.write("<br>");
} 

操作結果:

 1 × 1 = 1 
1 × 2 = 2 2 × 2 = 4 
1 × 3 = 3 2 × 3 = 6 3 × 3 = 9 
1 × 4 = 4 2 × 4 = 8 3 × 4 = 12 4 × 4 = 16 
1 × 5 = 5 2 × 5 = 10 3 × 5 = 15 4 × 5 = 20 5 × 5 = 25 
1 × 6 = 6 2 × 6 = 12 3 × 6 = 18 4 × 6 = 24 5 × 6 = 30 6 × 6 = 36 
1 × 7 = 7 2 × 7 = 14 3 × 7 = 21 4 × 7 = 28 5 × 7 = 35 6 × 7 = 42 7 × 7 = 49 
1 × 8 = 8 2 × 8 = 16 3 × 8 = 24 4 × 8 = 32 5 × 8 = 40 6 × 8 = 48 7 × 8 = 56 8 × 8 = 64 
1 × 9 = 9 2 × 9 = 18 3 × 9 = 27 4 × 9 = 36 5 × 9 = 45 6 × 9 = 54 7 × 9 = 63 8 × 9 = 72 9 × 9 = 81 

for ループ バリアント

オブジェクト、配列、文​​字列などをより便利にトラバーサルするために、JS は for ループの 2 つのバリアント、つまり for in ループと for of ループもサポートしています。詳細については、次のリンクを参照してください。

• ループ文でのJSの使い方
• JS for of ループ文の使い方