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

目次

while文の構造とサンプル

条件がtrueの場合、処理が繰り返されます。

while (条件){        処理 }

コード

<script>
    let i = 0;

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

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

point

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

 

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で配列の要素数を取得しています。

 

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

<script>
    let i = 0;

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

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

 

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

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

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

 

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

<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行目の加算がないと無限ループになるので注意して下さい。

 

do...while文の構造とサンプル

最初に1回は処理が実行されます。
条件がtrueの場合、処理が繰り返されます。

do {        処理 } while (条件);

コード

<script>
    let i = 0;

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

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

point

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

 

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

<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がないと無限ループになるので注意して下さい。

 

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

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

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

 

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

<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 constとletとvarの違い