JavaScript短路运算符&&和||通过跳过冗余计算提升代码可读性:&&用于条件执行(如isLoaded && fetchData()),||用于默认值(如config.timeout || 5000),但需注意假值陷阱;二者还可组合实现扁平化条件赋值。

JavaScript 运算符配合短路特性,核心是利用 && 和 || 不必计算全部操作数的机制,跳过冗余逻辑,让代码更紧凑、可读性更高。关键不是“省字符”,而是让判断意图一目了然。
用 && 替代单分支 if 判断
当只想在条件成立时执行某个动作(无 else 分支),&& 能直接表达“满足才做”的语义。
- 传统写法:
if (isLoaded) fetchData(); - 短路写法:
isLoaded && fetchData(); - 原理:如果
isLoaded是假值(false、null、undefined、0、''、NaN),整个表达式立刻返回该假值,fetchData()根本不执行;只有为真值时,才会继续求值并调用函数。
用 || 设置默认值
当变量可能为空或未定义,需要 fallback 值时,|| 提供简洁的兜底方案。
- 传统写法:
const timeout = config.timeout !== undefined ? config.timeout : 5000; - 短路写法:
const timeout = config.timeout || 5000; - 注意:仅适用于“假值即无效”的场景。若
config.timeout可能为0或''且这些是合法值,就不能直接用||,得改用空值合并运算符??。
用 && 安全访问嵌套属性
避免因中间对象为 null 或 undefined 导致报错 Cannot read property 'x' of undefined。
- 传统写法:
const name = user && user.profile && user.profile.name; - 现代替代(推荐):
const name = user?.profile?.name;(可选链),但 && 在旧环境或简单判断中依然高效可靠。 - 原理:只要左侧任意一环为假值,就立即返回它,不再向后取值,天然防错。
组合使用实现条件赋值
把 && 和 || 搭配,可以完成带默认值的条件筛选。
- 例如获取用户昵称:优先用
displayName,没有则用username,都空就用"匿名":const nick = (user.displayName || user.username) || "匿名"; - 等价于:
user.displayName ? user.displayName : (user.username ? user.username : "匿名"),但更扁平、无嵌套。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











