如何排除 JavaScript 中的 "引用错误"、"语法错误 "和 "类型错误

介绍

JavaScript 是一种在前端和后端开发中使用的编程语言. 使用 JavaScript 时,解密错误消息可能会感到有点害怕。当您在应用程序中解决问题时,了解错误消息是指什么是很重要的。幸运的是,现代浏览器配备了内置的调试工具,可以帮助您解决这个问题。每一个浏览器在视觉表示时会以不同的方式处理错误消息。然而,错误消息会告诉您 JavaScript 代码发生了什么。

在本教程中,您将了解在浏览器环境中出现的三个常见的JavaScript错误类型:ReferenceError、SyntaxError和TypeError。

您可以从我们的 How to Code in JavaScript教程中了解更多关于JavaScript的信息,以及我们使用的 How to Use the JavaScript Developer Console教程的开发者控制台。

以下示例不是完整的,可作为您可能遇到的常见错误消息的先例。此外,示例中的错误消息来自 Chrome 网页浏览器。

理解 JavaScript 错误类型

JavaScript 中的错误是基于 Error 对象)。这是一个内置的对象,填充了有关发生的错误类型的信息,然后是详细描述可能的原因的消息。

1VM170:1 Uncaught ReferenceError: shark is not defined
2    at <anonymous>:1:1

如果你解构了这个错误消息,你会发现‘ReferenceError’是被识别的错误类型,然后是描述错误的错误消息:‘鲨鱼未定义’。

每次在浏览器中发现错误时,错误类型和消息都会表示问题. 使用此信息,您可以根据您收到的错误类型和消息来确定如何调试您的代码。

理解`参考错误`

当您尝试访问尚未创建的变量时,会出现ReferenceError。

遇到未定义变量

例如,如果在執行「console.log()」時誤寫變量名稱,則會收到「ReferenceError」訊息:

1let sammy = 'A Shark dreaming of the cloud.';
2
3console.log(sammmy);

1[secondary_label Output]
2Uncaught ReferenceError: sammmy is not defined
3    at <anonymous>:1:13

变量sammmy,有三个m,不存在,也不定义。要修复此错误,您可以将变量更新到正确的拼写,然后再次运行命令. 如果成功,您将不会收到错误消息。

在它被宣布之前访问变量

同样,当您尝试访问变量之前,它在您的代码中被声明时,您可能会遇到以下错误:

1function sharkName() {
2    console.log(shark);
3
4    let shark = 'sammy';
5}

1[secondary_label Output]
2VM223:2 Uncaught ReferenceError: Cannot access 'shark' before initialization
3    at sharkName (<anonymous>:2:17)
4    at <anonymous>:1:1

在本示例中,在声明鲨鱼变量之前执行console.log(shark),从而导致错误。

<$>[注] **注:**由于let和const声明的运作方式,声明被提升,但在上一个示例中目前无法访问。在这种情况下,let和const变量进入被称为临时死区(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz)。

若要修复示例代码,请在执行console.log()命令之前声明鲨鱼变量:

1function sharkName() {
2    let shark = 'sammy';
3
4    console.log(shark);
5}

虽然它超出了本教程的范围,但您可以在我们(理解JavaScript中的变量,范围和引导)教程中了解更多关于范围,不同变量类型和提升的信息。

理解`合成错误`

当JavaScript解释器通过你的代码时,当它遇到不遵循语言规格的代码时,它可能会发出SyntaxError,如果发生这种情况,你的代码将停止执行,你将收到有关你的语法的消息。

缺失的密码封锁

例如,当你写一个函数并忘记一个注释, ),以关闭你的代码时,你会收到一个SyntaxError,包含一个非常具体的信息,说明你错过了什么:

1function sammy(animal) {
2    if(animal == 'shark'){
3        return `I'm cool`;
4    } else {
5        return `You're cool`;
6    }
7}
8
9sammy('shark';

1[secondary_label Output]
2Uncaught SyntaxError: missing ) after argument list

幸运的是,错误消息指定了代码中的缺失元素. 在本示例中,sammy函数调用错过了关闭的)序列:

1. . .
2
3sammy('shark');

如果在函数的末尾错过一个结尾弯曲的,或者在数组中错过一个,也会引发此错误,请确保正确关闭函数、数组和对象。

