第二招：空值合并 当值为 null/

const title = data?.title ?? '未命名';

第三招：默认参数和默认对象 函数期望一个对象时Ke以给它一个默认空对象，让内部逻辑不必再判断。

function greet {
  return `嗨，${user.name ?? '陌生人'}！`;
}
greet; // "嗨，陌生人！"

第四招：先判断，再Zuo事儿 有时候需要geng细粒度的逻辑，你就得先检查。

if ) {
  // Zuo点事情
}

第五招：AOT & 静态检查工具 Ru果你用 TypeScript，那编译阶段就Neng捕捉到大部分潜在空指针。ESLint 的规则也Neng帮忙提醒你哪儿可Neng为空。

AHA，异步真的是个大坑。拿 fetch 来演示一下：

async function loadProfile {
  const res = await fetch;
  const data = await res.json;
  console.log; // 安全
}
loadProfile;

Ru果你没等到数据返回，就直接访问属性，就会报错：

let profile;
console.log; // ❌ TypeError
// 对策：先判断 profile 是否存在
console.log;

有时候页面刷新、SPA 路由切换时某些元素被移除，却还在脚本里挂着引用。搞不好你根本就不知道它Yi经不存在啦！解决办法：

使用事件委托，把事件监听绑在父节点上；

每次操作前Zuo一次判空；

Ru果使用框架，尽量让生命周期管理自己处理。

可选链—— 用来安全访问深层属性；

空值合并—— 给 null/undefined 一个温柔的默认值；

默认参数—— 防止函数调用缺失对象；

先检查再操作—— 特殊场景下需要多层判断；

静态类型检查—— TS、Flow Neng提前预警；

合理使用 async/await —— 确保数据Yi准备好后才访问；

事件委托 & 生命周期管理 —— 把 DOM 管理交给框架或框架自身。 .

说到底，就是把 “变量可Neng为空” 当成一条硬性规定，在代码里时时刻刻保持警惕。别让那无形的空指针给你的项目添堵。

哈哈，咱们不就是这么点小技巧嘛，一边调试，一边想想下一次怎么避免同样的问题。希望今天这篇随笔Neng帮到你们，让前端开发geng稳、geng爽！

懂不懂？我说完了Ru果还有什么不明白的，Ke以直接打我，我随时补充～

Cheers!