JavaScript のネストされた For ループの内部を理解しようとした方法

このガイドには何が記載されていますか?

これは、JavaScript の入れ子になった「for ループ」を段階的に説明する基本ガイドです。プログラムを作成してループのロジックと反復を詳細に分析すると、ブラウザー コンソールに実線の正方形のパターンが表示されます。ループの内部で何が起こっているのか、入れ子になったループ内の反復とその動作順序について説明します。

誰のためのガイドですか？

このガイドは、JavaScript の基礎を学んだ完全な初心者、または「for ループ」の動作順序について混乱している人を対象としています。

前提条件: 基本的な JavaScript、データ型 (文字列、数値)、演算子 (=、<、>、, =)、および For ループ。

この記事はもともと Webdevstack.hashnode.dev で公開されています

導入

ソリッドスクエアパターンの印刷は初心者レベルの課題です。この課題には、指定された文字を使用して、実線の四角形のパターンをコンソールに出力するプログラムを作成することが含まれます。このガイド全体を通して、for ループがどのように機能するかを理解するために、for ループを使用してプログラムをステップバイステップで作成し、for ループが機能し始めたときに内部で何が起こるかを各ステップごとに詳しく説明します。

問題を理解する

任意の文字 (# など) で構成される実線の正方形のパターンを 4 × 4 の文字グリッド サイズで視覚化します。つまり、4 文字の 4 行で 4 x 4 サイズ (列と行) の立体正方形が構築されます。コンソールでは次のように表示されます。

パターンの順序を理解する必要があります。新しいそれぞれの文字が 4 文字 (列数として) あり、行が形成されます。特定のパターンを出力するには、新しい行ごとにこのセットを 4 回繰り返す必要があります。

基本を始める

まず、値を格納する変数を宣言することから始めましょう。最初の変数は size で、パターンの計算に必要な数値 4 が格納されます。 2 番目は result で、最終出力を格納するために空の文字列が割り当てられます。文字列値を保持するため、結果の初期値として空の文字列が割り当てられます。 (空の文字列を保存しない場合は、最後に出力を確認して、何が返されるかを確認できます)

let size = 4;
let result = "";

(変数を初期化せずに実行することも可能ですが、メンテナンスを改善するために変数が使用されます。また、for ループとは別に、while ループまたは他のメソッドを使用してプログラムを作成することもできますが、これは私たちの目標ではありません。このガイド)

たとえば、ループを小さなステップに分割して理解するために、基本的な「for ループ」を書いてみましょう。基本を明確に理解すると、次のステップを検討しやすくなります。

let size = 4;
let result = "";

基本設定を理解する

• 変数の設定

  サイズ = 4; - ループの反復回数。

  結果 = ""; - 最終出力を保存する空の文字列。

• ループの初期化: count = 0; 「For ループ」の開始値を設定します。

• ループ条件付け: count <サイズ; count が size より小さいかどうかをチェックします。ループは、条件が false を返すまで実行されます。

• ループ本体: result = "#";各 for ループ反復の結果に「#」文字を追加します。

• 更新ループ変数: count ;各反復の終了時にカウントが 1 ずつ増加します。

  カウント → カウント = カウント 1

  インクリメントが必要です。そうしないと、ループが無限に実行されます。

追加: 既存の値の末尾に新しい値を追加します。たとえば、text = "Hello" とします。 text = “World” のように、テキスト変数に別の値を連結すると、文字列「World」を既存の値「Hello」に追加し、出力「HelloWorld」になります。テキスト = "ワールド" → テキスト = テキスト "ワールド" → テキスト = "Hello" "ワールド" → テキスト = "HelloWorld"

各反復で何が起こるでしょうか?

サイズ = 4;結果 = "";

反復 1:

• カウント = 0; → カウント

• 結果 = "#"; → 結果 = 結果 "#"; → 結果 = "" "#" → 結果 = "#";

• カウント → カウント = カウント 1 → カウント = 0 1 → カウント = 1

反復 2:

• カウント = 1; → カウント

• 結果 = "#"; → 結果 = 結果 "#"; → 結果 = "#" "#" → 結果 = "##";

• カウント → カウント = カウント 1 → カウント = 1 1 → カウント = 2

反復 3:

• カウント = 2; → 2

• 結果 = “#”; →結果は「###」

• カウント → カウントは 3

反復 4:

• カウント = 3; → 3

• 結果 = “#”; →結果は「####」

• カウント → カウントは 4

反復の終了:

• カウント = 4; → 4

console.log(結果);結果の最終値をコンソールに出力します。最終値は最後に更新された値です。この場合、出力: ####

巣の構築 - パターンの構築

これまで、For ループを使用して 4 つの "#" 文字 (各文字は列と見なすことができます) を 1 行 (行と呼びます) に出力しました。正方形の寸法を構築するには、合計 4 行の同様の文字セット #### が必要です。 ✅

これは、ループを新しいループ内に配置してループ全体を 4 回繰り返すことで実現できます。この新しいループは、文字の各セット #### を 4 回作成します。これにより、ネストされたループが形成されます。これは、別のループ内のループ、つまり内側のループと外側のループを意味します。

?外側のループが実行されるたびに内側のループが実行され、同様に 4 回反復されます。これは、外側のループを 4 回反復すると内側のループが 4 回実行され、内側のループの反復が合計 16 回になることを意味します。これは以下のようなものです。

アイデアに従ってコードを変更し、それに応じてループの変数名も更新しましょう。内側のループの名前は、列数に従って文字を配置するため「col」、外側のループの名前は「row」です。

let size = 4;
let result = "";

両方のループは、条件行

になるまで反復を続けます。サイズと列 ここでコードを実行すると、出力は次のようになります: ################ これは、望ましい出力ではありません。これは、1 行ごとに改行しなかったために発生します。

各セット #### を担当する内部ループとして、内部ループの後、ただし外部ループの本体内に、同じ変数 result に改行文字「n」を追加します。 result = "n ";

for(let count = 0; count < size; count++){
    result += "#";
}
console.log(result);
// Play with this code on a code playground or on console.

各行について、内部ループは結果に「#」文字を追加します。文字の追加が完了して終了すると、外側のループは結果変数に「n」を追加して新しい行に移動します。

ネストされた反復を中断する

➿ アウターループ

反復 1: 行 = 0 → 行 -- 外側のループ本体

--- 内部ループ

--- Iteration1:col = 0: result = “#”、結果は “#”、col

--- Iteration2:col = 1: result = "#"、結果は "##"、col

になります。

--- Iteration3:col = 2: result = "#"、結果は "###"、col

になります。

--- Iteration4:col = 3: result = "#"、結果は "####"、col

になります。

--- 内側ループの出口

--result = "n": 改行文字が追加されるため、結果は "####n" になります。

行 → 行の値を 1 に増分します

反復 2: 行 = 1 → 行

サイズ → 1

-- 外側のループ本体

--- 内部ループ

--- Iteration1:col = 0: result = "#"、結果は "####n#"、col

になります。

--- Iteration2:col = 1: result = "#"、結果は "####n##"、col

になります。 --- Iteration3:col = 2: result = "#"、結果は "####n###"、col になります。

--- Iteration4:col = 3: result = "#"、結果は "#####n####"、col

になります。

--- 内側ループの出口

-- result = "n": 改行文字が追加されるため、結果は "####n####n" になります。

行 → 行の値を 2 に増分します

後続のプロセスが繰り返されます

-反復 3: 行 = 2 → 2 < 4 → true → "####n####n####n" → 行の値を 3 に増分します

-反復 4: 行 = 3 → 3

-反復終了: row = 2 → 2

4 → false → 停止

➿ 外回り出口

最後の行 console.log(result);最終値を出力します。

"####n####n####n####n" は、結果変数が最後に格納する最終値です。 「n」は、コンソールに出力を出力しながらラインブレークを実行します。

let size = 4;
let result = "";

結論

多次元データ構造の反復や表示などの複雑なタスクを実行するには、多くの場合、ネストされたループの使用が必要になります。これまで、基本的な理解のための基礎を構築するために、基本プログラムのネストされたループ内を探索してきました。基本的なループとネストされたループの反復ステップに分けて説明しました。より練習のために、ユーザーがパターンのサイズと文字を入力できるようにする、長方形のパターンを作成する、または別の方法を使用して同じプログラムを実装するなど、このプログラムのさまざまなバリエーションを作成してみることをお勧めします。

console.log(“読んでいただきありがとうございます”);

以上がJavaScript のネストされた For ループの内部を理解しようとした方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。