再也不怕 JavaScript 报错了,怎么看怎么处理都在这
在开发中,有时,我们花了几个小时写的 JS 代码,在游览器调试一看,控制台一堆红,瞬间一万头草泥马奔腾而来。至此,本文主要记录 JS 常见的一些报错类型,以及常见的报错信息,分析其报错原因,并给予处理方法。并且将介绍几种捕获异常的方法。
常见的错误类型
RangeError:标记一个错误,当设置的数值超出相应的范围触发。比如,new Array(-20)。
ReferenceError:引用类型错误,当一个不存在的变量被引用时发生的错误。比如:console.log(a)。
SyntaxError:语法错误。比如 if(true) {。
TypeError:类型错误,表示值的类型非预期类型时发生的错误。
常见的错误
RangeError: Maximum call stack size exceeded
含义:超出了最大的堆栈大小
为什么报错?
在使用递归时消耗大量堆栈,导致游览器抛出错误,因为游览器给分配的内存不是无限的。
举个栗子
处理办法
使用递归的时候,设定一个条件来终止递归,否则会无限循环,直到用尽调用堆栈空间为止。
ReferenceError: "x" is not defined
含义:“x”未定义
为什么报错?
当你引用一个没有定义的变量时,抛出一个 ReferenceError; 当你使用变量的时候,这个变量必须要声明,或者你可以确保它在你当前的脚本或作用域 (scope) 中可用。
举个栗子
处理办法
1. 变量使用 var|let|const 声明
2. 提升变量的作用域
SyntaxError: Identifier 'x' has already been declared
含义: 标识符已声明
为什么报错?
某个变量名称已经作为参数出现了,又在使用 let 再次声明。
举个栗子
SyntaxError: Invalid or unexpected token
含义:捕获无效或意外的标记
为什么报错?
代码中有非法的字符或者缺少必要的标识符号,比如减号 ( - ) 与连接符 ( – ) ,或者是英文双引号 ( " ) 与中文双引号 ( “ )。
举个栗子
处理办法
检查是否有特殊字符或者是否遗漏一些字符。
SyntaxError: Unexpected end of input
含义:意外的终止输入
为什么报错?
代码中某些地方的括号或引号不匹配缺失,缺少()、[]、{}等。
举个栗子
处理办法
检查是否有特殊字符或者是否遗漏一些字符,括号需要配对出现。
TypeError: Cannot read property 'x' of undefined
TypeError: Cannot set property 'x' of undefined
含义:无法读取属性‘x’, 无法设置属性 'x'
为什么报错?
访问或设置未定义(undefined)或 null 值的属性时会发生这种报错。
举个栗子
处理办法
有一些方法可以避免这种错误。一种简单且适用于小型属性链的方法是使用逻辑运算符 &&。
TypeError: 'x' is not a constructor
含义:表示 ‘x’不是构造函数
为什么报错?
使用不是构造器的对象或者变量来作为构造器使用。比如:new 10;
举个栗子
处理办法
使用正确的构造函数。Generator functions 也不能作为构造器来使用。
SyntaxError: Invalid regular expression flags
含义:正则表达式标志无效
为什么报错?
在代码中出现了无效的正则表达式的标记。
举个栗子
处理办法
DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
含义:无效的 Url
为什么报错?
在使用 ajax 请求时 url 错误,导致请求失败
举个栗子
处理办法
检查 url 请求是否正确,保证请求路径的完整。
异常调试及捕获
try/catch
JS 中处理异常的一种模式,try 用于可能会发生错误的代码,catch 对错误的处理
举个栗子
throw
用来抛出一个用户自定义的异常,执行将被停止。
Promise 的异常处理
Promise 执行中,本身自带 try...catch 的异常处理,出错时,将错误 Rejact 函数。
console.log() 方法
在游览器中,使用 console.log 打印 javaScript 的值。
debugger 断点调试
用于停止执行 JavaScript,并调用调试函数。
JavaScript 学习指南
今天向小伙伴们推荐一本电子书《JavaScript 权威指南》,遇到 js 的难点时推荐看看这里的内容,从 javascript 概述到客户端 javascript 参考共有 4 个部分,内容全面讲解详细,篇幅原因,下面以截图展示目录及部分内容,完整版的《JavaScript 权威指南》PDF 请私信我“指南”获取噢。
目录
第一部分 javascript 语言核心
第二部分 客户端 javascript
以上即是《JavaScript 权威指南》,要的小伙伴请私信我“指南”即可免费获取。
最后
报错就是那么简单,根据这些代码敲一敲,熟悉一些常用的报错信息,便于在报错的时候快速地定位到报错原因。希望对小伙伴们有用。
评论