while ループと for ループ。第5部 10回のブログ投稿で初級者から上級者までのJavaScript講座

公開: 2021-10-29

これは、初心者から上級者までを対象とした JavaScript ブログ投稿シリーズのパート 5 です。 このシリーズの終わりまでに、JavaScript でコーディングを開始するために知っておく必要があるすべての基本を理解できます。 早速、5 番目のチュートリアルから始めましょう。

while ループと for ループ – 目次:

制御構造 (続き)
while ループ
ループ用

このチュートリアルは、設定と知識の両方に関して、シリーズの 4 番目のチュートリアルに従っていることを前提としています。 4 番目のチュートリアルで行ったセットアップを続行します。そのため、何らかの理由で閉じた場合は、前のチュートリアルで完全なステップバイステップの手順を確認できます。その結果、Google Chrome が開きます。より具体的には、スニペット部分を開いてコードを記述および実行します。準備ができている場合は、このチュートリアルに進んでください。

制御構造 (続き)

前のチュートリアルでは、if、else if、else を使用してコードの流れを制御する方法を見てきました。コードをより細かく制御できるようになったのは素晴らしいことですが、気がつけば、すべてを 1 回しか実行できません。たとえば、「こんにちは！」と言いたい場合。 10 回、まったく同じことを言う 10 行の異なるコードを記述する必要があります。これを達成するためのより良い方法はありませんか？コードで何度も繰り返す必要がありますか? 答えはノーです。

プログラマーは、コードを DRY にしたいと考えています。ここでの DRY は、Don't Repeat Yourself の略です。はい、その時点で意味がある場合は、コードの一部を繰り返すこともありますが、一般的な目標として、DRY コードを作成することを目指す必要があります。このようにして、ほとんどの場合、エラーの可能性が少なく、よりクリーンなコードが得られます。

コードで同じことを繰り返さないように、ループを使用します。具体的には「while ループ」と「for ループ」です。 while ループとそれが何であるかから始めましょう。

while ループ

while ループは単純なロジックに従います。そして、次のようになります。

条件が真である間、括弧内の指定されたコードを実行します。

そうは言っても、while ループで記述するコードにも注意する必要があります。条件が決して false にならない場合、実行が停止されない限り、括弧内のコードが永久に実行されるためです。そのため、why ループを停止させる何らかの変更を実装する必要があります。例でそれを見てみましょう。

let hungry = true;
while (hungry) {
    alert("Eat food");
    hungry = false;
}

上記の例では、一度だけ食べるように指示するアラートコードを実行します。これは、最初に空腹を true に設定したため、while ループ内でコードの実行を開始するためです。しかし、コードの実行中に、1 行で空腹状態が false に設定されました。したがって、最初の実行後、ハングリー状態が false に設定され、while コードが再度実行されないことがわかります。次に、コードが複数回実行される別の例を見てみましょう。

let targetNumber = 10;
let currentNumber = 0;
while (currentNumber < targetNumber) {
    alert("Hello User!");
    currentNumber++;
}

このコードで何が起こると思いますか? ユーザーにアラートを表示しますか? その場合、ユーザーに表示するアラートの数は?

ユーザーに合計 10 回アラートを出すと予想した場合は、その通りです。そうでない場合は、もう一度考えて、今度はそれが得られるかどうかを確認してください。このコードで行っていることは、currentNumber から開始して、ユーザーにアラートを表示した回数を追跡することです。ユーザーにアラートを表示するたびに、アラートを 1 増やします。 ++ 記号は、指定された数値を 1 ずつ増やすために使用されます。最初はまだユーザーにアラートを表示していないので、ゼロから始めて、表示数が 10 になるまで続けます。

ここで注意すべきことは、10 より小さい数をチェックしているため、現在の数が 10 に達すると、targetNumber より小さいという条件を満たさなくなるため、括弧内のコードは実行されないということです。

each ループの最後で数値を 1 増やしましたが、while ループの中でしか増減できないというルールはありません。これは、while ループを使用する主な利点です。これらは、コードを実行する回数が必ずしもわからない場所で使用されます。たとえば、ゲームを作成し、プレーヤーがゲームに負けない限り、プレーヤーをゲームに留めておくことができます。このゲームセッション中、ユーザーは不確定な期間ポイントを獲得したり失ったりする可能性があり、ポイントがゼロなどの特定のポイントを下回ったときにゲームを終了できます。

ときどき、括弧内のコードを while ループ内で少なくとも 1 回実行したい場合もあります。たとえば、最初におやつを食べて、空腹かどうかを判断するシナリオを想像してみてください。あなたは何かを食べたいと思っていることは知っていますが、長い間そのことを知っているとは限りません。このような場合、「do while ループ」と呼ばれる while ループのフレーバーを使用できます。

