为什么我不能在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？

*UPDATE*

根据这个答案,nodelist现在有了forEach方法!

Answer 1

您可以.你不能用它这样的,因为没有forEach对物业HTMLFormControlsCollection说form.elements给你(这是不是一个数组).

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

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

或者您可以使用扩散符号:

[...elements].forEach(function(element) {
    // ...
});

...但请注意,它依赖于HTMLFormControlsCollection浏览器中的实现是可迭代的.

或者交替Array.from(你需要一个polyfill,但你标记了ES2015,所以......):

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

有关详细信息,请参阅我的答案中的"数组式"部分.