JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでネストされたwhileループを使う方法を徹底解説

JavaScriptのwhileループは、指定した条件式がtrueである限り、文やコードブロックを繰り返し実行するための制御構文です。条件式がfalseに評価された時点で、ループは終了します。

ネストされたwhileループとは？

ネストされたwhileループとは、whileループの中にさらに別のwhileループを配置した構造のことです。外側のループが1回実行されるたびに、内側のループが条件を満たす間は繰り返し実行されます。この構造は、2次元のデータ処理や表形式の出力など、繰り返しの中に繰り返しが必要な場面で特に役立ちます。

サンプルコード

以下のコードを実行すると、ネストされたwhileループの動作を確認できます。外側のループが行（縦方向）を、内側のループが列（横方向）を制御し、「#」記号で長方形を描画します。

<html>
<body>
<script>
var height = 2;
var width = 8;

var col = 0;
var row = 0;
document.write("Starting Loop<br>");

while (row < height) {
col = 0;

while (col < width) {
document.write("#");
col++;
}
document.write("<br>");
row++;
}
document.write("Loop stopped!");
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。

Starting Loop
########
########
Loop stopped!

コードの解説

まず、変数height（高さ）に2、width（幅）に8を設定しています。外側のwhileループは、rowがheight未満である間、つまり2回繰り返されます。内側のwhileループは、外側のループが1回実行されるたびにcolが0にリセットされ、colがwidth未満である間、つまり8回「#」を出力します。

内側のループが終了するごとに改行タグが出力され、rowがインクリメントされます。このように、外側と内側のループを組み合わせることで、合計16個の「#」が2行8列の長方形として描画されます。

注意点

ネストされたwhileループを使用する際は、内側のループのカウンタ変数を外側のループの先頭で必ずリセットすることを忘れないでください。リセットを怠ると、内側のループが意図した回数だけ実行されず、無限ループや不正な出力の原因になります。また、ループの条件式が最終的にfalseになるよう、カウンタ変数を適切に更新することも重要です。

  1. JavaScriptのwhileループとは？基本構文と動作例をわかりやすく解説

    whileループは、指定した条件式がtrue（真）である限り、特定の文やコードブロックを繰り返し実行するための制御構造です。条件式がfalse（偽）に評価された瞬間に、ループは終了し、その後の処理へと進みます。 whileループの基本構文 while (条件式) { // 繰り返し実行したい処理 } whileループは、まず最初に条件式を評価します。条件がtrueであればブロック内の処理を実行し、再び条件式に戻って評価を行います。この流れを図にすると以下のようになります。 サンプルコード 実際に簡単な例を見てみましょう。変数 i をカウンターとして使い、5回「Hello」を出力するプ

  2. JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説

    JavaScriptでループの各反復の間に遅延（待ち時間）を設けたい場合は、setTimeout() メソッドを使用します。この記事では、基本的な実装例から、より読みやすいモダンな書き方まで、コード例とともに解説します。 setTimeout()でループに遅延を追加する仕組み setTimeout() は、指定したミリ秒後にコールバック関数を一度だけ実行するメソッドです。ループ内で単に setTimeout(fn, 2000) と書くだけでは、すべてのタイマーがほぼ同時に登録されてしまい、意図した通りの遅延になりません。 そこでポイントとなるのが、遅延時間にループカウンタを掛け算するという手法