JavaScriptのwhile文とdo...while文のサンプルです。条件で処理の繰り返しを制御します。
目次
while文 | while文とは / while文のサンプル |
ループを抜ける(break) / 2重ループを抜ける(ラベル) | |
ループの先頭に戻る(continue) | |
do...while文 | do...while文とは / do...while文のサンプル |
ループを抜ける(break) / 2重ループを抜ける(ラベル) | |
ループの先頭に戻る(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行目は、条件になる値を加算しています。
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がないと無限ループになるので注意して下さい。
while文 2重ループを抜ける(ラベル)
<script>
let i = 0;
while1:while (true) {
while (true) {
if (i === 3) {
break while1;
}
console.log(i); //0,1,2が出力される
i++;
}
}
console.log("終了"); //出力される
</script>
3,4行目にwhileがある2重ループです。while1はラベルです。
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行目の加算がないと無限ループになるので注意して下さい。
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より小さい間、処理を繰り返します。
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("終了"); //出力される
</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より小さい または 等しい |
以下は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の違い