在以下javascript代码中，for循环中为什么会有6个不同的变量？

问题描述

我是javascript的初学者，并且一直与youtube视频一起编码以创建一个记忆游戏。视频中的讲师使用以下循环创建了12个不同的“ img”元素。为了给您提供一些背景信息，她一直在做的工作是创建12个（用于for循环的数组的长度）图像元素，并将它们附加到具有“ grid”类名称的父div元素上。所以我的问题是，

在下面的代码中，循环运行12次，并且由于她已经键入了

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

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

解决方法

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

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

,

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。

,

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

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

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

,

这很好，因为您在每个循环中创建了不同的img元素，但每次都将其作为div的子项附加。

,

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