为什么我不能在 Javascript 元素集合上使用 Array.forEach？

Question

我正在使用 Babel/ES6 构建一个应用程序。我想为它的仅查看版本禁用所有表单元素，所以我这样做了：

 let form = document.getElementById('application-form')
let elements = form.elements

我希望能够做到这一点，而不是使用常规的旧 for 循环（确实有效）：

 elements.forEach((el) => {
    el.disabled = true
})

但我得到了 TypeError: elements.forEach is not a function

奇怪的是，如果我 console.log(elements) 在 Chrome 开发控制台中，它就像一个带有一堆 input 对象的数组。它不显示对象的 Object 表示法，并且所有键都是整数。我在想这是某种伪数组，但我什至不知道如何找到它。

编辑：简短的回答它不是一个数组，它是一个 HTMLCollection。请参阅 为什么节点列表没有 forEach？

*更新*

根据 这个答案， nodelist 现在有 forEach 方法！

原文由 inostia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以。你不能 那样 使用它，因为 forEach HTMLFormControlsCollection 属性 form.elements 给你（不是数组）。

无论如何你都可以使用它：

 Array.prototype.forEach.call(form.elements, (element) => {
    // ...
});

或者在现代浏览器上，您可以利用底层 HTMLCollection 是可 迭代的 这一事实，即使它没有 forEach ：

 // `for-of`:
for (const element of elements) {
    // ...do something with `element`...
}

// Spreading into an array:
[...elements].forEach((element) => {
    // ...do something with `element`...
});

不过，这不适用于 IE11 等过时的浏览器。

还有 Array.from （需要针对过时浏览器的 polyfill）：

 Array.from(elements).forEach((element) => {
    // ...
});

有关详细信息，请 在此处查看我的回答 中 “类似数组” 的部分。

原文由 T.J. Crowder 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您 不能 在 forEach 上使用 HMTLCollection 。 forEach 只能用于`数组。

替代方法是使用 lodash 并执行 _.toArray() ，这会将 HTMLColelction 转换为数组。在此之后，您可以对其进行正常的数组操作。或者，使用 ES6 spread 并执行 forEach()

像这样，

 var a = document.getElementsByTagName('div')
[...a].forEach()

原文由 Pranesh Ravi 发布，翻译遵循 CC BY-SA 3.0 许可协议