for循环内用let声明DOM变量的执行原理及重声明问题问询

1. 循环内部用let声明变量的执行逻辑 #

当你在for循环内部用let声明listItem时，每次循环迭代都会创建一个全新的块级作用域，每个作用域里的listItem都是独立变量，指向document.createElement("li")生成的全新DOM节点。

每次循环执行时，都会生成一个新的<li>元素，再通过theMenu.append(listItem)把这个新节点添加到<ul>中。因为每个节点都是独立的DOM对象，不存在“同一节点重复添加”的问题，所以最终<ul>里会生成4个<li>。

如果把listItem放在循环外部声明，整个循环只会创建一个<li>节点。每次调用append时，DOM引擎发现该节点已存在于DOM树中，会将它从原有位置移动到目标位置——本质是移动同一个节点而非添加新节点，因此最终只剩最后一次移动的节点。

2. 控制台打印出4个列表项的原因 #

你控制台打印的应该是theMenu（整个<ul>元素），而非listItem变量本身。listItem是循环块级作用域内的变量，每次循环结束后，当前迭代的listItem仅存在于那次循环的作用域中，循环外部无法直接访问到所有迭代的listItem。

theMenu里有4个<li>，是因为每次循环都创建了新节点并添加进去，这些节点都是独立的DOM对象，不会互相覆盖。

3. 为什么不会出现变量重声明？ #

let是块级作用域的变量声明，for循环的每一次迭代都属于独立的块作用域。也就是说，每次循环里的let listItem都是在当前迭代的块中声明的新变量，和其他迭代里的listItem并非同一个变量，自然不存在“重声明”的冲突问题。

如果用var在循环内部声明，由于var是函数级作用域，会变量提升到整个函数顶部，每次循环都是给同一个变量赋值，这时才会出现“变量复用”的问题，但let的块级作用域从根本上避免了这种情况。

示例代码 #

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

内容的提问来源于stack exchange，提问作者Mohammed