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

目录

前言

一、报错类型

[1. SyntaxError(语法错误)](#1. SyntaxError(语法错误))

[2. ReferenceError(引用错误)](#2. ReferenceError(引用错误))

[3. TypeError(类型错误)](#3. TypeError(类型错误))

[4. 其他错误类型](#4. 其他错误类型)

[二、异常处理 try catch](#二、异常处理 try catch)

[1. try catch定义](#1. try catch定义)

[2. try-catch块的工作原理](#2. try-catch块的工作原理)

[3. try-catch基本语法](#3. try-catch基本语法)

[4. try-catch最佳实践](#4. try-catch最佳实践)


前言

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

一、报错类型

1. SyntaxError(语法错误)

  • 问题描述

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

  • 错误处理

为了避免SyntaxError,我们可以采取以下措施:

  1. 使用代码检查工具和集成开发环境(IDE),这些工具可以即时检测代码语法错误。
  2. 可以利用插件帮助检查问题,比如 ESLint、Prettier。
  3. 仔细检查代码,特别是括号、分号等常见语法符号的使用是否正确。
  4. 代码示例:
javascript 复制代码
// 错误示例,缺少括号导致语法错误
function multiply(a, b {
  return a * b;
}

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

2. ReferenceError(引用错误)

  • 问题描述

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

  • 错误处理

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

  1. 确保变量和函数被正确地声明。
  2. 在使用变量之前,先检查其是否存在。
  3. 代码示例
javascript 复制代码
// 错误示例,引用了一个未声明的变量
console.log(age);

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

3. TypeError(类型错误)

  • 问题描述

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

  • 错误处理

为了避免TypeError,我们可以采取以下措施:

  1. 在进行操作之前,进行类型检查。
  2. 使用条件语句进行类型判断,以防止非法操作。
  3. 代码示例
TypeScript 复制代码
// 错误示例,对非数字类型进行加法操作
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还可能在递归调用中导致调用栈溢出时抛出。

javascript 复制代码
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字符串。

javascript 复制代码
decodeURIComponent('%'); // URIError: URI malformed
decodeURIComponent('%E0%A4%A'); // URIError: URI malformed
  • 错误处理方法

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

javascript 复制代码
// 错误示例,使用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基本语法

javascript 复制代码
<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块中进行错误处理,同时保持主要业务逻辑部分的清晰和简洁。

相关推荐
Ajiang282473530429 分钟前
对于C++中stack和queue的认识以及priority_queue的模拟实现
开发语言·c++
ggdpzhk30 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
幽兰的天空34 分钟前
Python 中的模式匹配:深入了解 match 语句
开发语言·python
小曲曲1 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
Theodore_10224 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js