声明相同的变量名称

当您使用与函数参数相同的变量名称并在函数体内时,您也可能遇到此错误。

1function sammy(animal) {
2    let animal = 'shark';
3}

1[secondary_label Output]
2VM132:2 Uncaught SyntaxError: Identifier 'animal' has already been declared

若要修复错误,请确保在函数体内创建独特且特定的变量名称. 通过声明新的变量名称,例如,‘animalType’,您将消除函数参数与体内的‘让’变量之间的冲突:

1function sammy(animal) {
2    let animalType = 'shark';
3}

如果您打算在函数体内更改或使用参数,请不要使用具有相同变量名称的变量声明。

1function sammy(animal) {
2    animal = 'shark';
3}

当您在函数体内外使用变量时,请确保您单独命名函数体。

识别意想不到的代币

就像错过一个支架 ] 或一个弯曲的支架 },你有时可能需要一个小但关键的补充到你的代码。

1let sharkCount = 0;
2
3function sammy() {
4    sharkCount+;
5    console.log(sharkCount);
6}

1[secondary_label Output]
2Uncaught SyntaxError: Unexpected token ';'

此示例中的附加元素是函数体内的sharkCount之后的+加符号:

1. . .
2function sammy() {
3    sharkCount++;
4    console.log(sharkCount);
5}

当你遇到一个SyntaxError: 意想不到的代码,双重检查你的代码缺失或额外的操作员,如加符号(+)。

了解`类型错误`

「TypeError」发生时,函数或变量的值是意想不到的类型. 您可以通过浏览我们的理解 JavaScript 中的数据类型教程来了解不同的 JavaScript 数据类型。

在对象上使用 Array 方法

一个常见的错误是使用数组方法重复对象,例如,您不能使用 .map() 方法旋转对象,因为它是对数组特定的方法:

1const sharks = {
2    shark1: 'sammy',
3    shark2: 'shelly',
4    shark3: 'sheldon'
5}
6
7sharks.map((shark) => `Hello there ${shark}!`);

1[secondary_label Output]
2Uncaught TypeError: sharks.map is not a function
3    at <anonymous>:1:8

修复上一个例子的一个选项是使用对象数据类型运行的 for...in loop对象对象鲨鱼检索值:

1const sharks = {
2    shark1: 'sammy',
3    shark2: 'shelly',
4    shark3: 'sheldon'
5}
6
7for (let key in sharks) {
8    console.log(`Hello there ${sharks[key]}!`);
9}

或者,您可以将鲨鱼对象转换成一个数组以使用.map()方法:

1const sharks = ['sammy', 'shelly', 'sheldon'];
2
3sharks.map((shark) => `Hello there ${shark}!`);

当您处理不同的数组和对象时,很容易误导不同的方法. 双检查您的方法是否适合您正在使用的数据类型。

使用正确的破坏方法

同样,试图重复一个对象的数组破坏将投放一个TypeError:

1const shark = {
2    name: 'sammy',
3    age: 12,
4    cloudPlatform: 'DigitalOcean'
5}
6
7const [name, age, cloudPlatform] = sharks;

1[secondary_label Output]
2VM23:7 Uncaught TypeError: sharks is not iterable
3    at <anonymous>:7:26

解决此问题的一种方法是使用对象破坏来创建基于对象密钥的新变量:

1const shark = {
2    name: 'sammy',
3    age: 12,
4    cloudPlatform: 'DigitalOcean'
5}
6
7const {name, age, cloudPlatform} = shark;
8
9console.log(name);

1[secondary_label Output]
2sammy

根据您如何构建数据,无论是使用数组还是对象,请确保使用适当的方法来检索值。

结论

在本教程中,您了解了三种常见的JavaScript错误类型,其中一些相关的消息,以及在遇到常见问题时如何排除错误。

您可以了解如何使用 JavaScript 对象方法和 JavaScript 数组方法以更好地了解如何应用这些方法。

您还可以通过我们的 [如何使用 Google Chrome DevTools 和 Visual Studio Code 调试 JavaScript] 教程(https://andsky.com/tech/tutorials/how-to-debug-javascript-with-google-chrome-devtools-and-visual-studio-code)了解更多有关调试使用 Chrome Dev 工具的信息。