JavaScript错误处理终极避坑指南：从崩溃到优雅，你的代码还能抢救一下！

一、错误类型：三大"杀手"与应对策略

1. 语法错误（SyntaxError）

特征：代码解析阶段直接报错，如括号缺失、关键字拼写错误。

示例：

javascript 复制代码

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. 基础结构

javascript 复制代码

try {  
  let num = JSON.parse('{invalid json}'); 
  console.log(num);
} catch (error) {  
  console.error("捕获错误：", error.message);  
} finally {  
  cleanupResources();  // 无论成败都会执行  
}

2. 自定义错误：精准定位问题

• 抛出语义化错误：

javascript 复制代码

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块优化较弱，高频调用可能拖慢性能。

javascript 复制代码

// 错误示范：  
for (let i = 0; i < 1e6; i++) {  
  try { /* 可能失败的操作 */ }  
  catch {}  
}  
// 正确做法：将try/catch外移至循环外层

三、异步错误处理：Promise与async/await的"暗礁"

1. Promise未捕获错误

典型场景 ：
javascript 复制代码
```
fetchData().then(res => { ... }); // 缺少.catch()  
```
- 后果：触发Uncaught (in promise) Error，导致全局崩溃。

解决方案 ：

链式处理 ：.then().catch()。

全局兜底 ：

javascript 复制代码

window.addEventListener('unhandledrejection', e => {  
  reportToServer(e.reason);  // 上报至监控系统  
});

2. async/await的优雅处理

结合try/catch ：

javascript 复制代码

async function loadUserData() {  
  try {  
    const data = await fetch('/api/user');  
    if (!data.ok) throw new Error('状态码异常');  
  } catch (error) {  
    showToast(`加载失败：${error.message}`);  
  }  
}

优势：同步化错误处理逻辑，避免回调地狱。