错误种类：

· 代码错误：这种错误浏览器会报错，可以根据具体的错误类型去排错。

· 逻辑错误：这种错误浏览器不会报错，但是可以通过打印日志，或者打断点进行调试排错。

一，代码错误

1.1 SyntaxError（语法错误）

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

如下：

第一种：变量名错误导致；

第二种：缺少括号

声明变量：var / let / const / function，当创建一个变量时会在内存中的栈区开辟一个新的空间。

变量命名规则和规范：
规则：
1.由字母、数字、下划线、$符号组成，不能以数字开头
2.不能是关键字和保留字，例如：for,while,this,name
3.区分大小写

规范：
1.变量名必须有意义
2.遵守驼峰命名法
3.建议不要用$作为变量名

×Uncaught SyntaxError: Invalid or unexpected token

×Uncaught SyntaxError: missing) after argument list

1.2 ReferenceError（引用错误）

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

如下：

第一种：引用了一个不存在的变量；

第二种：将变量赋值给一个无法被赋值的对象；

第三种：使用JSON.parse进行解析json字符串时，解析的内容不合法。

×Uncaught ReferenceError: a is not defined

×Uncaught ReferenceError: Invalid left-hand side in assignment

×Uncaught SyntaxError: Unexepcted token u in JSON at position 0

1.3 RangeError（范围错误）

RangeError是当一个值超出有效范围时发生的错误。

主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

×Uncaught RangeError: Invalid array length

1.4 TypeError（类型错误）

1.4.1 变量或参数不是预期类型

比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。

×Uncaught TypeError: 123 is not a constructor

×Uncaught TypeError: a is not function

1.4.2调用对象不存在的方法

以下的错误是因为变量**前面的那个变量是undefined/null。

×Uncaught TypeError: Cannot read property 'aa' of undefined

×Uncaught TypeError: Cannot set property 'name' undefined

×Uncaught TypeError: Cannot set property 'age' of null

1.5 URLError（URL错误）

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

×Uncaught URIError: URI malformed

1.6 EvalError（eval错误）

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

1.7 Error（基类型）

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

×Uncaught Error: 出错了！

×Uncaught RangeError: 出错了，变量超出有效范围！

×Uncaught TypeError: 出错了，变量类型无效！

二，逻辑错误

2.1类型转换错误

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

因此建议使用全等（===）和不全等（!==）操作符，以避免类型转换。

alert(5 == "5"); //true

alert(5 === "5"); //false

alert(1 == true); //true

alert(1 === true); //false

2.2数据类型错误

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

function getQueryString (url) {

if (typeof url == "string") { // 通过检查类型确保安全

let pos = url.indexOf("?")

if (pos > -1) {

return url.substring(pos + 1)

}

return ""

}

// 这个函数首先检查了传入的值是不是字符串。这样，就确保了函数不会因为接收到非字符串值而导致错误。

2.3通信错误

2.3.1 ajax请求的地址url不正确

会报404的状态码，找不到页面

2.3.2发送的数据错误

会报400的状态码，一般为参数错误

三，浏览器的其他报错

·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)

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

四，补充

欢迎大家评论，新人第一天 ^ _ ^

前端报错手册