let reallyHungry = false;
do {
    alert("Eat some food.");
} while (reallyHungry);

この場合、私たちは本当に空腹ではありませんでしたが、最初に食べ物を食べてから、もっと食べるかどうかを決めました. これは do while ループでできることです。満杯になったときにコンピューターに通知するメカニズムがないため、reallyHungry を true にすると、このコードは永久に実行されることに注意してください。そのため、コードブロック内に何らかの停止メカニズムを実装する必要があります。これは、飢餓にレベルを与えて増やすことができるようにすることや、コードのどこかで「 true 」に設定することから何でもかまいません。

while ループは、コードを何回実行する必要があるかわからない場合に特に優れています。しかし、コードを実行する必要がある正確な回数を実際に知っている場合が多くあります。そのような場合、通常は「For ループ」を使用します。

ループ用

for ループは while ループに非常に似ていますが、多くの場合、より好ましい特定の特性があります。 for ループは、最初から設定する必要がある特定の境界を導入し、これらの境界により、コードをより安全に実行できます。 for ループを使用して、コードを何回実行したいかをコンピューターに正確に伝えます。このようにして、コードが永遠に実行したい無限ループにならないようにします。

// greet the user 5 times, or 5 users once!
for (let numberGreeted = 0; numberGreeted < 5; numberGreeted++){
    alert("Hello User!");
}

上記のコードでは、ユーザーに 5 回挨拶しています。 for ループを詳しく見てみると、これはほぼ特殊化された while ループであり、より定義されており、より安全に実行できることがわかります。たとえば、while ループを使用すると、次のコードでまったく同じ出力を得ることができます。

let numberGreeted = 0;
while (numberGreeted < 5) {
    alert("Hello User!");
    numberGreeted++;
}

ご覧のとおり、for ループを使用すると、for ループの条件を定義する括弧内にコードの一部をほとんど運びます。使用したい変数が確実に存在することがわかるように、チェックしている値がインクリメントされていることがわかり、ターゲット数に達する前に実行が停止することがわかります。

for ループ内で使用する数値から始めて、1 ずつインクリメントできることがわかりました。しかし、それを 5 ずつ増やしたい場合はどうすればよいでしょうか。または、実際に1つ減らす必要がある場合はどうなりますか? for ループでも実現できますか? はい、できます。 for ループを定義するとき、制御された方法で初期条件から開始し、別の条件で終了する限り、機能する for ループができます。たとえば、5 から始まるカウントダウンを作成できます。

for (let countDown = 5; countDown > 0; countDown--){
    alert(countDown + "!");
}

数値の減少を機能させるには、最初に大きな数値から始める必要があることに注意してください。このコードの実行を開始すると、最初に countDown 変数が作成され、その変数の値が 5 に設定されます。次のステップは、提供された条件を確認することです。変数。最初のループ反復で変数を作成した後、配置した反復規則が各反復の最後に適用されます。

最後の例では、「countDown —」を「すべての反復の最後に何が変わるか?」として設定しました。この場合、数値を 1 減らします。そして、それぞれの新しい反復を開始する前に、設定した条件もチェックされます。最後の例で設定した条件は次のとおりです。

「countDown > 0」は、この for ループが、countDown 変数が 0 より大きい限り、提供されたコードを実行し続けることを意味します。

正または負の方向に、数値を 1 より多く増やすこともできます。たとえば、小さな数から始めて、必要な割合で増やすことができます。

for (let someVariable = 0; someVariable < 15; someVariable = someVariable + 5){
    alert(someVariable);
}

このコードを実行すると、0、5、および 10 でユーザーに警告が表示されます。

これらが for ループの主な特徴です。 while ループと for ループという 2 つの主要なループタイプを見てきました。 どちらも、一般的なプログラミングと JavaScript の両方でかなり一般的に使用されています。 必要に応じてこれらのループを使用するため、それらの基本を理解することが重要です。 これらのトピックにある程度慣れていると思われる場合は、次のチュートリアルで JavaScript の別の主要な概念について説明します。

著者: ロバート・ホイットニー
JavaScript のエキスパートであり、IT 部門を指導するインストラクター。彼の主な目標は、コーディング中に効果的に協力する方法を他の人に教えることで、チームの生産性を向上させることです。
すべての投稿を表示

10 のブログ投稿で初心者から上級者までの JavaScript コース:

JavaScript でコーディングを開始するには?
JavaScript の基本
JavaScript の変数とさまざまなデータ型
スニペットと制御構造
while ループと for ループ
Java 配列
JavaScript 関数
JavaScript オブジェクト
JavaScript メソッドなど
JavaScriptコースのまとめ