面试题：JavaScript 中 || 和 && 操作符的返回值是什么？

在 JavaScript 中，||（逻辑或）和 &&（逻辑与）操作符的返回值并不总是布尔值。它们会返回实际参与比较的操作数之一，而不是简单的 true 或 false。

这是由 JavaScript 的短路求值（Short-Circuit Evaluation）和真值/假值判断机制决定的。

---

一、||（逻辑或）操作符

返回值规则：

返回第一个“真值”操作数；如果所有操作数都是“假值”，则返回最后一个操作数。

工作原理：

1. 从左到右依次计算每个操作数。
2. 将每个操作数转换为布尔值进行判断。
3. 一旦遇到一个真值（truthy），立即返回该操作数的原始值，不再计算后续操作数（短路）。
4. 如果所有操作数都是假值（falsy），则返回最后一个操作数的值。

示例：

"hello" || "world"     // "hello" ← 第一个就是真值
0 || "default"         // "default" ← 0 是假值，"default" 是真值
"" || []               // [] ← 空字符串是假值，空数组是真值
null || undefined      // undefined ← 都是假值，返回最后一个
false || 0 || "" || "hi" // "hi" ← 前三个是假值，"hi" 是真值

经典用途：设置默认值

function greet(name) {
  name = name || "Guest"; // 如果 name 为假值，则使用 "Guest"
  console.log("Hello, " + name);
}

⚠️ 注意：如果 name 是 0、""、false 等假值，也会被替换。更安全的做法是使用 ??（空值合并）操作符。

---

二、&&（逻辑与）操作符

返回值规则：

返回第一个“假值”操作数；如果所有操作数都是“真值”，则返回最后一个操作数。

工作原理：

1. 从左到右依次计算每个操作数。
2. 将每个操作数转换为布尔值进行判断。
3. 一旦遇到一个假值（falsy），立即返回该操作数的原始值，不再计算后续操作数（短路）。
4. 如果所有操作数都是真值（truthy），则返回最后一个操作数的值。

示例：

"hello" && "world"     // "world" ← 两个都是真值，返回最后一个
"hi" && 0 && "end"     // 0 ← 遇到 0（假值），返回 0
true && [] && "yes"    // "yes" ← 所有都是真值，返回最后一个
"" && "no"             // "" ← 第一个就是假值，返回 ""

经典用途：条件执行

user && user.login(); 
// 如果 user 存在（真值），则调用 user.login()
// 如果 user 为 null/undefined（假值），则不执行，避免报错

// React 中常见
{ isLoggedIn && <Dashboard /> }
// 如果 isLoggedIn 为真，渲染 Dashboard 组件

---

三、真值（truthy）与假值（falsy）回顾

JavaScript 中有 6 个假值：

• false
• 0
• -0
• 0n (BigInt)
• "" (空字符串)
• null
• undefined
• NaN

所有其他值都是真值，包括：

• "0" (字符串)
• "false" (字符串)
• [] (空数组)
• {} (空对象)
• function(){}

---

四、总结

操作符	返回值规则	常见用途
||	返回第一个真值，或最后一个假值	设置默认值
&&	返回第一个假值，或最后一个真值	条件执行、避免错误

关键点：|| 和 && 返回的是操作数的原始值，而不是布尔值。理解这一点对于正确使用默认值、条件渲染和短路逻辑至关重要。