在 JavaScript 中，逻辑运算符 ||（逻辑或）和 &&（逻辑与）的行为与许多其他语言有所不同。它们并不是只返回布尔值，而是返回实际的操作数值本身。
✅ 一、基本原理：真假值判断 + 返回原始值
JavaScript 的 || 和 && 运算符会：
- 对第一个操作数进行真假值判断（truthy/falsy）
- 如果不是布尔值，先进行隐式类型转换；
- 根据逻辑结果决定返回哪个操作数的“原始值”
📌 注意：它们返回的是原始值，而不是布尔值！
✅ 二、||（逻辑或）运算符
🔍 行为描述：
value1 || value2
- 先检查
value1是否是 真值（truthy）- 如果是，则直接返回
value1 - 如果不是（即 falsy），则返回
value2
- 如果是，则直接返回
🧠 口诀记忆：
“找真值，找到就返回”
✅ 示例：
0 || "hello" // "hello"
"" || "default" // "default"
null || "fallback" // "fallback"
undefined || "none" // "none"
false || 100 // 100
true || "ignored" // true
📌 常见用途：
- 给变量设置默认值：
function greet(name) {
name = name || "Guest";
console.log("Hello, " + name);
}
✅ 三、&&（逻辑与）运算符
🔍 行为描述：
value1 && value2
- 先检查
value1是否是 真值（truthy）- 如果是，则返回
value2 - 如果不是（falsy），则返回
value1
- 如果是，则返回
🧠 口诀记忆：
“找假值，找到就返回”
✅ 示例：
"hello" && "world" // "world"
true && 42 // 42
0 && "ignored" // 0
"" && "also ignored" // ""
null && "nothing" // null
undefined && "nope" // undefined
false && "not this" // false
📌 常见用途：
- 条件执行（防止空引用错误）：
const user = { name: "Alice" };
console.log(user && user.name); // "Alice"
const guest = null;
console.log(guest && guest.name); // null
✅ 四、对比总结表
| 表达式 | 行为 | 返回值说明 |
|---|---|---|
| A 或 B | 如果 A 是真值，返回 A；否则返回 B | 返回第一个真值，或最后的值 |
| A && B | 如果 A 是假值，返回 A；否则返回 B | 返回第一个假值，或最后的值 |
✅ 五、一句话总结
||和&&都不会改变操作数的实际类型，它们只是基于真假值判断来选择返回其中一个操作数的原始值。
||返回第一个真值，如果没有则返回最后一个；&&返回第一个假值，如果没有则返回最后一个；
💡 进阶建议
- 使用 TypeScript 可以更安全地处理逻辑表达式；
- 在 Vue / React 中使用
&&控制组件渲染； - 使用
??（Nullish Coalescing）替代部分||场景，避免0、""被误判； - 使用 ESLint 规则规范逻辑表达式的使用方式；
