为什么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

请注意，根据MDN，这应该在Edge 16+和其他浏览器的最新版本中都有效。我手动测试了Edge 17并验证了它在其中的正常工作。

解决方法

问题源于在所有浏览器中都querySelectorAll返回a NodeList而不是a 的事实。虽然已经支持了一段时间，但最近才将API添加到中。Array ArrayforEachNodeList

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

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

怎么样filter和map？

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

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

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