前端项目中常见的报错类型汇总

声明：文章参考了《javascript高级程序设计 第三版》，并结合了一些简单的例子，本身再次整合，整理出js常见的报错，以便用于学习交流

1.错误分为两种

• 代码错误：这种错误浏览器会报错，能够根据具体的错误类型去排错。 
• 逻辑错误：这种错误浏览器不会报错，可是能够经过打印日志，或者打断点进行调试排错。

2.javascript中的七种错误类型

• SyntaxError（语法错误）

报错为：Uncaught Syntaxerror：相关信息提示。表示解析代码时发生的语法错误，即写的代码不符合js编码规则。咱们能够根据后面的信息提示去修改错误，固然，语法错误，浏览器会直接报错，整个代码都不会执行。

以下：第一种：变量名错误致使；第二种：缺乏括号

声明变量：var / let / const / function，当建立一个变量时会在内存中的栈区开辟一个新的空间。
变量命名规则和规范：
规则：
1.由字母、数字、下划线、$符号组成，不能以数字开头
2.不能是关键字和保留字，例如：for,while,this,name
3.区分大小写
规范：
1.变量名必须有意义
2.遵照驼峰命名法
3.建议不要用$做为变量名

• ReferenceError（引用错误）

报错为：Uncaught ReferenceError：***，表示使用了没有定义的变量，错误以前的代码会执行，以后代码不会执行。

以下：第一种：引用了一个不存在的变量；第二种：将变量赋值给一个没法被赋值的对象;第三种：使用JSON.parse进行解析json字符串时，解析的内容不合法

• RangeError（范围错误）

RangeError是当一个值超出有效范围时发生的错误。主要有几种状况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

• TypeError（类型错误）

(1) 变量或参数不是预期类型，好比，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，由于new命令的参数应该是一个构造函数。

(2) 调用对象不存在的方法。如下的错误是由于变量**前面的那个变量是undefined/null。

• URLError（URL错误）

URIError是URI相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。这些API的使用太少了，所以这种错误在咱们平常开发中不多遇到。

• EvalError（eval错误）

eval函数没有被正确执行时，会抛出EvalError错误。该错误类型已经再也不在ES5中出现了，只是为了保证与之前代码兼容，才继续保留。所以这种错误在咱们平常开发中也基本不会遇到。

• Error（基类型）

Error 是基类型，其余六种错误类型都继承自该类型。所以，全部错误类型共享了一组相同的属 性（错误对象中的方法全是默认的对象方法）。 Error 类型的错误不多见，若是有也是浏览器抛出的； 这个基类型的主要目的是供开发人员抛出自定义错误。以下：

3.逻辑错误 -- 三种常见的错误状况

• 类型转换错误

类型转换错误发生在使用某个操做符，或者使用其余可能会自动转换值的数据类型的语言结构时。 在使用相等（==）和不相等（!=）操做符，或者在 if 、 for 及 while 等流控制语句中使用非布尔值时， 最常发生类型转换错误。

所以建议使用全等（===）和不全等（!==）操做符，以免类型转换。

alert(5 == "5"); //true
alert(5 === "5"); //false
alert(1 == true); //true
alert(1 === true); //false复制代码

• 数据类型错误

JavaScript 是松散类型的，也就是说，在使用变量和函数参数以前，不会对它们进行比较以确保它 们的数据类型正确。为了保证不会发生数据类型错误，只能依靠开发人员编写适当的数据类型检测代码。 建议你们能够学习使用typescript，它是一种强类型的语言，能够设置变量的具体类型，在前端开发中使用会极大的减小咱们开发的bug，而且方便维护。

function getQueryString (url) {
  if (typeof url == "string") { // 经过检查类型确保安全
    let pos = url.indexOf("?")
    if (pos > -1) {
      return url.substring(pos + 1)
    }
  }
  return ""
}

// 这个函数首先检查了传入的值是否是字符串。这样，就确保了函数不会由于接收到非字符串值而致使错误。
复制代码

• 通讯错误

（1）ajax请求的地址url不正确：会报404的状态码，找不到页面

（2）发送的数据错误。会报400的状态码，通常为参数错误

4.浏览器的其余报错的状况

• XMLHttpRequest cannot load http://***. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://***' is therefore not allowed access.
  

进行异步请求时，产生跨域了

• Illegal break statement
  

出现了非法语句

• GET file:///****::ERR_FILE_NOT_FOUND

找不到引入的.js文件。可能缘由：没有引入文件，或者js文件名字拼写错误（好比，少了文件后缀.）

• Failed to load resource: the server responded with a status of 404 (Not Found)

文件没有被找到，说明文件引用的路径有问题，或文件损坏

看完文章，若是以为对您的平常开发有用的话，别忘记点赞哦~^_^