一、错误类型：三大“杀手”与应对策略
1. 语法错误（SyntaxError）
- 特征：代码解析阶段直接报错，如括号缺失、关键字拼写错误。
- 示例：
console.log("Hello World'; // 缺少闭合引号
- 解决方案：
- 使用ESLint等工具静态检测。
- 避免依赖分号自动插入，显式书写分号。
2. 运行时错误（Runtime Error）
- 典型子类：
ReferenceError：访问未声明变量（如console.log(undeclaredVar)）。TypeError：对错误类型执行操作（如null.f()）。RangeError：数值越界（如new Array(-1)）。
- 调试技巧：
- 利用Chrome DevTools的断点调试和调用栈追踪。
3. 逻辑错误（Logical Error）
- 隐蔽性：代码无报错但结果异常，如误用乘法替代加法。
- 防御方案：
- 编写单元测试覆盖边界条件。
- 使用
console.assert()进行运行时断言。
二、核心处理机制：try/catch的“三板斧”
1. 基础结构
try {
let num = JSON.parse('{invalid json}');
console.log(num);
} catch (error) {
console.error("捕获错误：", error.message);
} finally {
cleanupResources(); // 无论成败都会执行
}
2. 自定义错误：精准定位问题
抛出语义化错误：
class NetworkError extends Error {
constructor(url) {
super(`请求 ${url} 失败`);
this.code = "NETWORK_FAILURE";
}
}
throw new NetworkError("https://api.example.com");
优势：通过error.code分类处理不同错误。
3. 性能陷阱
避免在循环内滥用try/catch：V8引擎对try块优化较弱，高频调用可能拖慢性能。
// 错误示范：
for (let i = 0; i < 1e6; i++) {
try { /* 可能失败的操作 */ }
catch {}
}
// 正确做法：将try/catch外移至循环外层
三、异步错误处理：Promise与async/await的“暗礁”
1. Promise未捕获错误
- 典型场景：
fetchData().then(res => { ... }); // 缺少.catch()
-
- 后果：触发
Uncaught (in promise) Error，导致全局崩溃。
- 后果：触发
- 解决方案：
- 链式处理：
.then().catch()。 - 全局兜底：
- 链式处理：
window.addEventListener('unhandledrejection', e => {
reportToServer(e.reason); // 上报至监控系统
});
2. async/await的优雅处理
- 结合try/catch：
async function loadUserData() {
try {
const data = await fetch('/api/user');
if (!data.ok) throw new Error('状态码异常');
} catch (error) {
showToast(`加载失败：${error.message}`);
}
}
- 优势：同步化错误处理逻辑，避免回调地狱。
到此这篇关于JavaScript错误处理避坑指南的文章就介绍到这了,更多相关JavaScript错误处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
来源链接：https://www.jb51.net/javascript/3384918vu.htm
© 版权声明
本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。
THE END
暂无评论内容