为什么在下面的 javascript 代码中的 for 循环中有 6 个不同的变量？答案

【问题标题】：How come there can be 6 different variables inside the for loop in the following javascript code?为什么在下面的 javascript 代码中的 for 循环中有 6 个不同的变量？
【发布时间】：2020-12-17 02:23:28
【问题描述】：

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

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

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

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

【问题讨论】：

document.createElement 每次都会创建一个新元素
虽然只有一个变量card，但它的赋值在每次迭代中都会发生变化。
不是因为您丢失了对先前对象的引用，该对象不再存在。它仍然存在于网格中，尽管 card 可能不再引用它。

标签： javascript for-loop dom javascript-objects createelement

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

你的意思是在同一个循环中有一个不同的img 元素，对吧？

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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。

【讨论】：

【解决方案5】：

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

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

【讨论】：