10. try/catch 异常捕获

try...catch 就是出错误不让整个程序崩，出错了执行 catch 里的代码。

核心结构：
① try { 可能出错的代码 }
② catch(e) { 出错了怎么办 }
③ finally { 不管出不出错都执行 }

坑：catch 能捕获错误但不能修复、e.message 拿错误信息、异步代码 try 不住。

10.1 互动演示（三种异常捕获）

10.2 知识点讲解

① 哪些地方会"抛异常"？（三个典型场景）

// 场景 1：JSON 格式不对
// 记住：JSON 里键必须老老实实加双引号
// 键 name 没加引号 → 浏览器直接报错
JSON.parse('{name: "张三"}');

// 场景 2：往柜子里塞太多，超过约 5MB
// → 浏览器喊：柜子满了！
localStorage.setItem("big", "x".repeat(6 * 1024 * 1024));

// 场景 3：浏览器把本地存储关了（隐私模式或设置里禁了）
// → 浏览器喊：不许存！
localStorage.setItem("a", "b");

JSON.parse 解析后端返回的坏数据，是最常见的崩溃原因——接口一抽风，页面就白屏，说的就是没加 try/catch。

② try/catch 语法：逐行讲

// 把"可能会崩"的代码都塞进 try 这块里
try {
  // 随便造个数组
  let arr = [10, 20, 30];

  // 打包存进去
  localStorage.setItem("list", JSON.stringify(arr));
} catch (err) {
  // 上面任何一行崩了，立刻跳到这里，err 就是那个错误
  // err.message 是浏览器给的人话描述
  // 打印出来看看咋回事
  console.log("存储失败：", err.message);
  // 提醒一下用户
  alert("浏览器存储功能异常！");
}

// 接住了就没事，页面接着跑，不会白屏

规则就一句：try 里放"可能会崩"的代码，catch 里放"崩了怎么办"。没出错时 catch 不执行。

③ 更实用的防御写法：解析坏了给默认值

// 先放空着
let user = null;

// 从柜子里读之前存的用户数据，拆包还原
try {
  user = JSON.parse(localStorage.getItem("user"));
} catch (err) {
  // 万一数据坏了拆不开，就塞个默认用户顶上，别让页面崩
  user = { name: "默认用户" };
}

// 后面放心用 user.name，再坏也有个兜底，不会报错

"兜底默认值"是生产环境的标准写法：宁可给个假数据，也别让用户看到白屏。

本页重点