Javascript ES6“不是功能”错误

我一直在研究一些使用ES6的JavaScript教程。到目前为止，其中两个课程一直在抛出同样的错误，并且对JavaScript不熟悉，我仍然试图理解逻辑，所以不擅长调试。我曾尝试使用Babel将ES6代码转换为普通JavaScript，认为这是一个浏览器问题，但同样的错误发生。Javascript ES6“不是功能”错误

任何帮助将不胜感激。

的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

来源

2016-12-13 Old Gill

'document.querySelectorAll'不返回数组。它返回类似数组的DOM集合，它没有'forEach'.You可以使用'Array.prototype.forEach.call（inputs，function（input）{...}）;'。 –

谢谢Yeldar Kurmangaliyev这工作完美 –

@YeldarKurmangaliyev请参阅[forEach方法Node.childNodes？]（http://stackoverflow.com/questions/36108712/foreach-method-of-node-childnodes） – guest271314

使用Array.from()将由Document.querySelectorAll()返回的NodeList转换为Array。然后您可以在javascript的其余部分使用.forEach()链接到input。

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

来源

2016-12-13 16:55:11 guest271314

这在Firefox中运行良好，谢谢。然而，在Chrome（版本41.0.2272.89），我不断收到这个错误'Unexpected token =>'。我的ES6的其余部分在Chrome中工作，但不是“箭头功能”。为什么是这样？ –

@OldGill你为什么使用铬版本41？铬稳定在版本55.箭头功能支持在铬，铬45+。请参阅[箭头函数]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Browser_compatibility） – guest271314

我认为它与我的旧操作系统有关。我在** OSX Lion 10.7.5 **上，我的Chrome是最新的版本。在阅读关于将更旧的** OSX **更新为** Yosemite **的严重性能问题之后，我一直不愿意更新我的系统。我不确定** El Capitan **或** Sierra **是否存在相同的问题，我将不得不对这些进行一些阅读。 –

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

你运行该功能的DOM完成解析之前？如果是这样，这个包裹代码在DOMContentLoaded事件侦听器，像这样：
```
document.addEventListener('DOMContentLoaded', function() { 
    //code here 
}); 
```
请问您的浏览器环境支持DOM的NodeLists在foreach方法。检查，console.log(NodeList.prototype.forEach);你应该得到像这样的东西：function forEach() { [native code] }如果没有，它不被支持，因此你的错误。

为打击NodeList.forEach不支持，你可以试试这个：

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

这将现在输出的元素，而不是一个节点列表的数组，并给你访问到Array.prototype功能

来源

2016-12-13 16:56:48

Javascript ES6“不是功能”错误

回答

相关问题