JavaScript while文とdo…while文のサンプル

JavaScriptのwhile文とdo...while文のサンプルです。条件で処理の繰り返しを制御します。

目次

while文 while文とは / while文のサンプル
  ループを抜ける(break) / 2重ループを抜ける(ラベル)
  ループの先頭に戻る(continue)
while文で配列を使用する
do...while文 do...while文とは / do...while文のサンプル
  ループを抜ける(break) / 2重ループを抜ける(ラベル)
  ループの先頭に戻る(continue)
演算子 比較演算子

while文とは

while(条件式){
       処理
}
  • 条件式がtrueの間、処理を繰り返します。
  • 条件式がfalseの場合、処理を終了します。
  • 最初の条件の判定でfalseの場合、処理を1回も実行しません。
  • 処理に条件式をfalseにするロジックがないと無限ループになるので注意が必要です。

 

while文のサンプル

<script>
    let i = 0;

    while (i < 5) {
        console.log(i); //0,1,2,3,4が出力される
        i++;
    }
</script>

4行目は値が5より小さい間、処理を繰り返します。
6行目は、条件になる値を加算しています。

 

while文 ループを抜ける(break)

<script>
    let i = 0;

    while (true) {
        if (i === 3) {
            break;
        }
        console.log(i); //0,1,2が出力される
        i++;
    }
</script>

4行目は、条件式をtrueにしています。このままの場合は無限ループになります。
6行目のbreakでwhile文を抜けます。
breakがないと無限ループになるので注意が必要です。

 

while文 2重ループを抜ける(ラベル)

<script>
  let i = 0;
  label1:while (true) {
    while (true) {
      if (i === 3) {
        break label1;
      }
      console.log(i); //0,1,2が出力される
      i++;
    }
  }
  console.log("End"); //出力される
</script>

3,4行目にwhileがある2重ループです。label1はラベルです。
6行目のbreakとラベルで外側のwhile文を抜けます。

 

while文 ループの先頭に戻る(continue)

<script>
    let i = 0;

    while (i < 5) {
        if (i === 3) {
            i++;
            continue;
        }
        console.log(i); //0,1,2,4が出力される
        i++;
    }
</script>

7行目のcontinueは、次は4行目を実行します。そのため9行目は実行されません。
このサンプルでは6行目の加算がないと無限ループになるので注意して下さい。

 

while文で配列を使用する

<script>
  const color = ["red", "yellow", "blue"];
  let i = 0;

  while (i < color.length) {
    console.log(color[i]); // red yellow blue
    i++;
  }
</script>

2行目は、配列です。
5行目は、lengthで配列の要素数を取得しています。

 

do...while文とは

do {
       処理
} while (条件式);
  • 条件式がtrueの間、処理を繰り返します。
  • 条件式がfalseの場合、処理を終了します。
  • 必ず1回は処理が実行されます。
  • 処理に条件式をfalseにするロジックがないと無限ループになるので注意が必要です。

 

do ... while文のサンプル

<script>
    let i = 0;

    do {
        console.log(i); //0,1,2,3,4が出力される
        i++;
    } while (i < 5);
</script>

7行目は値が5より小さい間、処理を繰り返します。

 

do...while文 ループを抜ける(break)

<script>
    let i = 0;

    do {
        if (i === 3) {
            break;
        }
        console.log(i); //0,1,2が出力される
        i++;
    } while (true);
</script>

6行目のbreakは、do...while文を抜けます。
10行目は、条件をtrueにしています。このサンプルでは6行目のbreakがないと無限ループになるので注意して下さい。

 

do...while文 2重ループを抜ける(ラベル)

<script>
  let i = 0;
  dowhile1: do {
    do {
      if (i === 3) {
        break dowhile1;
      }
      console.log(i); //0,1,2が出力される
      i++;
    } while (true);
  } while (true);
  console.log("End"); //出力される
</script>

3,4行目にdoがある2重ループです。dowhile1はラベルです。
6行目のbreakとラベルで外側のdo-while文を抜けます。

 

do...while文 ループの先頭に戻る(continue)

<script>
    let i = 0;

    do {
        if (i === 3) {
            i++;
            continue;
        }
        console.log(i); //0,1,2,4が出力される
        i++;
    } while (i < 5);
</script>

7行目のcontinueは、次は11行目を実行します。そのため9行目は実行されません。
このサンプルでは6行目の加算がないと無限ループになるので注意して下さい。

 

比較演算子

JavaScriptの比較演算子です。

比較演算子 説明
a == b aとbの値は等しい
a === b aとbの値は等しい かつ 型も等しい
a != b aとbの値は等しくない
a !== b aとbの値が等しくない または 型が等しくない
a > b aはbより大きい
a >= b aはbより大きい または 等しい
a < b aはbより小さい
a <= b aはbより小さい または 等しい

関連の記事

JavaScript constとletとvarの違い

△上に戻る