ITコース JavaScript基礎 042_ループ while、for

ループ文は、コードブロックを繰り返し実行するための方法です。JavaScript は while、do-while、for など、さまざまなタイプのループ文を提供しています。完全なループ本体には、初期化式、ループ条件、イテレータが含まれます。

`while` ループ

while ループは、条件が true の間、コードを繰り返し実行するために使用されます。ループ本体の1回の実行を 1回のイテレーション と呼びます。任意の式や変数をループ条件にすることができます。ループ条件は評価され、結果はブール値に変換されます。 if と同様に、ループ本体に文が1つしかない場合、中括弧 {…} を省略できますが、推奨されません。各イテレーションの前に条件がチェックされます。

例：

1
let i = 0; // 初期化式、通常はカウンター変数の宣言に使用、ないと undefined エラー
2
while (i < 5) { // ループ条件、`true` の場合、ループは実行され続ける
3
  console.log(i);
4
  i++; // イテレータ、通常はカウンター変数の更新に使用、ループ条件に対応
5
}

無限ループの例：

1
let i = 0;
2
  while (1) { // 条件が常に true の場合、無限ループに入る
3
    console.log(i);
4
    i++; // 通常、この形式のカウンターでループ条件を更新
5
    if (i >= 5) break;  // コメントアウトすると無限ループモードに入る
6
}

`do-while` ループ

do-while ループは while ループに似ていますが、まずループ本体を1回実行し、その後条件が true かどうかをチェックします。条件が真の場合、ループ本体の実行を続けます。使用シーンに注意が必要で、条件が真かどうかに関係なく、ループ本体を 少なくとも1回実行 する必要がある場合にのみ do-while を使用します。他のシーンでは while ループを推奨します。各イテレーションの後に条件がチェックされます。

例：

1
let i = 0;
2
do {
3
  console.log(i);
4
  i++;
5
} while (i < 5);

`for` ループ

for ループはより複雑ですが、最もよく使用されるループ構造で、コードを繰り返し実行するために使用されます。 for ループには3つの部分が含まれます：初期化式、ループ条件、イテレータ。以下は for ループの基本構文です：各イテレーションの前に条件がチェックされ、他の設定も使用できます。

例：

1
for (let i = 0; i < 5; i++) {
2
  console.log(i);
3
}

無限ループの例：

1
let i = 0;
2
  for ( ; ; ) { // すべての条件を省略すると、無限ループに入る
3
    console.log(i);
4
    i++; // 通常、この形式のカウンターでループ条件を更新
5
  if (i >= 5) break;  // コメントアウトすると無限ループモードに入る
6
}

文セグメントの省略

for ループは初期化式、ループ条件、イテレータのいずれか1つまたは複数を省略できますが、セミコロン ; は保持する必要があります。セミコロンは各部分を区切るために使用され、1つの部分を省略しても対応するセミコロンは保持する必要があります。

例：

1
let x = 0;
2
for (; x < 5; x++) {
3
  console.log(x);
4
}
5
// 初期化式を省略し、ループの外に移動しても、ループは有効
6

7
let y = 0;
8
for (;; y++) {
9
  if (y >= 5) {
10
    break;
11
  }
12
  console.log(y);
13
}
14
// ループ条件を省略し、`if` 文と `break` でループを終了
15

16
let z = 0;
17
for (; z < 5;) {
18
  console.log(z);
19
  z++;
20
}
21
// イテレータを省略し、イテレータをループ本体内に移動しても、ループは有効

ネストされたループ

ネストされたループとは、ループ本体内に別の完全なループ構造を含めることを指します。ネストされたループは、外部ループを実行するたびに、内部ループを1回実行します。

正三角形の例：

1
// 例 A
2
for (let i = 1; i <= 5; i++) { // 外部ループ、行数を制御、1から5まで。
3
  let row = ''; // 外部ループを実行するたびに、現在の行の星を格納する空文字列 `row` を作成。
4
  for (let j = 1; j <= i; j++) { // 内部ループ、各行の星の数を制御、1から現在の行数 `i` まで。
5
    row += '⭐ '; // 星を `row` に追加し、現在の行の星文字列を形成。
6
  }
7
  console.log(row); // 現在の行の星文字列を出力。
8
}

1
// 例 B
2
for (let i = 1; i <= 5; i++) { // 外部ループは行数を表す
3
    for (let j = 1; j <= i; j++) { // 内部ループは列を表す
4
        document.write('⭐'); // 星をグラフィック要素として使用
5
    }
6
    document.write('</br>'); // 改行
7
}

逆三角形の例：

1
// 例 A
2
for (let i = 5; i >= 1; i--) { // 外部ループ、行数を制御、1から5まで。
3
  let row = ''; // 外部ループを実行するたびに、現在の行の星を格納する空文字列 `row` を作成。
4
  for (let j = 1; j <= i; j++) { // 内部ループ、各行の星の数を制御、1から現在の行数 `i` まで。
5
    row += '* ';  // 星を `row` に追加し、現在の行の星文字列を形成。
6
  }
7
  console.log(row);  // 現在の行の星文字列を出力。
8
}

1
// 例 B
2
for (let i = 1; i <= 5; i++) { // 外部ループは行数を表す
3
    for (let j = 0; j <= 5 - i; j++) { // 内部ループは列を表す
4
        document.write('⭐'); // 星をグラフィック要素として使用
5
    }
6
    document.write('</br>'); // 改行
7
}

`break` ループの終了（終了、脱出）

break は現在のループまたは switch 文を終了（終了、脱出）するために使用されます。break がない場合、後続の case が引き続き実行されます（つまり「フォールスルー」現象が発生します）。

「無限ループ + break」の組み合わせは、ループの開始/終了時に条件をチェックする必要はないが、中間やボディの複数の位置で条件チェックが必要な場合に適しています。

例：

1
let count = 0;
2
while (true) {
3
  console.log("ループ中...");
4
  // ある条件をシミュレートし、満たされたらループを抜ける
5
  if (count === 5) {
6
    console.log("条件を満たしたので、ループを抜けます");
7
    break;
8
  }
9
  count++;
10
}

`continue` 次のイテレーションを続行（スキップ）

continue はループ内で現在のイテレーションを早期に終了し、次のイテレーションを続行するために使用されます。 continue は break の「軽量版」です。ループ全体を停止するのではなく、現在のイテレーションを停止し、新しいループを強制的に開始します（条件が許す場合）。

例：

1
for (let i = 0; i < 8; i++) {
2
    if (i % 2 === 0) {
3
        continue; // i を 2 で割った余りが 0 の場合、現在のイテレーションをスキップし、次のイテレーションを続行
4
    }
5
    console.log(i);
6
}

while ループ

do-while ループ

for ループ