短路求值：&&、|| 和 ?? 的本质区别与实战指南
大家好，欢迎来到今天的编程技术讲座。我是你们的讲师，今天我们要深入探讨一个看似简单却极其重要的概念——短路求值（Short-Circuit Evaluation）。在 JavaScript、TypeScript、Java、C++、Python 等多种语言中，我们都会遇到 &&、|| 和 ?? 这三种逻辑运算符。它们虽然都用于逻辑判断，但背后的机制和使用场景却有显著差异。
如果你经常写条件判断、默认值赋值或函数参数校验，那么理解这些运算符的区别将极大提升你的代码质量和可读性。本文将从原理出发，通过大量真实代码示例，帮你彻底搞懂这三者的区别，并告诉你何时该用哪个。
一、什么是短路求值？
短路求值是一种优化策略：当表达式中的某个操作数已经足以决定整个表达式的最终结果时，后续的操作数就不会被计算了。
举个例子：
true && console.log("不会执行");
false || console.log("会执行");- 第一行：因为第一个操作数是
true，所以&&不需要再看第二个操作数，直接返回true—— 短路了。 - 第二行：因为第一个操作数是
false，所以||必须继续检查第二个操作数，结果是console.log("会执行")被执行。
这就是短路的本质：“能确定结果就停”。
✅ 注意：短路不是语法糖，而是运行时行为！它影响性能、副作用（如函数调用）、甚至程序逻辑！
二、&& 和 || 的基本行为（以 JS 为例）
我们先回顾一下这两个运算符的基本语义：
| 表达式 | 结果 |
|---|---|
true && x |
返回 x（如果 x 是布尔值，则为 true；否则保留原值） |
false && x |
返回 false（不执行 x） |
true || x |
返回 true（不执行 x） |
false || x |
返回 x（如果 x 是布尔值，则为 x；否则保留原值） |
⚠️ 关键点：&& 和 || 返回的是实际值，不是布尔值！
示例 1：非布尔值的短路行为
console.log(0 && "hello"); // 输出: 0
console.log("" || "world"); // 输出: "world"
console.log(null || "fallback"); // 输出: "fallback"
console.log(true && undefined); // 输出: undefined你会发现：
0是 falsy，但它是有效值，所以&&返回它；" "是 truthy，但||直接返回它；- 所以这两个运算符其实是在做“选择”而不是单纯的“真假判断”。
这是很多初学者容易混淆的地方！
三、??（空值合并）的独特之处
?? 是 ES2020 引入的新运算符，专门用来处理“null 或 undefined”的情况。它的短路规则是：
如果左侧操作数是
null或undefined，则返回右侧操作数；否则返回左侧操作数。
换句话说，它只对 null 和 undefined 做短路，而忽略其他 falsy 值（如 0、""、false、NaN）。
示例 2：对比 || 和 ??
const value = 0;
const fallback = "default";
console.log(value || fallback); // 输出: "default" ❌ 错误！
console.log(value ?? fallback); // 输出: 0 ✅ 正确！
// 再试一个更复杂的例子：
const user = {
name: "",
age: 0,
email: null
};
console.log(user.name || "匿名用户"); // "匿名用户" ❌ 用户名为空但不应覆盖
console.log(user.name ?? "匿名用户"); // "" ✅ 保持原始空字符串
console.log(user.email ?? "[email protected]"); // "[email protected]" ✅ 正确📌 总结：
||是“任意 falsy 都触发 fallback”??是“只有 null/undefined 触发 fallback”
这种区别非常关键，在处理配置项、API 数据、表单字段等场景下尤为重要。
四、三者的核心区别对比表
| 特性 | && | || | ?? |
|——|——|——|——|
| 短路条件 | 左侧为 false | 左侧为 true | 左侧为 null 或 undefined |
| 是否短路 | 是 | 是 | 是 |
| 返回类型 | 返回左或右操作数（不一定是布尔） | 同上 | 同上 |
| 适用场景 | 条件执行、链式调用 | 默认值、备用逻辑 | 可选值、防错保护 |
| 常见陷阱 | 忽略非布尔值导致意外 | 把 0、"" 当作无效值 | 没有区分 0 和 null |
| 性能影响 | 无副作用时快 | 无副作用时快 | 无副作用时快 |
💡 重要提示：这三个运算符都可以用于链式调用，比如：
let result = obj?.property?.method?.(); // 可选链 + 短路
if (obj && obj.property && obj.property.method) {
result = obj.property.method();
}但记住：短路意味着某些代码可能根本不会执行！这既是优势也是风险。
五、实战案例解析（附完整代码）
案例 1：安全访问嵌套对象属性（推荐使用 ??）
假设你有一个 API 返回的数据结构可能是这样的：
{
"user": {
"profile": {
"avatarUrl": null,
"displayName": ""
}
}
}你想显示用户的头像 URL，如果没有就用默认图片。
错误做法（用 ||）：
const avatarUrl = data.user?.profile?.avatarUrl || "default.jpg";
console.log(avatarUrl); // 输出: "default.jpg" ❌ 错误！即使有空字符串也不该替换正确做法（用 ??）：
const avatarUrl = data.user?.profile?.avatarUrl ?? "default.jpg";
console.log(avatarUrl); // 输出: "" ✅ 保留原始空字符串✅ 使用 ?? 更符合业务需求：只有当数据确实缺失时才提供默认值。
案例 2：函数参数默认值（优先考虑 ??）
function greet(name, greeting = "Hello") {
return `${greeting}, ${name || "stranger"}!`;
}
greet("Alice", ""); // "Hello, Alice!"
greet("", "Hi"); // "Hi, stranger!" ❌ 不合理
greet(undefined, "Hi"); // "Hi, stranger!"
// 改进版：使用 ?? 处理参数
function greetBetter(name, greeting = "Hello") {
return `${greeting}, ${name ?? "stranger"}!`;
}
greetBetter("Alice", ""); // "Hello, Alice!"
greetBetter("", "Hi"); // "Hi, !" ❗️注意：这里还是有问题！
greetBetter(undefined, "Hi"); // "Hi, stranger!"🔍 发现了吗？name ?? "stranger" 仍然不能解决 "" 的问题，因为 "" 不是 null 或 undefined。
👉 解决方案：结合 || 和 ?? 使用：
function greetFinal(name, greeting = "Hello") {
const displayName = name ?? (name === "" ? "" : "stranger");
return `${greeting}, ${displayName}!`;
}或者更优雅地封装成工具函数：
function orDefault(val, fallback) {
return val != null ? val : fallback; // 注意：!= null 包括 undefined 和 null
}
function greetOptimized(name, greeting = "Hello") {
return `${greeting}, ${orDefault(name, "stranger")}!`;
}这个例子说明：没有绝对完美的解决方案，要根据具体需求选择合适的运算符组合。
案例 3：链式调用中的短路行为（高级技巧）
有时候我们需要确保一系列函数按顺序执行，但一旦失败就停止。
function fetchUserData(userId) {
if (!userId) return null;
const user = db.getUserById(userId);
if (!user) return null;
const profile = user.getProfile();
if (!profile) return null;
return profile;
}可以用短路简化为一行：
const profile = userId && db.getUserById(userId) && db.getUserById(userId).getProfile();但这不够清晰且难以调试。更好的方式是使用 ?? 来明确每一步是否成功：
const profile = userId
? db.getUserById(userId)?.getProfile()
: null;
// 或者更严格的版本：
const profile = userId
? db.getUserById(userId)
?.getProfile()
?? { error: "Profile not found" }
: null;这样既利用了短路，又避免了因中间步骤出错导致整个流程崩溃的问题。
六、常见误区与避坑指南
| 误区 | 说明 | 正确做法 |
|---|---|---|
❌ “|| 就是用来设默认值” |
它会把 0、""、false 当作无效值 |
用 ?? 替代，除非你知道这些值确实是无效的 |
❌ “&& 和 || 总是返回布尔值” |
实际上返回的是参与运算的实际值 | 记住它们是“值选择器”，不是布尔运算符 |
| ❌ “短路一定更快” | 对于常量表达式来说可能没差别，但对于函数调用，确实能节省开销 | 在复杂逻辑中，短路可以减少不必要的计算 |
❌ “?? 可以替代所有 || 场景” |
不行！比如你想让 0 触发 fallback，只能用 || |
明确需求：你要的是“空值”还是“假值”？ |
七、总结：如何选择正确的运算符？
| 使用场景 | 推荐运算符 | 理由 |
|---|---|---|
设置默认值，允许 0、""、false 存在 |
?? |
更精准控制“真正缺失”的情况 |
设置默认值，认为 0、""、false 也是无效 |
|| |
简单粗暴，适合快速开发 |
条件执行（如：if (condition) doSomething()） |
&& |
清晰表达“仅当条件成立才执行” |
| 函数链式调用，防止空指针异常 | ?? + 可选链 ?. |
最安全的方式，现代 JS 推荐写法 |
| 判断变量是否存在且非空 | != null（配合 ??） |
比 typeof x !== 'undefined' 更简洁可靠 |
八、延伸思考：不同语言的表现一致吗？
答案是：大多数主流语言行为类似，但细节略有不同。
| 语言 | && / || | ??（空值合并） |
|——|————-|——————|
| JavaScript | 返回实际值 | ES2020 新增，支持 |
| TypeScript | 同 JS | 同 JS |
| Python | and / or 返回最后一个真值 | 无内置 ??，可用 or + is not None |
| Java | && / || 返回布尔值 | 无内置 ??，需用三元表达式或 Objects.requireNonNullElse() |
| C# | && / || 返回布尔值 | ?? 存在，行为同 JS |
| Go | 无 ||/&& 自动短路，必须显式判断 | 无 ??，用 if v == nil 判断 |
👉 所以无论你在哪个平台工作，掌握短路求值的思想都是通用技能。
九、结语
今天我们系统梳理了 &&、|| 和 ?? 的本质区别，不仅讲清了它们的短路机制，还通过多个真实项目案例展示了如何在实际编码中做出正确选择。
记住一句话：
“短路不是魔法，而是责任。”
当你写出一行看似简单的 a || b 时，请问自己：我是否真的希望 a 是 0 或 "" 时也跳过？如果是，那就用 ??；如果不是，那就用 ||。
希望今天的分享让你对短路求值有了更深的理解。下次写代码前，不妨停下来想一想：“我现在应该用哪一个？” —— 这就是专业程序员和普通程序员的区别。
谢谢大家！如果你有任何疑问，欢迎留言讨论！