简介：本文是小编给大家收藏的JavaScript 中频度最高的 10 种错误，我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足 ...
| 本文是小编给大家收藏的JavaScript 中频度最高的 10 种错误，我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。
class Quiz extends Component { componentWillMount() { axios.get("/thedata").then(res => { this.setState({items: res.data}); }); } render() { return ( <ul> {this.state.items.map(item => <li key={item.id}>{item.name}</li> )}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860 </ul> ); }}这里有两件重要的事情要实现： 组件的状态（例如 this.state）从 undefined 开始。 当异步获取数据时，不管它是在构造函数componentWillMount还是componentDidMount中获取的，组件在数据加载之前至少会呈现一次，当 Quiz 第一次呈现时，this.state.items 是未定义的。 这又意味着 ItemList 将 items 定义为 undefined，并且在控制台中出现错误 - “Uncaught TypeError: Cannot read property ‘map" of undefined”。 这很容易解决。最简单的方法：在构造函数中用合理的默认值来初始化 state。class Quiz extends Component { // Added this: constructor(props) { super(props); // Assign state itself, and a default value for items this.state = { items: [] }; } componentWillMount() { axios.get("/thedata").then(res => { this.setState({items: res.data}); }); } render() { return ( <ul> {this.state.items.map(item => <li key={item.id}>{item.name}</li> )}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860 </ul> ); }}在你的应用程序中的具体代码可能是不同的，但我们希望我们已经给你足够的线索，以解决或避免在你的应用程序中出现的这个问题。如果还没有，请继续阅读，因为我们将在下面覆盖更多相关错误的示例。2. TypeError: ‘undefined" is not an object这是在 Safari 中读取属性或调用未定义对象上的方法时发生的错误。您可以在 Safari Developer Console 中轻松测试。这与 1 中提到的 Chrome 的错误基本相同，但 Safari 使用了不同的错误消息提示语。
<script> function init() { var myButton = document.getElementById("myButton"); var myTextfield = document.getElementById("myTextfield"); myButton.onclick = function() { var userName = myTextfield.value; }//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860 } document.addEventListener("readystatechange", function() { if (document.readyState === "complete") { init(); } });</script><form> <input type="text" id="myTextfield" placeholder="Type your name" /> <input type="button" id="myButton" value="Go" /></form>//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：8643058604. (unknown): Script error当未捕获的 JavaScript 错误（通过window.onerror处理程序引发的错误，而不是捕获在try-catch中）被浏览器的跨域策略限制时，会产生这类的脚本错误。 例如，如果您将您的 JavaScript 代码托管在 CDN 上，则任何未被捕获的错误将被报告为“脚本错误” 而不是包含有用的堆栈信息。这是一种浏览器安全措施，旨在防止跨域传递数据，否则将不允许进行通信。 要获得真正的错误消息，请执行以下操作：
location ~ ^/assets/ { add_header Access-Control-Allow-Origin *;}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860HAProxy 将以下内容添加到您为 JavaScript 文件提供资源服务的后端： rspadd Access-Control-Allow-Origin: * rspadd Access-Control-Allow-Origin: * 2. 在 <script> 中设置 crossorigin="anonymous" 在您的 HTML 代码中，对于您设置了Access-Control-Allow-Origin header 的每个脚本，在 script 标签上设置crossorigin =“anonymous”。在脚本标记中添加 crossorigin 属性之前，请确保验证上述 header 正确发送。 在 Firefox 中，如果存在crossorigin属性，但Access-Control-Allow-Origin头不存在，则脚本将不会执行。 5. TypeError: Object doesn"t support property这是您在调用未定义的方法时发生在 IE 中的错误。 您可以在 IE 开发者控制台中进行测试。
function testFunction() { this.clearLocalStorage(); this.timer = setTimeout(function() { this.clearBoard(); // what is "this"? }, 0);};//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860执行上面的代码会导致以下错误：“Uncaught TypeError：undefined is not a function”。 你得到上述错误的原因是，当你调用setTimeout()时，实际上是调用window.setTimeout()。 因此，在窗口对象的上下文中定义了一个传递给setTimeout()的匿名函数，该函数没有clearBoard()方法。 一个传统的，旧浏览器兼容的解决方案是简单地将您的 this 保存在一个变量，然后可以由闭包继承。 例如：function testFunction () { this.clearLocalStorage(); var self = this; // save reference to "this", while it"s still this! this.timer = setTimeout(function(){ self.clearBoard(); }, 0);};//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860或者，在较新的浏览器中，可以使用bind()方法传递适当的引用：function testFunction () { this.clearLocalStorage(); this.timer = setTimeout(this.reset.bind(this), 0); // bind to "this"};function testFunction(){ this.clearBoard(); //back in the context of the right "this"!};//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：8643058607. Uncaught RangeError: Maximum call stack 这是 Chrome 在一些情况下会发生的错误。 一个是当你调用一个不终止的递归函数。您可以在 Chrome 开发者控制台中进行测试。
var a = new Array(4294967295); //OKvar b = new Array(-1); //range errorvar num = 2.555555;//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860document.writeln(num.toExponential(4)); //OKdocument.writeln(num.toExponential(-2)); //range error!num = 2.9999;document.writeln(num.toFixed(2)); //OKdocument.writeln(num.toFixed(25)); //range error!num = 2.3456;document.writeln(num.toPrecision(1)); //OKdocument.writeln(num.toPrecision(22)); //range error!8. TypeError: Cannot read property ‘length"这是 Chrome 中发生的错误，因为读取未定义变量的长度属性。 您可以在 Chrome 开发者控制台中进行测试
var testArray = ["Test"];function testFunction(testArray) { for (var i = 0; i < testArray.length; i++) { console.log(testArray[i]); }}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860testFunction();当你用参数声明一个函数时，这些参数变成了函数作用域内的本地参数。这意味着即使你函数外有名为 testArray 的变量，在一个函数中具有相同名字的参数也会被视为本地参数。 您有两种方法可以解决您的问题：
var testArray = ["Test"];/* Precondition: defined testArray outside of a function */function testFunction(/* No params */) { for (var i = 0; i < testArray.length; i++) { console.log(testArray[i]); }//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860}testFunction();
var testArray = ["Test"];function testFunction(testArray) { for (var i = 0; i < testArray.length; i++) { console.log(testArray[i]); }}//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860testFunction(testArray);9. Uncaught TypeError: Cannot set property当我们尝试访问一个未定义的变量时，它总是返回 undefined，我们不能获取或设置任何未定义的属性。 在这种情况下，应用程序将抛出 “Uncaught TypeError: Cannot set property”。 例如，在 Chrome 浏览器中：
function myFunction(event) { event = event.which || event.keyCode; if(event.keyCode===13){ alert(event.keyCode); }}结语感谢您的观看，如有不足之处，欢迎批评指正。作者：前端攻城小牛原文：https://my.oschina.net/u/3982182/blog/2993156本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.rzxsoft.cn学习互联网营销技术请到巅云建站www.rzxsoft.cn。 |
