JSループ学習：forループ文の使用（詳細例）

1: for ループ

for ループは、for ステートメント内のループ数を制御する変数を事前に定義するため、for ループ ステートメントは既知のループ数に従ってループ操作を実行できます。これは、ループの数が必要な状況に適しています。スクリプトを実行する必要がある回数は明確にわかっています。

for ループの構文形式は次のとおりです。

for (初期化ステートメント; ループ条件; 変数更新 -- インクリメントまたはデクリメント) {
    ステートメントブロック;   

、

()内の 3 つの式と{}内の「ステートメント ブロック」の 4 つの部分に分解できます。以下で分析してみましょう。

ステートメント分析:

• 初期化ステートメント (式 1): これは主にカウンターを設定するために使用される変数値、つまりループの開始時の値を初期化するために使用されます。このステートメントは最初のループ中にのみ実行され、実行されません。将来的に再度実行されます。

• ループ条件 (式 2): ループ実行の制限条件。ループ本体内のコードを実行するかどうかを制御します。条件が TRUE の場合はループが続行され、条件が FALSE の場合はループが終了してループが終了します。すぐに。
  

• 変数更新 (式 3): インクリメントまたはデクリメント演算を伴う式。ループが実行されるたびに、ループ条件が徐々に「真ではない」ようにカウンタの値が変更されます。
  

• ステートメント ブロック: 条件が true と判断されたときに実行する必要があるコードの数。
  

上記の説明は少し分かりにくいでしょうか。for ループの実行プロセスをより直感的に理解するために、for ループ ステートメントの実行フローチャートを見てみましょう。

for ループの実行プロセスが理解できたので、実際に操作して、簡単な質問に答えて、それをマスターしたかどうかを確認してみましょう。

例: 1 から 100 までの合計を計算する

<script type="text/javascript">
	変数合計=0;
	for(var i=1; i<=100; i++){
		和+=i;
	}
	console.log('1 + 2 + 3 +...+ 99 + 100 = '+sum);
</script>

内の 3 つの式は

省略できますが、3 つの式を区切るセミコロンは省略できません。

// 最初の式を省略します。 Formula var i = 0;
for (; i < 5; i++) {
    //実行されるコード}
// (var y = 0; ; y++) の 2 番目の式を省略します {
    if(y>5){
        壊す;
    }
    //実行されるコード}
// 最初と 3 番目の式を省略します var j = 0;
for (; j < 5;) {
    // 実行されるコード j++;
}
// すべての式を省略します var z = 0;
のために （;;） {
    if(z>5){
        壊す;
    }
    // 実行されるコード z++;
2

: for ループの入れ子

どのような種類のループでも、入れ子にすることができます (つまり、1 つのループ内に 1 つ以上のループが定義されます)。

構文形式:

for (初期化文 1; ループ条件; 変数更新 - 自己インクリメントまたは自己デクリメント) {
    //ステートメントブロック 1;   
    for (初期化ステートメント 2; ループ条件; 変数更新 - 自己インクリメントまたは自己デクリメント) {
        //ステートメントブロック 2;
        for (初期化ステートメント 3; ループ条件; 変数更新 -- インクリメントまたはデクリメント) {
            //ステートメントブロック 3; 
            ……  
        }
    }
ここ

では、for ループのネストを 3 つ定義しています。もちろん、for ループは必要なだけネストできます。

例: for ループで乗算表を実装します。

まず、乗算表を見てみましょう。

グラフのパターンを描くことができます。

• 合計 9 行 9 列があり、各行に複数の式があります。

• i 行目では、式は i*1 から始まり i*i で終わります。合計 i 個の式があります (この効果はループによって実現できます)。

したがって、出力を制御するには二重ループが必要です。外側のループは行 i (i は最小 1、最大は 9) の数を制御し、内側のループは列 j (j は最小 1、最大は等しい) を制御します。私に）。

実装コード:

for(var i = 1; i <= 9; i++){ //外側のループで行を制御 for(var j = 1; j <= i; j++) //内側のループで列を制御 {
		document.write(j+"*"+i+"="+j*i+"&nbsp;&nbsp;&nbsp;");
	}
	document.write("</br>");

結果

:

最初の図に示すように、99 の九九をテーブルに入れて出力することもできます。

document.write("<table>");

for (var i = 1; i <= 9; i++) { //外側のループ制御行 document.write("<tr>");
	for (var j = 1; j <= i; j++) //内部ループ制御列 {
		document.write("<td>" + j + "*" + i + "=" + j * i + "</td>");
	}
	//改行、各行に出力される式の数を制御 document.write("</tr>");
}
document.write("</table>");

次に、CSS スタイルを追加して変更します。

テーブル {
	幅: 600ピクセル;
	ボーダー折りたたみ: 分離;
}

テーブル td {
	ボーダー: #000 1px ソリッド;
	テキスト整列: 中央;

出力を見てください

。

【おすすめ学習：JavaScript上級編】

以上がJSループ学習：forループ文の使い方（詳細な例）の詳しい内容です。詳しくはPHP中国語サイトの関連記事をご覧ください。