IE11 中的 JS ForEach 循环答案

【问题标题】：JS ForEach Loops in IE11IE11 中的 JS ForEach 循环
【发布时间】：2018-05-12 01:25:28
【问题描述】：

我在让 JS 循环在 IE11 中的页面上处理 4 个元素时遇到问题。我希望函数 hideImg 在鼠标悬停在您悬停的元素上时运行。

这是我的代码：

elements.forEach( function(element) {
    element.addEventListener('mouseover', hideImg);
});

我想我发现 IE 不支持 forEach 循环，我怎样才能轻松地将其转换为纯 JS 中的 for 循环？

亲切的问候，
史蒂夫

【问题讨论】：

for(var i = 0; i < elements.length; i++) { elements[i].addEventListener("mouseover", hideImg); }.
Array.prototype.forEach 从 IE9 开始支持。
真的。但似乎我也循环遍历不可迭代的属性，例如唯一 id....

标签： javascript loops internet-explorer foreach internet-explorer-11

【解决方案1】：

你可以这样做：

var elements = document.getElementsByClassName("test");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mouseover', hideImg);
}

function hideImg() {
  console.log("hideImg called")
}

.test {
  width: 40px;
  height: 20px;
  border: green solid 1px;
}

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

【讨论】：

非常感谢，这在 IE 中非常有用。为什么你认为我的问题被否决了？我是 JS 的初学者。
这是一个简单的问题，你应该在你的基础上进行探索，如果你是初学者，你应该首先了解条件语句、循环、函数和对象等基础知识。 MDN 是从developer.mozilla.org/bm/docs/Web/JavaScript开始的好来源
好的，感谢您的反馈，再次感谢您的帮助。
@SteveWalker 如果您要尝试互联网上的示例，请使用现代浏览器。 IE11 是旧版受支持的浏览器之一，缺少一些您可以在 Edge、Chrome 和 Firefox 中找到的功能。
@SteveWalker 如果它可以帮助您解决问题，请将此标记为正确答案。干杯。

【解决方案2】：

此代码将解决您在 IE 11 中的问题。

Array.prototype.slice.call(elements).forEach( function(element) {
    element.addEventListener('mouseover', hideImg);
});

【讨论】：

【解决方案3】：

只需将其添加到您的代码顶部 所有浏览器

都支持所提供的代码

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

【讨论】：

【解决方案4】：

也可以使用更紧凑的：

Array.prototype.forEach.call(elements, function(element) {
    element.addEventListener('mouseover', hideImg);
});

甚至更紧凑：

[].forEach.call(elements, function(element) {
    element.addEventListener('mouseover', hideImg);
});

请注意，有些程序员更喜欢避免使用后一种方法，因为它会创建一个原本未使用的空数组。

【讨论】：