我如何嘗試理解 JavaScript 中的嵌套 For 循環內部

本指南包含哪些內容？

這是一個基本指南，我試圖提供 JavaScript 中巢狀「for 循環」的逐步解釋。透過編寫一個程式來詳細分解循環的邏輯和迭代，該程式在瀏覽器控制台上列印一個實心方形圖案。我將解釋循環內部發生的事情以及嵌套循環內部的迭代及其工作順序。

指南是為誰而設？

本指南面向絕對初學者，他們學習了基本的 JavaScript 基礎知識，或者如果您對「for 循環」的工作順序感到困惑。

先決條件：基本 JavaScript、資料型別（字串、數字）、運算子（=、、、=）和 For 迴圈。

本文最初發佈於 Webdevstack.hashnode.dev

介紹

列印實心方形圖案是初學者等級的挑戰。該挑戰涉及編寫一個程序，使用給定的字元將一個實心正方形的圖案列印到控制台。在本指南中，我們將使用 for 迴圈逐步編寫程序，以了解迴圈的工作原理，詳細分解每個步驟，以了解 for 迴圈開始工作時內部發生的情況。

了解問題

以 4 × 4 字元網格大小視覺化由任何字元（例如 #）組成的實心正方形圖案。這意味著四行四個字元建構 4 x 4 大小（列和行）的實心正方形。這是它在控制台上的外觀。

有必要理解模式的順序。每個新字元有 4 個字元（作為列數），構成一行。我們必須在每個新行中重複此設定 4 次才能列印我們的特定圖案。

開始基礎

首先，讓我們從宣告變數來儲存一些值開始。第一個變數是 size，它儲存計算模式所需的數字 4。第二個是result，它被指派一個空字串來儲存最終的輸出。由於它將保存一個字串值，因此將分配一個空字串作為結果的初始值。 （如果不儲存任何空字串，您可以檢查最後的輸出，它會傳回什麼）

let size = 4;
let result = "";

（不初始化變數也是可以的，但使用變數是為了更好的維護。另外，除了for迴圈之外，程式還可以使用while迴圈或其他方法來寫，但這不是我們的目標本指南）

例如，讓我們編寫基本的“for 循環”，透過將其分解為小步驟來理解循環。清楚地了解基礎知識將使我們的下一步更容易考慮。

let size = 4;
let result = "";

了解基本設定

• 變數設定

  大小= 4; - 循環迭代的次數。

  結果=“”； - 空字串來儲存最終輸出。

• 循環初始化：count = 0;設定「For Loop」的起始值。

• 循環調節：計數

• 迴圈體：結果 = "#";在每次 for 迴圈迭代的結果中附加「#」字元。

• 更新循環變數：count；每次迭代結束時將計數加 1。

  計數 → 計數 = 計數 1

  遞增是必要的，否則循環將無限運行。

追加：在現有值的末端新增值。例如，讓text =“Hello”；如果我將另一個值連接到文字變量，例如text = “World”;它將把字串“World”附加到其現有值“Hello”上，從而產生輸出“ HelloWorld」。文字=「世界」→文字=文字「世界」→文字=「你好」「世界」→文字=「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 行相似的字元集 #### 來建構正方形的維度。 ✅

我們可以透過將循環放入新循環中來重複整個循環四次來實現此目的。這個新循環會建立每組 #### 字元四次。這就形成了一個嵌套循環，即一個循環嵌套在另一個循環中，一個內循環和一個外循環。

？每次外層循環運行時，它會執行內層循環，內層循環也迭代 4 次。這意味著外循環的四次迭代將執行內循環四次，從而導致內循環總共迭代 16 次。如下圖所示。

讓我們根據自己的想法更改程式碼，並相應地更新循環的變數名稱。內部循環的名稱是“col”，因為它透過列計數放置字符，而外部循環的名稱是“row”。

let size = 4;
let result = "";

兩個循環都會不斷迭代，直到條件行

現在，如果我們運行我們的程式碼，輸出將是這樣的：################，這不是我們想要的輸出。發生這種情況是因為我們沒有為每一行插入一個新行。

• 作為負責每個集合 #### 的內部循環，我們將在內部循環之後但仍在外部循環體內的同一變量 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：row = 0 → row

--外循環體

--- 內循環

--- 迭代1: col = 0: result = “#”, 所以結果變成“#”, col

--- 迭代2：col = 1：結果=“#”，因此結果變成“##”，col

--- 迭代3：col = 2：結果=“#”，因此結果變成“###”，col

--- 迭代4：col = 3：結果=“#”，所以結果變成“####”，col

--- 內循環出口

--result = "n": 新增換行符，因此 result 變成「####n」。

行 → 將行的值增加到 1

迭代2：row = 1 → row

--外循環體

--- 內循環

--- 迭代1：col = 0：結果=“#”，因此結果變成“####n#”，col

--- 迭代2: col = 1: result = “#”, 所以結果變成“####n##”, col

--- Iteration3: col = 2: result = “#”, 所以 result 變成 "####n###", col

--- 迭代4: col = 3: result = “#”, 所以結果變成“####n####”, col

--- 內循環出口

-- result = "n": 新增換行符，因此 result 變成「####n####n」。

行 → 將行的值增加到 2

後續過程重複

-迭代3：行= 2 → 2

-迭代4：行= 3 → 3

-結束迭代：row = 2 → 2

➿ 外環出口

最後一行console.log(結果);印出最終值。

「####n####n####n####n」是結果變數最後儲存的最終值。 「n」將執行行製動，同時將輸出列印到控制台。

let size = 4;
let result = "";

結論

執行迭代和顯示多維資料結構等複雜任務通常涉及使用巢狀循環。到目前為止，我們已經探索了基本程序的嵌套循環，為基本理解奠定了基礎。我們已經分解了基本循環和巢狀循環的迭代步驟。我建議嘗試編寫程式的不同變體，例如允許使用者輸入圖案的大小和字元、建立矩形圖案或使用不同的方法實現相同的程序，以進行更多練習。

console.log(“感謝您的閱讀”);

以上是我如何嘗試理解 JavaScript 中的嵌套 For 循環內部的詳細內容。更多資訊請關注PHP中文網其他相關文章！