JavaScript常见报错及错误处理方法

目录

前言

一、报错类型

1. SyntaxError（语法错误）

2. ReferenceError（引用错误）

3. TypeError（类型错误）

4. 其他错误类型

二、异常处理 try catch

1. try catch定义

2. try-catch块的工作原理

3. try-catch基本语法

4. try-catch最佳实践

---

前言

在日常的前端开发中，都会遇到各种错误，所以错误处理是非常重要的一环。正确地处理这些错误不仅可以帮助我们更好地调试程序，还可以提高代码的质量和可靠性。本文将从不同的角度讲解JavaScript常见报错导致程序终止的情况，并提供相应的错误处理方法和代码示例。

一、报错类型

1. SyntaxError（语法错误）

• 问题描述

SyntaxError是JavaScript中最常见的错误类型之一。当我们编写的代码违反了JavaScript语法规则时，就会出现SyntaxError。

• 错误处理

为了避免SyntaxError，我们可以采取以下措施：

1. 使用代码检查工具和集成开发环境（IDE），这些工具可以即时检测代码语法错误。
2. 可以利用插件帮助检查问题，比如 ESLint、Prettier。
3. 仔细检查代码，特别是括号、分号等常见语法符号的使用是否正确。
4. 代码示例：

// 错误示例，缺少括号导致语法错误
function multiply(a, b {
  return a * b;
}

// 正确示例，添加了缺失的括号
function multiply(a, b) {
  return a * b;
}

2. ReferenceError（引用错误）

• 问题描述

ReferenceError通常发生在我们尝试访问不存在的变量或函数时。这可能是由于拼写错误、作用域问题或者未声明的变量引起的。

• 错误处理

我们可以通过以下方式来处理ReferenceError：

1. 确保变量和函数被正确地声明。
2. 在使用变量之前，先检查其是否存在。
3. 代码示例

// 错误示例，引用了一个未声明的变量
console.log(age);

// 正确示例，先检查变量是否存在，再进行操作
if (typeof age !== 'undefined') {
  console.log(age);
}

3. TypeError（类型错误）

• 问题描述

TypeError通常发生在我们尝试对一个不支持的数据类型执行操作时，或者调用一个非函数类型的对象。

• 错误处理

为了避免TypeError，我们可以采取以下措施：

1. 在进行操作之前，进行类型检查。
2. 使用条件语句进行类型判断，以防止非法操作。
3. 代码示例

// 错误示例，对非数字类型进行加法操作
var a = "5";
var b = 2;
console.log(a + b);   // 输出："52"

// 正确示例，先进行类型检查，再进行操作
var a = "5";
var b = 2;
if (typeof a === 'number' && typeof b === 'number') {
  console.log(a + b);   // 输出：7
}

4. 其他错误类型

• 其他常见错误类型介绍

除了SyntaxError、ReferenceError和TypeError之外，还有许多其他常见的错误类型，例如RangeError、URIError等。这些错误通常与特定的操作和场景相关。

①RangeError（范围错误）

RangeError通常在数值超出有效范围时抛出，例如当使用Math对象中的函数时，传入的参数超出了其有效范围。这可能包括超出数组的有效索引范围、超出函数接受的参数范围等。RangeError还可能在递归调用中导致调用栈溢出时抛出。

const arr = [1, 2, 3];
console.log(arr[5]); // RangeError: Invalid array length

function recursiveFn() {
  recursiveFn();
}
recursiveFn(); // RangeError: Maximum call stack size exceeded

②URIError（URI错误）

URIError在处理全局URI函数（如decodeURIComponent()和encodeURIComponent()）时抛出。它表示传递给这些函数的参数无效，因为它们违反了URI（Uniform Resource Identifier）的规则。常见的情况是传递了非法字符或不完整的URI字符串。

decodeURIComponent('%'); // URIError: URI malformed
decodeURIComponent('%E0%A4%A'); // URIError: URI malformed

• 错误处理方法

针对不同类型的错误，我们可以采取不同的错误处理方法，比如使用try-catch块来捕获错误并进行相应的处理，或者输出错误消息以便于调试和修复问题。

// 错误示例，使用try-catch块捕获错误
try {
  // 可能会出现错误的代码
} catch (error) {
  // 错误处理逻辑
  console.log(error.message);
}

二、异常处理 try catch

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行。

1. try catch定义

try-catch是JavaScript中一种常用的错误处理机制，它允许我们在代码中捕获并处理异常。

2. try-catch块的工作原理

1. try块：try块用于包裹可能会抛出异常的代码片段。当代码在try块中执行时，如果发生了异常，就会立即跳转到catch块进行异常处理。
2. catch块：catch块用于捕获和处理异常。当try块中的代码抛出异常时，catch块会接收异常对象，并执行相应的错误处理逻辑。
3. finally块（可选）：finally块是可选的，它用于定义无论是否发生异常都需要执行的代码。不论try块中是否发生异常，finally块中的代码都会被执行。

3. try-catch基本语法

<script>
   function foo() {
      try {
        // 查找 DOM 节点
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (error) {
        // try 代码段中执行有错误时，会执行 catch 代码段
        // 查看错误信息
        console.log(error.message)
        // 终止代码继续执行
        return
      }
      finally {
          alert('执行')
      }
      console.log('如果出现错误，我的语句不会执行')
    }
    foo()
</script>

总结：

1. try...catch 用于捕获错误信息

2. 将预估可能发生错误的代码写在 try 代码段中

3. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息

4. try-catch最佳实践

1. 具体捕获异常：尽可能地具体捕获异常类型，而不是简单地捕获通用的Error类型。这样可以更精确地处理异常，并提供更准确的错误信息。

2. 及时处理异常：尽早地捕获和处理异常，避免异常扩散到程序其他部分。这有助于调试和修复问题，并提高代码的健壮性和稳定性。

3. 合理使用finally块：finally块中的代码在任何情况下都会被执行，常用于清理操作（如释放资源）或确保代码的完成性。但需要注意的是，finally块中的代码不会改变异常的传播。

4. 错误处理与业务逻辑分离：将错误处理和业务逻辑分离是一种良好的实践。可以在catch块中进行错误处理，同时保持主要业务逻辑部分的清晰和简洁。