JavaScript错误处理核心是try...catch语句,用于捕获并响应异常:try块放可能出错代码,catch块处理错误并接收错误对象;常用于外部数据解析、不确定属性访问、第三方API调用及本地存储操作;可通过err.name精准判断错误类型;finally块无论是否出错均执行,适用于清理工作。

JavaScript 错误处理的核心是 try...catch 语句,它能让你在代码出错时不直接崩溃,而是有控制地响应异常。
try...catch 基本结构怎么写?
语法很直接:把可能出错的代码放进 try 块,把出错后的处理逻辑放进 catch 块。如果 try 中抛出错误,执行会立即跳到 catch,并把错误对象传给参数(通常叫 error 或 err)。
示例:
try {
JSON.parse('{ "name": "Alice", }'); // 多了个逗号,语法错误
} catch (err) {
console.log('解析失败:', err.message); // 输出:Unexpected token } in JSON at position 25
}
什么时候该用 try...catch?
不是所有地方都要包一层 try...catch。重点用在以下场景:
立即学习“Java免费学习笔记(深入)”;
-
外部数据解析:比如
JSON.parse()、XMLHttpRequest.responseXML、用户输入的日期字符串转Date -
访问可能不存在的对象属性:尤其当数据结构不确定时(如 API 返回字段缺失),可配合可选链
?.使用,但深层嵌套仍建议加try -
调用第三方库或浏览器 API:比如
navigator.geolocation.getCurrentPosition()可能拒绝授权,触发 error 回调;但若封装成 Promise,就可用catch捕获 -
文件读取或 localStorage 操作:比如
localStorage.setItem()在存储空间满时会抛出QuotaExceededError
如何更精准地处理不同类型的错误?
原生 catch 不区分错误类型,但你可以通过检查 err.name 或 err.constructor.name 来判断:
try {
nonExistentFunction();
} catch (err) {
if (err.name === 'ReferenceError') {
console.log('变量或函数未定义');
} else if (err.name === 'TypeError') {
console.log('类型不匹配,比如调用了非函数值');
} else {
console.log('其他错误:', err.message);
}
}
注意:err instanceof TypeError 在跨 iframe 或模块边界时可能失效(因构造函数引用不同),所以优先用 err.name 更稳妥。
finally 有什么用?
finally 块无论是否出错都会执行,适合做清理工作:
- 关闭模态框、隐藏加载动画
- 重置表单状态或清空临时变量
- 释放资源(如手动终止定时器、取消未完成的 fetch 请求 —— 需配合 AbortController)
示例:
let loading = true;
try {
await fetch('/api/data');
} catch (err) {
console.error('请求失败', err);
} finally {
loading = false; // 确保加载状态总能关闭
}
不复杂但容易忽略:别在 catch 里只写 console.log(err) 就完事,至少要记录关键信息,或给用户友好提示,否则问题很难被发现和定位。











