for 循环用于在其中声明变量但不在全局范围内

Question

当我在 for 循环外声明包含 li 的变量时，循环只打印了一个列表项。 我读到了那个问题，发现两个相同的节点不能同时出现在同一个地方，所以循环每次都会删除创建的 li 以添加新的（最后只产生一个列表项）

但是在 for 循环中声明变量时，代码有效并创建了 4 个列表项。 我想了解当我在循环内声明变量时以编程方式发生了什么。

然后我尝试在控制台中打印列表项的变量，它打印了 4 个列表项。 这是否意味着每次循环运行时，它只是更新 listItem 变量的值以一次包含一个列表项？

但是如何不重新声明变量呢？

代码：

let theMenu = document.createElement("ul");
for (let i = 0 ; i <= 3; i++) {
    let listItem = document.createElement("li");
    theMenu.append(listItem);
} 

Answer 1

在您提供的代码中，listItem 变量是在循环内声明的。 这意味着它是每次循环迭代时创建的新变量。 当循环迭代时，创建 listItem 变量，创建一个新的 li 元素，然后将 listItem 变量附加到 theMenu。 当循环进入下一次迭代时，将再次创建 listItem 变量并重复该过程。

如果您在循环外声明了 listItem 变量，它只会被创建一次，并且每次循环尝试将它追加到 theMenu 时，它都会覆盖之前追加的 li 元素。 这就是为什么在循环外声明变量时只创建一个列表项的原因。

当在循环内声明 listItem 变量时代码起作用的原因是每次循环迭代时都会创建一个新变量，因此不会覆盖先前的 li 元素。 这允许创建所有四个 li 元素并将其附加到 Menu。

Answer 2

一个元素只能在一个文档中出现一次。

如果您append一个已经在文档中某处的元素，那么它将被移动而不是克隆。

如果你放置一行let listItem = document.createElement("li"); 在循环之外，然后创建一个列表项，然后将其附加到文档中四次（第二次和后续移动）。

如果您将该行保留在循环中，那么您将创建四个列表项。

Answer 3

以下是这两种情况下 for...loop 迭代过程中发生的情况：

1. listItem 是一个全局变量，因此 menuItem 保持对一个对象的单一引用。

2. listItem 是一个局部变量，在每次迭代时从头开始重新创建，因此 menuItem 保留 3 个不同的对象引用：

希望视觉效果有助于理解循环内变量作用域的概念。