Javascript ES6“；“不是一个函数”；错误

我一直在编写一些使用ES6的JavaScript教程。到目前为止，其中两个课程已经抛出了相同的错误，作为JavaScript新手，我仍在尝试理解逻辑，因此不太擅长调试。我曾尝试使用Babel将ES6代码转换为纯JavaScript，认为这是浏览器问题，但也出现了同样的错误

任何帮助都将不胜感激

ES6 JavaScript

const inputs = document.querySelectorAll('.controls input');

function handleUpdate() {
    const suffix = this.dataset.sizing || '';
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}

inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

由“巴别塔”编译的JavaScript

var inputs = document.querySelectorAll('.controls input');
    function handleUpdate() {
        var suffix = this.dataset.sizing || '';
        document.documentElement.style.setProperty('--' + this.name, this.value + suffix);
}

inputs.forEach(function (input) {
    return input.addEventListener('change', handleUpdate);
});

inputs.forEach(function (input) {
    return input.addEventListener('mousemove', handleUpdate);
});

错误

inputs.forEach is not a function

使用

Array.from（）

将返回的

NodeList

转换为

Array

。然后，您可以在

javascript

的其余部分使用链接到

input

的

.forEach（）

const inputs = Array.from(document.querySelectorAll('.controls input'));

使用
Array.from（）
将返回的
NodeList
转换为
Array
。然后，您可以在
javascript
的其余部分使用链接到
input
的
.forEach（）

const inputs = Array.from(document.querySelectorAll('.controls input'));

首先，需要仔细检查两件事：

您是否在DOM完成解析之前运行此函数？如果是，请将此代码包装到DOMContentLoaded事件侦听器中，如下所示：

document.addEventListener('DOMContentLoaded', function() {
    //code here
});


您的浏览器环境是否支持DOM节点列表上的forEach方法。要检查，
console.log（NodeList.prototype.forEach）您应该得到如下内容：
函数forEach（）{[native code]}
如果不支持，则不支持它，因此会出现错误

要消除对NodeList.forEach的不支持，您可以尝试以下方法：

var inputs = [].slice.call(document.querySelectorAll('.controls input'));

这将输出一个元素数组而不是节点列表，并允许您访问该数组。原型函数首先，需要仔细检查两件事：

您是否在DOM完成解析之前运行此函数？如果是，请将此代码包装到DOMContentLoaded事件侦听器中，如下所示：

document.addEventListener('DOMContentLoaded', function() {
    //code here
});


您的浏览器环境是否支持DOM节点列表上的forEach方法。要检查，
console.log（NodeList.prototype.forEach）您应该得到如下内容：
函数forEach（）{[native code]}
如果不支持，则不支持它，因此会出现错误

要消除对NodeList.forEach的不支持，您可以尝试以下方法：

var inputs = [].slice.call(document.querySelectorAll('.controls input'));

现在，这将输出一个元素数组而不是节点列表，并允许您访问该数组。原型函数
文档。querySelectorAll
不返回数组。它返回类似于DOM集合的数组，它没有
forEach
。谢谢你Yeldar Kurmangaliyev，这很有效perfectly@YeldarKurmangaliyev请看，我非常感谢这篇资源，它确实非常有用。
document.querySelectorAll
不返回数组。它返回类似于DOM集合的数组，它没有
forEach
。谢谢你Yeldar Kurmangaliyev，这很有效perfectly@YeldarKurmangaliyev看到了，我很感激这个资源，非常有用。这在Firefox中运行得很好，谢谢。然而，在Chrome（41.0.2272.89版）中，我不断收到此错误
意外标记=>
。我的ES6的其余部分使用的是Chrome，而不是“箭头功能”。为什么会这样？@OldGill你为什么要使用chrome版本41？chrome稳定版为55。chrome、chrome 45+支持箭头功能。看，我认为这与我的旧操作系统有关。我在OSX Lion 10.7.5上，我的Chrome是这个版本的最新版本。在读到将旧的OSX更新到约塞米蒂后，我一直不愿意更新我的系统。我不确定El Capitan或Sierra是否存在同样的问题，我将不得不对这些问题做一些阅读。@OldGill See。最后一个环节是铬的原始构建。原始版本的可用性在*nix上下降，但在mac上明显上升，因为该网站声明“20分钟前更新”。虽然可能，但运行原始构建需要一些过程。尚未尝试OSX，不确定是否需要为OSX采取其他措施。我非常感谢你的帮助和资源，我一定会调查的。这在Firefox中运行良好，谢谢。然而，在Chrome（41.0.2272.89版）中，我不断收到此错误
意外标记=>
。我的ES6的其余部分使用的是Chrome，而不是“箭头功能”。为什么会这样？@OldGill你为什么要使用chrome版本41？chrome稳定版为55。chrome、chrome 45+支持箭头功能。看，我认为这与我的旧操作系统有关。我在OSX Lion 10.7.5上，我的Chrome是这个版本的最新版本。在读到将旧的OSX更新到约塞米蒂后，我一直不愿意更新我的系统。我不确定El Capitan或Sierra是否存在同样的问题，我将不得不对这些问题做一些阅读。@OldGill See。最后一个环节是铬的原始构建。原始版本的可用性在*nix上下降，但在mac上明显上升，因为该网站声明“20分钟前更新”。虽然可能，但运行原始构建需要一些过程。尚未尝试OSX，不确定是否需要为OSX采取其他措施。我感谢你的帮助和资源，我一定会调查此事的。