🧭 JavaScript / React 判空最佳实践速查表
✅ 适用于现代 JavaScript / TypeScript / React 项目
🎯 目标：避免空值异常，保持逻辑清晰、类型安全
🧩 一、基础判空
| 场景 | 推荐写法 | 说明 |
|---|
| 判断变量是否存在 | if (a != null) | ✅ 同时排除 null 和 undefined |
| 判断变量已定义 | if (a !== undefined) | 仅排除 undefined |
| 判断变量为空 | if (a == null) | ✅ 匹配 null 或 undefined |
| 快速判断“真值” | if (a) | 会把 0、''、false 当作空 ❌ 谨慎使用 |
🧠 二、字符串判空
| 场景 | 推荐写法 | 说明 |
|---|
| 非空字符串 | if (typeof str === 'string' && str.trim() !== '') | 过滤空格与空字符串 |
| 字符串为空 | if (!str ｜｜ str.trim() === '') | 检查空字符串或全空格 |
📦 三、数组判空
| 场景 | 推荐写法 | 说明 |
|---|
| 数组非空 | if (Array.isArray(arr) && arr.length > 0) | 检查类型与长度 |
| 数组为空 | if (!arr ｜｜ arr.length === 0) | 简洁安全 |
🧱 四、对象判空
| 场景 | 推荐写法 | 说明 |
|---|
| 对象非空 | if (obj && Object.keys(obj).length > 0) | 检查对象是否有属性 |
| 对象为空 | if (!obj ｜｜ Object.keys(obj).length === 0) | 常用写法 |
🔗 五、可选链（Optional Chaining）
安全访问深层属性，避免 Cannot read properties of undefined
if (user?.profile?.age) {console.log(user.profile.age);
}
