我如何尝试理解 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中文网其他相关文章！