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

前回の記事「JS ループ学習: While ループ文の使用 (詳細な例)」では、while ループと do while ループについて簡単に学習しましたが、今日は別のループを紹介します。 —— for ループ ステートメント、皆さんのお役に立てば幸いです。

1: for ループ

for ループは、数値を制御する変数を事前定義します。これは、スクリプトを実行する必要がある回数が明確にわかっている状況に適しています。

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

for (初始化语句; 循环条件; 变量更新--自增或自减) {
    语句块;   
}

for ループ ステートメントは 4 つの部分に分解できます。そのうちの 3 つは ()# です。 ## 式と {} の「ステートメント ブロック」について、以下で分析してみましょう。

ステートメントの分析:

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

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

  
  

• 変数更新 (式 3): インクリメントまたはデクリメント操作を伴う式。ループが実行されるたびに、カウンターの値が即座に変更されるため、ループが状況は徐々に「維持できなくなります」。

  
  

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

  
  

上記の説明は少し複雑ですか? for ループ ステートメントの

実行フローチャート を見て、for ループ ステートメントの実行を理解しましょう。プロセス:

# for ループの実行プロセスを理解したので、実際の操作を実行して、マスターしたかどうかを確認するために小さな質問をしてみましょう。それ！

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

<script type="text/javascript">
	var sum=0;
	for(var i=1; i<=100; i++){
		sum+=i;
	}
	console.log(&#39;1 + 2 + 3 +...+ 99 + 100 = &#39;+sum);
</script>

##for ループ内の 3 つの式

##JS次の例に示すように、for ループ内の括弧内の 3 つの式は省略できますが、3 つの式を区切るセミコロンは省略できません。

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {
    // 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {
    if(y > 5){
        break;
    }
    // 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {
    // 要执行的代码
    j++;
}
// 省略所有表达式
var z = 0;
for (;;) {
    if(z > 5){
        break;
    }
    // 要执行的代码
    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、最大値は i に等しい)。

実装コード:

for(var i = 1; i <= 9; i++){     //外层循环控制行
	for(var j = 1; j <= i; j++) //内层循环控制列
	{
		document.write(j+"*"+i+"="+j*i+"   ");
	}
	document.write("</br>");
}

出力結果:

冒頭のように99の九九を入れることもできます。 pic テーブルへの出力:

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 スタイルを追加して変更します:

table {
	width: 600px;
	border-collapse: separate;
}

table td {
	border: #000 1px solid;
	text-align: center;
}

出力を確認します:

[推奨学習: JavaScript 上級チュートリアル

]

以上がJSループ学習：forループ文の使用（詳細例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。