JS 如何用短路运算简化条件判断？

Question

JS 如何用短路运算简化条件判断？

仓乃文 · Accepted Answer

&& 和 || 不仅是逻辑运算符，还能利用短路求值特性简化代码，替代简单的 if 判断和默认值设置。

&& 短路（条件为真才执行）：
```javascript
// 替代简单 if
user.isLoggedIn && renderDashboard();

// 替代 if...else 赋值
const label = isVip && "VIP 用户";
```

|| 短路（条件为假才取右侧值）：
```javascript
// 设置默认值
const name = user.name || "匿名";

// 函数参数默认值（ES6 之前常用）
function greet(name) {
  name = name || "Guest";
}
```

?? 短路（更精确的默认值）：
```javascript
// 只在 null/undefined 时取默认值，0 和 false 不受影响
const timeout = config.timeout ?? 3000;
const count = config.count ?? 0;
```

逻辑赋值运算符（ES2021）：
```javascript
obj.name ||= "默认名";   // 等价于 obj.name || (obj.name = "默认名")
obj.count &&= 0;         // 等价于 obj.count && (obj.count = 0)
obj.retries ??= 3;       // 等价于 obj.retries ?? (obj.retries = 3)
```

补充说明：
- 短路运算适合简单的单行条件，复杂逻辑仍应使用 if...else
- || 设默认值会误判 0、false、空字符串，推荐用 ??
- && 常用于 React 条件渲染：{isLoading && <Spinner />}
- 逻辑赋值运算符 ??= 在初始化配置时非常实用