JavaScriptでWhileループとDo…Whileループを使用する
序章
自動化は、システムを自動的に動作させる手法です。 プログラミングでは、loopsを使用して反復タスクを自動化します。 ループはプログラミング言語の最も便利な機能の1つです。この記事では、JavaScriptのwhile
およびdo...while
ループについて学習します。
JavaScriptのwhile
およびdo...while
ステートメントは、条件ステートメントに似ています。これらは、指定された条件がtrueになった場合に実行されるコードのブロックです。 。 一度だけ評価されるif
ステートメントとは異なり、条件がtrue
と評価されなくなるまで、ループは複数回実行されます。
発生するもう1つの一般的なタイプのループは、forステートメントです。これは設定された回数実行されます。 while
およびdo...while
ループは条件付きであるため、ループが何回実行されるかを事前に知る必要はありません。
Whileループ
JavaScriptでは、while
ステートメントは、指定された条件がtrue
と評価される限り実行されるループです。
以下に示すように、構文はif
ステートメントと非常によく似ています。
while (condition) {
// execute code as long as condition is true
}
while
ステートメントは、JavaScriptで構築する最も基本的なループです。
例として、人口制限のある水族館があるとしましょう。 ループの反復ごとに、1匹の魚を追加します。 水族館に10
の魚がいると、個体数の制限に達し、プログラムは魚の追加を停止します。
// Set population limit of aquarium to 10
const popLimit = 10;
// Start off with 0 fish
let fish = 0;
// Initiate while loop to run until fish reaches population limit
while (fish < popLimit) {
// add one fish for each iteration
fish++;
console.log("There's room for " + (popLimit - fish) + " more fish.");
}
上記のプログラムを実行すると、次の出力が表示され、条件がtrue
として評価されなくなるまで、while
ループを介したプログラムの反復が示されます。
OutputThere's room for 9 more fish.
There's room for 8 more fish.
There's room for 7 more fish.
There's room for 6 more fish.
There's room for 5 more fish.
There's room for 4 more fish.
There's room for 3 more fish.
There's room for 2 more fish.
There's room for 1 more fish.
There's room for 0 more fish.
この例では、while
ループを、魚の数が水族館の個体数制限より少ない限り実行するように設定しました。 すべての10
スポットが埋まるまで、反復ごとに1匹の魚が水族館に追加されます。 その時点で、ループは実行を停止します。
無限ループ
無限ループは、その名前が示すように、永久に実行され続けるループです。 誤って無限ループを起こした場合、ブラウザやコンピュータがクラッシュする可能性があります。 無限ループを回避できるように、無限ループに注意することが重要です。
while
ステートメントの条件がtrue
に設定されている場合、一般的な無限ループが発生します。 以下は、永久に実行されるコードの例です。 無限ループをテストする必要はありません。
// Initiate an infinite loop
while (true) {
// execute code forever
}
無限ループは永久に実行されますが、プログラムはbreak
キーワードで終了できます。
以下の例では、if
ステートメントをwhile
ループに追加し、その条件が満たされたときに、break
でループを終了します。
// Set a condition to true
const iceCapsAreMelting = true;
let polarBears = 5;
// Initiate infinite loop
while (iceCapsAreMelting) {
console.log(`There are ${polarBears} polar bears.`);
polarBears--;
// Terminate infinite loop when following condition is true
if (polarBears === 0) {
console.log("There are no polar bears left.");
break;
}
}
上記のコードを実行すると、出力は次のようになります。
OutputThere are 5 polar bears.
There are 4 polar bears.
There are 3 polar bears.
There are 2 polar bears.
There are 1 polar bears.
There are no polar bears left.
これは必ずしもループを作成および終了するための実用的な方法ではありませんが、break
は知っておくと便利なキーワードであることに注意してください。
Do…WhileLoop
while
ループについてはすでに学習しました。このループは、指定された条件が真である限り、コードのブロックを実行します。 その上に構築されているのはdo...while
ステートメントです。これはwhile
と非常によく似ていますが、主な違いは、条件が真にならない場合でも、do...while
ループが常に1回実行されることです。 。
以下に、do...while
ループの構文を示します。
do {
// execute code
} while (condition);
ご覧のとおり、ループのdo
部分が最初に来て、次にwhile (condition)
が続きます。 コードブロックが実行され、通常のwhile
ループの状態で条件がテストされます。
これをテストするには、変数を0
に設定し、do
ステートメント内でインクリメントして、条件をfalse
に設定します。
// Set variable to 0
let x = 0;
do {
// Increment variable by 1
x++;
console.log(x);
} while (false);
Output1
出力は1
に出力されました。つまり、コードブロックは、失敗したwhile
条件によって停止される前に、ループを1回(0
から)繰り返されました。
ループは少なくとも1回繰り返されることに注意してください。ただし、do...while
ループは、while
ループと同じ目的で使用できます。
結論
このチュートリアルでは、JavaScriptのwhile
ループ、do...while
ループ、および無限ループについて学習しました。
反復タスクの自動化はプログラミングの非常に重要な部分であり、これらのループはプログラムをより効率的かつ簡潔にするのに役立ちます。
詳細については、MozillaDeveloperNetworkのwhileおよびdo…whileループについてお読みください。