JavaScript for vs forEach [重复]答案

【问题标题】：JavaScript for vs forEach [duplicate]JavaScript for vs forEach [重复]
【发布时间】：2017-07-11 21:14:53
【问题描述】：

在my code 中forEach 的情况下我们可以得到当前值，for 的情况下我们得到数组的最后一个值。一个按钮和数组中的当前值之间的连接是如何工作的？

var arr = [{ name: "Model S" },
{ name: "Model X" }, { name: "Model 3" }];
var brElt = document.createElement("br");
arr.forEach(function (el) {
    var btnElt = document.createElement("button");
    btnElt.textContent = "Ok";
    btnElt.addEventListener("click", function (e) {
        e.target.textContent = el.name;
        e.target.style.color = "blue";

    })
    document.getElementById("contenu").appendChild(btnElt);
    document.getElementById("contenu").appendChild(brElt);
});

for (var i in arr) {
    var btnElt = document.createElement("button");
    btnElt.textContent = "Ok";
    btnElt.addEventListener("click", function (e) {
        e.target.textContent = arr[i].name;
        e.target.style.color = "green";

    })
    document.getElementById("contenu").appendChild(btnElt);
    document.getElementById("contenu").appendChild(brElt);
};

&lt;div id="contenu"&gt;&lt;/div&gt;

【问题讨论】：

你的问题就像比较while和for。
您的问题中没有代码。
Don't use for…in enumerations on arrays 反正！
@ArthurGuiot forEach 创建一个闭包，但 for 没有。它们并不总是可以互换的（正如这个问题所示）。
绑定索引参数以便复制！ btnElt.addEventListener("click", function (index, e) { e.target.textContent = arr[index].name; e.target.style.color = "green"; }.bind(null, i))

标签： javascript loops for-loop foreach

【解决方案1】：

您将获得数组的最后一个值，因为 i 在循环结束运行后立即具有 2 的值，并且在触发点击事件时它仍然具有该值。

【讨论】：