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

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

目次

while文	while文
	breakを使用する
	continueを使用する
do...while文	do...while文
	breakを使用する
	continueを使用する
演算子	比較演算子

while文

while(条件){        実行される処理 }

• 条件がtrueの間、処理を繰り返します。
• 最初の条件の判定でfalseの場合、ループは1回も実行されません。
• 処理に、条件をfalseにするロジックがないと無限ループになるので注意が必要です。
• 以下はMDNのwhile文のリンクです。
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/while

while文のサンプルです。

<script>
    let i = 0;

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

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

breakを使用する

while文でbreakを使用するサンプルです。

<script>
    let i = 0;

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

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

continueを使用する

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

do...while文

do {        実行される処理 } while (条件);

• 条件がtrueの間、処理を繰り返します。
• 必ず1回は処理が実行されます。
• 処理に、条件をfalseにするロジックがないと無限ループになるので注意が必要です。
• 以下はMDNのdo ... while文のリンクです。
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/do...while

do ... while文のサンプルです。

<script>
    let i = 0;

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

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

breakを使用する

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

continueを使用する

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より小さい または 等しい

以下はMDNの比較演算子のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

関連の記事

JavaScript if文のサンプル
JavaScript for文のサンプル(break/continue)
JavaScript switch文のサンプル
JavaScript constとletとvarの違い