在下面的javascript代码中，for循环中怎么会有6个不同的变量呢？

Question

我是 javascript 的初学者，我一直在编写一个 youtube 视频来创建一个记忆游戏。视频中的讲师使用以下循环创建了 12 个不同的 'img' 元素。为了在这里给你一点背景，她一直在做的是创建 12（for 循环中使用的数组的长度）个图像元素并将它们附加到父 div 元素，其名称为 class 'grid'。所以我的问题是，

在下面的代码中，循环运行了 12 次，因为她已经输入，

var card = document.createElement('img');

卡片变量不应该被每次循环运行时创建的相同 'img' 元素替换吗？（换句话说，这里发生的事情不是每次循环运行时都会覆盖 card 变量吗？）。但最后，她展示了结果，创建了 12 张卡片。这是怎么发生的？

Answer 1

它不是覆盖，因为每次循环运行时，document.createElement('img')都会创建一个新元素，然后设置为由卡片变量引用。

在之前的迭代中创建的 img 元素保持不变，因为 card 变量不再指向它们，而是指向新元素。

Answer 2

var 总是得到 hoisted 函数作用域。所以你实际做的是：

function createBoard(){
    var card = null; //hoisted variable
    for(let i=0, i < cardArray.length; i++){
        card = document.createElement('img');
        card.setAttribute('src', 'images/blank.png');
        card.setAttribute(data-id, i);
        // card.addEventListener('click', flipCard)
        grid.appendChild(card);
    }
}
createBoard();

每次迭代都会创建一个新的 img 元素，该元素会分配给 card。通过使用 grid.appendChild(card)，您可以将其添加到 DOM。在迭代结束时 card 同时保留对最后创建的 img.

的引用

如果您不将其附加到 DOM，您最终会得到一个 img。

Answer 3

在循环的顶部createElement创建了一个元素，所以创建了12个元素。

在循环的底部，读取 card（元素）的值并传递给 appendChild。

请务必注意，使用的是 card 的值，而不是 card 的 reference variable 因此在下一次迭代中更改 card 的值不会更改在前一个循环中附加的元素。 JS 没有任何允许您引用变量（仅对象）的功能。

Answer 4

这没问题，因为您在每个循环中都创建了不同的 img 元素，但每次都将其作为 div 的子项目使用。

Answer 5

在 'card' 变量中的 'img' 元素被每个循环的新 'img' 元素覆盖之前，它作为子元素附加到 'grid' 中应该只是另一个 HTML 元素，它将充当所有这些附加的 img 元素的父元素。

在下面的javascript代码中，for循环中怎么会有6个不同的变量呢？

How come there can be 6 different variables inside the for loop in the following javascript code?

javascript

dom

for-loop

javascript-objects

createelement