初心者のための JavaScript ループ: 基本を学ぶ

in Vlog

憂鬱な月曜日、あなたは仕事をしています。月曜日がどんなに憂鬱になるかは、誰もが知っていますよね。上司があなたのところにやって来て、「週末に受け取った未開封のメールが 300 通あります。1 通ずつ開封して、送信者の名前を書き留め、終わったらメールを削除してください」と言います。

この作業を手作業でやろうとすると、とても面倒に思えます。次に思い浮かぶのは、おそらく Google でこのプロセスを自動化して作業を楽にしてくれるソフトウェアを探すことではないでしょうか。

プログラミングでも似たような状況があります。タスクが完了するまで繰り返し実行する必要がある場合があります。この問題をどのように解決しますか? JavaScript には、ループと呼ばれるものがあります。ループを使用すると、タスクを完了するために必要なコードの量を減らすことで、繰り返しタスクを解決できます。

この記事では、ループとは何か、どのように機能するか、そしてプログラムでループを適用するために使用できるさまざまな方法について説明します。

ループとは何ですか?

ループは、JavaScript で繰り返しアクションを簡単に実行するために使用されます。ループは、true または false を返す条件に基づいています。

条件は、ループを実行し続けるために渡す必要がある式です。指定された条件が true 値を返すとループが実行され、false 値を返すと停止します。

ループはいつ使用する必要がありますか?

ループは、繰り返しのタスクを実行する場合に便利です。たとえば、ループを使用すると、問題を解決するために必要なコードが短縮されます。これにより、時間が節約され、メモリ使用量が最適化され、柔軟性が向上します。

ループの真の重要性は、コードの長さを短縮し、繰り返しを制限することだけではありません。配列、オブジェクト、またはその他の構造内のデータを扱うときにも役立ちます。さらに、ループはコードの繰り返しを減らし、コードの再利用性を高めることでコードのモジュール性を促進し、プロジェクトのさまざまな部分で使用できるコードの作成を可能にします。

ループの種類

ループには、エントリ制御ループと終了制御ループの 2 つの主要なカテゴリがあります。

入場制限あり ループは、ループ本体を実行する前に「ループの入り口」で条件を評価します。条件が真であれば、本体が実行されます。そうでない場合は、本体は実行されません。 for そして while ループはエントリ制御ループの例です。

出口制御 ループはテスト条件よりもループ本体に重点を置き、テスト条件を評価する前にループ本体が少なくとも1回実行されるようにします。終了制御ループの良い例は、 do-while ループ。

エントリ制御ループの例をいくつか見てみましょう。

whileループ

あ while loop の構文は次のとおりです。

while (condition) {
  //  loop's body
}

次のリストは while ループの機能について説明しています。

  1. の while ループは括弧内にテスト条件を取ります。

  2. プログラムは条件をチェックして、それが合格か不合格かを確認します。

  3. ループ本体内のコードは、条件が満たされている限り実行されます。

  4. テスト条件が満たされないと、プログラムは動作を終了します。

以下では、 while ループ：

let arr = ();
let i = 1;
let number = 5;
 
