ホームページ  >  記事  >  ウェブフロントエンド  >  JS ループ学習: ループから抜け出すステートメントの Break と continue

JS ループ学習: ループから抜け出すステートメントの Break と continue

青灯夜游
青灯夜游オリジナル
2022-08-03 19:08:493381ブラウズ

前の記事では、JS のいくつかのループ制御構造 (while および do-while ループ for ループ ) を学習しました。次に、ループ ステートメントの飛び出しについて説明します。休憩して続けてください。皆さんのお役に立てれば幸いです。

JS ループ学習: ループから抜け出すステートメントの Break と continue

これまでのループの研究から、式の結果が false の場合、デフォルトではループが自動的に終了し、それ以外の場合はループが永久に継続することがわかっています。場合によっては、ループが自動的に終了するのを待つ必要はなく、ループを積極的に終了することができます。JavaScript には、ループを終了し、現在のループを終了 (スキップ) するための 2 つのステートメント、break と continue が用意されています。

1. Continue ステートメント

continue ステートメントは、このループをスキップして次のループを実行するために使用されます。 continue ステートメントが検出されると、プログラムは条件式を直ちに再テストします。式の結果が true の場合は、次のループが開始されます。式の結果が false の場合、ループは終了します。

[例 1] continue ステートメントを使用して、for ループから抜け出します。

<script type="text/javascript">
for (var i = 1; i < 10; i++) {
    if(i % 2 != 0) {
       continue;
    }
    console.log(i);
}
</script>

分析:

  • for (var i = 0; i &lt ; 10; i ){}このステートメントを使用すると、1 から 10 までのすべての数値をループできます

  • if(i % 2 ! = 0) このステートメントは、i の値が 2 で割り切れるかどうかを判断するために使用されます。割り切れない場合、() の値が true の場合、Continue; ステートメントが実行されます。

  • ループ本体で、if(i % 2 == 0) ステートメントを使用して、i の値を次の値にできるかどうかを判断します。 2 で割る "console.log(i);" を使用して出力します。i の値を 2 で均等に割ることができない場合は、Continue;ステートメントがトリガーされてこのループから抜け出し (出力なし)、次のサイクルが実行されます。

#出力結果:

JS ループ学習: ループから抜け出すステートメントの Break と continue

2.break 文

break ステートメントは、現在の構文構造から飛び出すために使用されます。ループ本体のコードを終了し、現在のループから直ちに飛び出て、ループの後に (存在する場合) コードを実行します。

break と continue の違いは、 continue ステートメントは現在のループのみを終了するのに対し、break ステートメントはループ全体の実行を終了することです。

上記の例 1 のコードを使用し、Continue;break; に置き換えます。何が出力されますか?

<script type="text/javascript">
for (var i = 1; i < 10; i++) {
    if(i % 2 != 0) {
       break;
    }
    console.log(i);
}
</script>

答えは次のとおりです:

何も出力されません。なぜこうなった?それを分析してみましょう:

forx ループの最初の

i=1 では、1 は 10 未満ですか?もちろん、ループ本体内の if(i % 2 != 0) ステートメントの実行を開始します;

それでは、1 は 2 で割ることができますか?明らかにそれはできないので、

() の値が true の場合、if 内の "break;" ステートメントが実行され、ループ全体から直接抜け出て、 "console" .log(i);" ステートメントを実行する機会はありません。

3. ネストされた For ループ

break と # # に注目してください。 #Continue は現在のサイクルでのみ有効です。ネストされたループがある場合は注意が必要です。次の例を見てみましょう: <pre class="brush:js;toolbar:false">for (let i = 0; i &lt; 5; i++) { if (i % 2 == 0) continue; for (let j = 0; j &lt; 5; j++) { if (j == 2) break; console.log(`i = ${i}, j = ${j}`); } }</pre>

ここには 2 つのループがあり、それぞれ 5 回 (0 ~ 4) 実行されます。 i が偶数の場合、外側のループは現在のループをスキップし、次のループを実行します。つまり、内側のループは i が 1 または 3 の場合にのみ実行されます。

j の値が 2 である限り、内側のループは終了します。したがって、j には 0 と 1 しかありません。

最終結果は次のようになります:

JS ループ学習: ループから抜け出すステートメントの Break と continue

4. JavaScript タグ JavaScript 1.2 以降では、最初はラベルをブレークと組み合わせて使用​​し、プログラムの実行をより正確に制御し続けることができます。

JavaScript のタグは HTML のタグとは異なります。JavaScript のタグは、コロン: が後に続く識別子 (変数名と同様) です。 JavaScript タグは、ステートメントまたはコード ブロックの前に宣言でき、break と組み合わせて使用​​したり、特定のループから飛び出すことができます。たとえば、複数のループがネストされている場合、break を使用するだけでは現在のループから飛び出すことしかできませんが、ラベル付きの Break を使用すると、複数レベルのループを一度に抜け出すことができます。

サンプル コードは次のとおりです。

<script type="text/javascript">
document.write("开始循环!<br /> ");
outerloop:          // 定义一个标签    
for (var i = 0; i < 5; i++) {
   document.write("外层循环: " + i + "<br />");
   innerloop:       // 定义一个标签
   for (var j = 0; j < 5; j++) {
      if (j > 3 ) break ;           // 跳出内层循环
      if (i == 2) break innerloop;  // 跳出内层讯息
      if (i == 4) break outerloop;  // 跳出外层循环
      document.write("内层循环: " + j + " <br />");
   }
}      
document.write("循环结束!<br /> ");
</script>

JS ループ学習: ループから抜け出すステートメントの Break と continue注: Break または continue とラベルの間に改行を入れることはできません。さらに、ラベル名と関連するループの間に他のコードを含めることはできません。

[推奨学習:

JavaScript 上級チュートリアル

]

以上がJS ループ学習: ループから抜け出すステートメントの Break と continueの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。