みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回はループ処理の強制終了、スキップ方法について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- for文の復習ができる
- ループ処理を強制終了して処理を抜ける方法がわかる
- ループ処理をスキップ出来るようになる
for文の復習
for文とは、JavaScriptにおける繰り返し処理(ループ処理)を行う記法です。
例えばですが
・「こんにちは」と10回出力する
・「N + 1」という処理を5回行う
■構文
for (値の初期化; 繰り返し処理を行う条件; 値の更新){
// 繰り返し行いたい処理
}ループ処理を強制終了して処理を抜けたい
結論からいうと、ループ処理を抜けたいときには、
break;を使います。
そうです。
switch文のときにも解説したbreak;です
■構文(一例です)
for (値の初期化; 繰り返し処理を行う条件; 値の更新){
if (条件式) {
// for文を抜ける
break;
}
// 繰り返し行いたい処理
}このように記述することで、
特定の条件下の場合、ループ処理から抜けることが出来ます。
それではいつも通りコードを動かしてみましょう。
■ 0〜4までを出力するループ処理で
iが3になったタイミングでループ処理から抜ける
for (let i = 0; i < 5; i++) {
if (i === 3) {
// 処理を抜ける
break;
}
console.log(i);
}
// 【出力結果】0
// 1
// 2このように、iが3になったタイミングでfor文から抜けた事がわかります。
ループ処理をスキップさせたい
ループ処理をスキップさせたいときには、continueを使います。
breakとの違いは、continueはループ処理1回だけスキップし、次のループ処理に進む。
breakはループ全体を終わらせる。という点です。
■構文(一例です)
for (値の初期化; 繰り返し処理を行う条件; 値の更新){
if (条件式) {
// ループをスキップ
continue;
}
// 繰り返し行いたい処理
}ちょっと分かりづらいと思うので
コードを動かして理解を深めましょう。
■ 0〜10までを出力するループ処理で
奇数の場合はループをスキップ
偶数の場合のみ、数値を出力
for (let i = 0; i <= 10; i++) {
if (i % 2 === 1) {
// 奇数
// ループをスキップ
continue;
}
console.log(i);
}
// 【出力結果】0
// 2
// 4
// 6
// 8
// 10このように、iが奇数の場合には後続の処理は行われませんが、
ループ処理自体を抜けるわけではないので
10まで出力されました。
ちなみに、この処理でcontinueをbreakに書き換えると
0だけが出力されてループ処理が終わります。
奇数偶数の復習はこちら
おまけ：問題
0〜10までを出力する繰り返し処理を作り、
continueを用いてiが奇数の場合のみ、数値を出力し
かつiが8になったらループ処理から抜けてください。
まとめ
- for文のループ処理を完全に終了させたい場合はbreakを使う。
- for文のループ処理を1回スキップさせたい場合はcontinueを使う。
おまけの答え
解答例1
for (let i = 0; i <= 10; i++) {
if (i === 8) {
// ループ処理を抜ける
break;
} else if (i % 2 == 0) {
// 偶数なので、処理をスキップ
continue;
}
// 数値を出力
console.log(i);
}
// 【出力結果】1
// 3
// 5
// 7解答例2
for (let i = 0; i <= 10; i++) {
// 偶数の判定
if (i % 2 == 0) {
// iが8かどうかの確認
if (i === 8) {
// ループ処理を抜ける
break;
} else {
// 偶数なので、処理をスキップ
continue;
}
}
// 数値を出力
console.log(i);
}
// 【出力結果】1
// 3
// 5
// 7ポイントは偶数の判定より前に i === 8 の判定をすることです。
なぜかというと、偶数の判定を先にやってしまうと、
8も偶数のひとつと判断され、continueの処理が行われてしまうからです。
NG例
for (let i = 0; i <= 10; i++) {
switch (i) {
case 0:
case 2:
case 4:
case 6:
case 10:
// 偶数のときはスキップ
continue;
case 8:
// POINT:switch文からの抜けるためのbreakなので、ループ処理は動き続ける
break;
}
// 数値を出力
console.log(i);
}
// 【出力結果】1
// 3
// 5
// 7
// 8
// 9ここでのbreakはswitch文から抜けるためのbreakなので、
for文のループ処理は動き続けてしまいます。
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
