盘点几种JavaScript常见的错误

桃扇骨 2024-03-24 10:00 75阅读 0赞

![05516e1f704e300f39ae77192a875728.jpeg][]

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

从浏览器的控制台到运行[Node][].js的计算机终端，我们到处都会看到各类错误。

这篇文章的重点是概述我们在JS开发过程中可能遇到的错误类型。

## **1. RangeError** ##

当数字超出允许的值范围时，将抛出此错误。

例如，

*  
 *  
 *

`const l = console.log``const arr = [90,88]``arr.length=90**99`

我们有一个带有两个元素的arr。接下来，我们尝试使数组包含90\*\*99 == 2.9512665430652753e+193元素。

这个数字超出了大小数组可以增长的范围。所以运行时它会抛出RangeError：

*  
 *  
 *  
 *  
 *

`$ node errors``errors.js:4``arr.length=90**99``^``RangeError: Invalid array length`

因为我们要增加arr数组的数量超出了JS指定的范围。

## **2. ReferenceError** ##

当对变量/项的引用被破坏或不存在时，将引发此错误。也就是说，变量/项不存在。

例如，

*  
 *  
 *  
 *  
 *

`const l=console.log``const cat = "cat"``cat``dog`

我们有一个变量cat初始化为“ cat”。接下来，我们引用cat变量和dog变量。cat变量存在，而dog变量不存在。

cat将返回“ cat”，而dog会引发ReferenceError，因为在环境记录中找不到名为dog的变量。

*  
 *  
 *  
 *  
 *  
 *

`$ node errors``errors.js:3``dog``^``ReferenceError: dog is not defined`

每当我们创建或定义变量时，变量名称都会写入环境记录中。此环境记录就像键值存储表一样，如下图：

*  
 *  
 *  
 *  
 *

`+-------------+``| Key | Value |``---------------``| cat | "cat" |``+-------------+`

每当我们引用变量时，它都会存储程序中定义的变量。当在记录中找到环境值并提取并返回值时，将以该变量的名称作为关键字搜索环境记录。调用尚未定义的函数。

现在，当我们创建或定义一个没有赋值的变量时。变量将键作为变量名写入环境记录，但该值将保持未定义状态。

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *

`var cat``env record``+-----------------+``| Key | Value |``-------------------``| cat | undefined |``+-----------------+`

稍后为变量分配值时，将在env记录中搜索该变量，当发现该初始未定义值时，该赋值将被覆盖。

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

`var cat``cat = "cat"``env record``+-------------+``| Key | Value |``---------------``| cat | "cat" |``+-------------+`

因此，当在env记录中找不到变量名时，JS引擎会抛出RefernceError。

*  
 *  
 *  
 *  
 *  
 *  
 *

`+-------------+``| Key | Value |``---------------``| cat | "cat" |``+-------------+``cat // "cat", yes, :) it"s there``dog // :( what"s this? can"t find it`

注意：未定义的变量不会抛出ReferenceError，因为它存在于环境记录中只是它的值尚未设置。

## **3. SyntaxError** ##

这是我们遇到的最常见的错误。当我们键入JS引擎难以理解的代码时，会出现此错误。解析期间，JS引擎捕获了此错误。

在JS引擎中，我们的代码经历了不同的阶段，然后才能在终端上看到运行结果。

*  标记化
 *  解析
 *  执行

标记化将源代码分解为各个单元。在这个阶段，将对数字，关键字，文字，运算符进行分类并分别进行标记。接下来，生成的token流将传递到解析阶段，由解析器处理。这是从token生成[AST][]的地方。AST是我们代码结构的抽象数据结构。

在标记化和解析这两个阶段，如果我们代码的语法不符合JS的语法规则，则会使执行阶段失败并引发[SyntaxError][]。例如，

*  
 *

`const l = console.log``let cat h =“ cat”`

这里的“h”明显是多余的，所以由于多了这个字符，会导致引擎抛出SyntaxError

*  
 *  
 *  
 *  
 *  
 *

`$ node errors``errors.js:3``let cat h = "cat"``^``SyntaxError: Unexpected identifier`

很显然，Node.js引擎发现了错误，由于这个不和谐字符的出现，导致cat变量的声明失败了。

## **4. TypeError** ##

TypeError 是指对象用来表示值的类型非预期类型时发生的错误。例如，我们期望它是布尔值，但结果发现它是string类型。

再例如：

*  
 *

`const num = 123``num.toUpperCase()`

这会引发TypeError

*  
 *  
 *  
 *  
 *

`$ node errors``errors.js:4``num.toUpperCase()``^``TypeError: num.toUpperCase is not a function`

因为toUpperCase函数需要字符串数据类型。toUpperCase函数是有意通用的；它不需要其this值是String对象。因此，可以将其转移到其他种类的对象中用作方法。

如果我们在Objects，Boolean，Symbol，null，undefined数据类型上调用toUpperCase函数，则只有字符串会转换为大写或小写形式，我们将得到TypeError，因为它操作的数据类型错误。

## **5. URIError** ##

这说明了使用一种全局URI处理功能与其定义不兼容。

JS中的URI（统一资源指示符）具有以下功能：decodeURI，[decodeURIComponent][]等。

如果我们用错误的参数调用其中任何一个，我们将得到一个URIError。

*  
 *  
 *  
 *

`decodeURI("%")``^``URIError: URI malformed`

encodeURI，获取URI的未编码版本。“％”不是正确的URI，因此引发了URIError。

编码或解码URI时出现问题时，将引发URIError。

## **6. EvalError** ##

如果非法调用 eval()，则抛出 EvalError 异常。

根据EcmaSpec 2018版：

此异常不再会被JavaScript抛出，但是EvalError对象仍然保持兼容性。

## **7. InternalError** ##

该错误在JS引擎内部发生，特别是当它有太多数据要处理并且堆栈增长超过其关键限制时。

当JS引擎被太多的递归，太多的切换情况等淹没时，就会发生这种情况

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *  
 *

`switch(num) {``case 1:``...``break``case 2:``...``break``case 3:``...``break``case 4:``...``break``case 5:``...``break``case 6:``...``break``case 7:``...``break``... up to 1000 cases``}`

太多的递归，一个简单的例子是这样的：

*  
 *  
 *  
 *

`function foo() {``foo()``}``foo()`

## **结论** ##

正如我们所说，没有人能不犯错误。就我们输入的代码而言，发生错误是难以避免的。

不过为了避免更多的错误出现，我们需要知道抛出的错误的类型是什么，我们该如何解决。

所以我们在这篇文章中列出了它们，并提供了一些示例来简要的来介绍了它们是如何发生的。

[05516e1f704e300f39ae77192a875728.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a5a104477d77404bbc0a105a47248bf5.png
[Link 1]: https://www.weidianyuedu.com/
[Node]: https://so.csdn.net/so/search?q=Node&spm=1001.2101.3001.7020
[AST]: https://so.csdn.net/so/search?q=AST&spm=1001.2101.3001.7020
[SyntaxError]: https://so.csdn.net/so/search?q=SyntaxError&spm=1001.2101.3001.7020
[decodeURIComponent]: https://so.csdn.net/so/search?q=decodeURIComponent&spm=1001.2101.3001.7020