while (i

  1. 上記のコード スニペットは、「arr」、「i」、および「num」変数を初期化します。

  2. 「アー” 変数は、テスト条件に合格した値を保持する配列です。

  3. 「i」変数は、各反復後の各増分を追跡します。

  4. 「number」変数は、各反復の後に「i」の値とその値（5）を比較します。

  5. ループ本体内のコードは、「i」が「number」以下である限り、各反復の後に「i」の各値を配列にプッシュします。

  6. 「i」の現在の値が条件を満たさなくなると、この場合、 “私” より大きい “番号” 6 の場合、ループは実行を停止します。

の push() メソッドは、配列の末尾に新しい項目を追加する組み込みの JavaScript 関数です。

出力

(1, 2, 3, 4, 5)

do-while ループ

あ do-while ループはwhileループによく似ていますが、主な違いは while そしてその do-while ループとは、 do-while ループは、ループの条件を評価する前に少なくとも1回コードが実行されることを保証します。 do-while ループの構文は以下のとおりです。

do {
  // loop's body
}
while (//condition)

の do-while これは終了制御ループの優れた例です。終了制御ループは 優先度 ループ本体のテスト条件の前に、 do-while ループ。

例：

let i = 1;
let num = 5;

do {
  console.log(i);
  i++;
} while (i

さて、このコード スニペットを分解してみましょう。

  1. 「i」変数と「num」変数を初期化しました。

  2. コンソールは、ループの条件を評価する前に、「i」（1）の値をログに記録します。

  3. 条件がチェックされ、各反復後に「i」の値が +1 ずつ増加します。

  4. 「i」が「num」より大きくなると、ループは終了します。

出力

1
2
3
4
5

しかし、 do-while ループは while ループには微妙な違いがあります。別の例で、 while そして do-while ループ。

let i = 5;
let num = 4

while( i

これ while 上記のループはコンソールに結果を返しません。なぜでしょうか?

  1. 「i」変数と「num」変数をそれぞれ 5 と 4 の値で初期化しました。

  2. 条件は、「i」の値が「num」より小さいかどうかをチェックします。

  3. true の場合、それぞれの値がログに記録されます。

  4. 「i」の初期値が「num」の初期値を超えているため、ループは実行されません。

さて、同様の例を見てみましょう。 do-while ループ。

let i = 5;
let num = 4;

do {
  console.log(i)
}
while ( i

出力

5

の do-while ループはコードブロックの実行を保証し、コンソールに5を返します。「i」は最初は「num」よりも高い値ですが、それでもコンソールに一度記録されます。この表現は、 do-while そして while ループ。

Forループ

の for loop はユニークなタイプのループであり、プログラマーが最もよく使用するループの1つです。 for loop 条件に応じてコード ブロックを特定の回数実行するループです。 for ループの構文は次のとおりです。

for (Expression1...; Expression2....; Expression3...{
     //code block
}

表現1: この部分は for loop は、 初期化 エリア;それは私たちの for loop カウンター変数が定義されている領域。カウンター変数は、ループの実行回数を追跡し、それを値として保存するために使用されます。

式2: これはループの2番目の部分です。この部分は 条件付き ループを実行するステートメント。

式 3: ここでループが終了します。このセクションのカウンター変数は、条件で指定された値を増やすか減らすことによって、各反復後に値を更新します。

for ループを使用した例を見てみましょう。

for (let i = 0; i

上記のコード スニペットを一緒に分解してみましょう。

  1. まず、カウンター変数を初期化しました。私” 値はゼロです。

  2. 次に、コードを実行し続けるための条件文を作成しました。

  3. 「i」の値を 100 と比較しました。このテストに合格すると、「Hello World」がログに記録されます。

  4. このプロセスは繰り返され、各反復の後にカウンターが +1 ずつ増加します。

  5. カウンターの値が 100 に達するとループは終了します。

出力

Hello World
Hello World
Hello World

...

//repeated 97 more times making it 100 "Hello World" in total
...

for-each ループ

の for-each loop は、配列内を移動し、その配列内の各要素にコールバック関数を適用する JavaScript のメソッドです。コールバック関数は、単に関数にパラメータとして渡される別の関数です。コールバック関数は、メイン関数の実行が完了した後に順番に実行されます。

基本的な構文を見てみましょう for-each ループ。

array.forEach(function(currentValue, index, arr))

上記のコードは、 for-each ループ。

  • このループは、現在の値、インデックス、配列の 3 つのパラメータを受け入れます。
  • 現在の値は、配列内の要素の現在の値を表します。
  • インデックスは、その配列内の現在の要素の番号位置を示すオプションのパラメーターです。
let myArray = (1, 2, 3, 4, 5);

array.forEach((num, index, arr) => {
  arr(index) = num * 2;

  console.log(array);
});

上記の例を詳しく見てみましょう。

  1. 変数名「myArray」で配列を初期化し、1 から 5 までの整数を格納しました。

  2. の for-each 配列メソッドは 3 つのパラメータを受け取り、配列にコールバック関数を適用します。

  3. この行; arr(index) = num * 2 現在の要素の値を 2 倍にして、返された値を現在の要素のインデックスに割り当てます。

注意してください： for-each 配列メソッドは新しい配列を返すのではなく、元の配列を変更して返します。

出力

(2, 4, 6, 8, 10)

JavaScript の For…In ループと For…of ループとは何ですか?

の for... in そして for... of ループは、反復可能なオブジェクトを反復処理する場合に非常に便利です。反復可能なオブジェクトとは、ループ処理が可能な任意の要素を指します。反復可能なオブジェクトの一般的な例としては、配列、文​​字列、セットなどがあります。

の for... in そして for... of オブジェクトを反復/移動する方法には類似していますが、主な違いは値を返す方法にあります。

for… ループ内

あ for... in ループは、オブジェクトからキー/プロパティを抽出し、親オブジェクトから対応するプロパティを抽出する必要がある場合に便利です。 for... in ループは、特定のオブジェクトで定義された方法とは異なる方法でオブジェクトを反復処理することがあります。 for... in ループの動作。

let namesArray = ();

const studentScores = {
John: 60,
Dan: 53,
Tricia: 73,
Jamal: 45,
Jane: 52
}

for(const name in studentScores){
  namesArray.push(name);
}

console.log(namesArray);

上記の例では、 学生スコア そこには複数の生徒の名前とそれに対応する得点が入っています。 for... in、私たちは学生の名前だけを取得することができました。 キー オブジェクトの 学生のスコア、 そして、それらを配列に格納するには、 push() 方法。

出力

("John", "Dan", "Tricia", "Jamal", "Jane")

ループの…

の for... of loop は、配列、文​​字列、マップなどの反復可能なオブジェクトの値を反復する特殊なタイプのループです。 for... of ループはオブジェクトのキーやプロパティには関係せず、値の優先順位のみを示します。

の for... of ループは通常のオブジェクトを反復処理することができず、反復処理できないためエラーが発生します。 for.. of ループ。

let numArray = (1,2,3,4,5)

for (const value of numArray) {
    console.log(value)
}

// Output =  1,2,3,4,5

要約すると、 for... in そして for... of ループは反復可能なオブジェクトをループするのに最適な方法です。主な違いは for... in ループはオブジェクトのキーを返しますが、 for... of ループは反復可能なオブジェクトの値のみを返します。

無限ループとは何か、そしてどうすればそれを回避できるか?

無限ループとは、ループが無期限に実行され続けることを意味します。これは、ループに終了条件が定義されていない場合に発生します。無限ループは、ブラウザをクラッシュさせたり、プログラムで望ましくないアクションを引き起こしたりする可能性があるため、危険です。

// infinite loop sample
while (true) {
 console.log("keep on running")
}

プログラム内で無限ループが発生しないようにするには、ループ内に終了条件が定義されていることを常に確認してください。

結論

この記事を最後まで読んでいただき、ありがとうございます。JavaScript のループは、優れた最適化可能なプログラムを作成する上で非常に価値があるため、すべての開発者が習得する必要がある重要な概念です。この記事を読めば、プログラムでループを使用する基本と複雑さを理解できると思います。

関連記事

前の投稿
多段階テキスト検索のための LLaMA の微調整: アブレーション研究と分析
次の投稿
ジェネレーティブ AI: GDPR 主導のサービスでデータを編集する方法

関連記事