为什么forEach在Edge中不起作用？

Question

此代码在Edge浏览器中不起作用。手风琴面板无法打开，出现此错误：

  

对象不支持属性或方法“ forEach”

const accordionBtn = document.querySelectorAll('.btn-accordion');

accordionBtn.forEach(item => item.addEventListener('click', e => {
    e.preventDefault();

    const currItem = e.currentTarget;

    currItem.classList.toggle("open");
}))

Answer 1

请注意，这应该可以在Edge 16+和其他浏览器according to MDN的最新版本中使用。我手动测试了Edge 17并验证了它在其中的正常工作。

解决方法

该问题源于以下事实：在所有浏览器中，querySelectorAll返回NodeList而不是Array 。 Array支持forEach已有一段时间，但最近才将API添加到NodeList。

如果您想使用它并需要支持较旧的浏览器版本，则可以通过复制Array本身的实现（在IE9 +中有效）来创建简单的polyfill：

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

filter和map呢？

还值得注意的是，filter 在任何浏览器中都还不存在map和NodeList之类的许多其他有用的API 。因此，如果您想获得完整的体验，最好的选择是将项目复制到 real Array。

在大多数现代浏览器中，可以使用Array.from(nodelist)或通过spread syntax [...nodelist]来完成。但是，如果您需要支持IE，则可以使用slice（以及其他创造性技术）来完成工作：

var arr = Array.prototype.slice.call(nodelist);

Answer 2

此变体有效！

const accordionBtn = document.querySelectorAll('.btn-accordion');

[...accordionBtn].forEach(item => item.addEventListener('click', e => {
    e.preventDefault();

    const currItem = e.currentTarget;

    currItem.classList.toggle("open");
}))