JavaScriptでWhileループとDo…Whileループを使用する

序章

自動化は、システムを自動的に動作させる手法です。 プログラミングでは、loopsを使用して反復タスクを自動化します。 ループはプログラミング言語の最も便利な機能の1つであり、この記事では while と do...while JavaScriptでループします。

The while と do...while JavaScriptのステートメントは、条件付きステートメントに似ています。これは、指定された条件がtrueになった場合に実行されるコードのブロックです。 とは異なり if 一度だけ評価するステートメント。条件が評価されなくなるまで、ループは複数回実行されます。 true.

発生するもう1つの一般的なタイプのループは、forステートメントです。これは設定された回数実行されます。 while と do...while ループは条件付きであるため、ループが何回実行されるかを事前に知る必要はありません。

Whileループ

JavaScriptでは、 while ステートメントは、指定された条件が次のように評価される限り実行されるループです。 true.

構文は非常に似ています if 以下に示すように、ステートメント。

while (condition) {
	// execute code as long as condition is true
}

The 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.");
}

上記のプログラムを実行すると、次の出力が表示され、プログラムの反復を示します。 while 条件が次のように評価されなくなるまでループします true.

Output
There'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 魚の数が水族館の個体数制限より少ない限り、ループして実行します。 反復ごとに、1匹の魚がすべてになるまで水族館に追加されます 10 スポットが埋められます。 その時点で、ループは実行を停止します。

無限ループ

無限ループは、その名前が示すように、永久に実行され続けるループです。 誤って無限ループを起こした場合、ブラウザやコンピュータがクラッシュする可能性があります。 無限ループを回避できるように注意することが重要です。

一般的な無限ループは、次の条件で発生します。 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;
  }
}

上記のコードを実行すると、出力は次のようになります。

Output
There 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);

Output
1

私たちの出力は 1、つまり、コードブロックがループを1回繰り返した（ 0）失敗によって停止される前 while 調子。

ループは少なくとも1回繰り返されることを念頭に置いて、 do...while ループは、 while ループ。

結論

このチュートリアルでは、 while ループ、 do...while ループ、およびJavaScriptの無限ループ。

反復タスクの自動化はプログラミングの非常に重要な部分であり、これらのループはプログラムをより効率的かつ簡潔にするのに役立ちます。

詳細については、MozillaDeveloperNetworkのwhileおよびdo…whileループについてお読みください。