为什么这个特定的 Javascript 循环仅在重新分配变量时才起作用？

Question

所以我的目标是在 Javascript 中创建一个在页面上随机放置一些 div 的函数。最终，我想用图片填充这些 div，这样它就产生了图片被随机扔在桌子上的想法。我想出了一个 for 循环，现在它可以工作了，但我不明白为什么它以前不能工作。

var wrapper = document.getElementById("wrapper");
var xvalue;
var yvalue;

for (var i = 0; i < 3; i++) {
  var newDiv = document.createElement("div");
  xvalue = Math.floor(Math.random() * 400);
  yvalue = Math.floor(Math.random() * 400);
  newDiv.setAttribute("class", "frame");
  newDiv.style.top = yvalue+"px";
  newDiv.style.left = xvalue+"px";
  wrapper.appendChild(newDiv);
}

之前，我已经移动了这条线：

var newDiv = document.createElement("div");

在实际的 for 循环之前。由于它只用于创建一个新的 div，我想我不妨在循环之外声明变量。然而，这样做会导致它在同一个位置重复生成相同的div 三 次。通常我理解为什么将一个固定变量放在 for 循环之外会产生相同的结果，但在这里我不明白为什么。

提前致谢！

大安

Answer 1

如果你放

var newDiv = document.createElement("div");

在循环之外，您将只有一个对象并在三个周期内对其进行操作。你不会有三个对象...

顺便说一句，将代码中的所有var 移到顶部而不进行赋值（参见下面的代码）。

变量声明被提升到顶部！

More about hoisting here.

您的代码在行为上看起来不同。通过将所有 var 放在顶部，它看起来就像它实际工作的方式一样，而且效果要好得多（便于理解和调试）。

您更正的代码是：

var i, newDiv, xvalue, yvalue, wrapper;

wrapper = document.getElementById("wrapper");

for (i = 0; i < 3; i++) {
  newDiv = document.createElement("div");
  xvalue = Math.floor(Math.random() * 400);
  yvalue = Math.floor(Math.random() * 400);
  newDiv.setAttribute("class", "frame");
  newDiv.style.top = yvalue + "px";
  newDiv.style.left = xvalue + "px";
  wrapper.appendChild(newDiv);
}