【JavaScript】JavaScript中 || 和 && 操作符的返回值

在 JavaScript 中，逻辑运算符 ||（逻辑或）和 &&（逻辑与）的返回值并不一定是布尔值（true/false），而是根据操作数的值返回其中一个操作数本身。这是 JavaScript 与其他编程语言的重要区别。

---

1. ||（逻辑或）的返回值

机制：

• 从左到右依次检查操作数。
• 如果第一个操作数为 真值（Truthy），则直接返回第一个操作数。
• 如果第一个操作数为 假值（Falsy），则返回第二个操作数。
• 不会强制转换为布尔值，直接返回原始值。

示例：

console.log(3 || 0);       // 3（第一个是真值）
console.log(0 || "hello"); // "hello"（第一个是假值，返回第二个）
console.log(null || NaN);  // NaN（两个都是假值，返回第二个）
console.log("" || false);  // false（两个都是假值，返回第二个）

常见用途：

• 设置默认值：

  const name = userInput || "Guest";
  

• 避免访问未定义的属性：

  const value = obj.prop || defaultValue;
  

---

2. &&（逻辑与）的返回值

机制：

• 从左到右依次检查操作数。
• 如果第一个操作数为 假值，则直接返回第一个操作数。
• 如果第一个操作数为 真值，则返回第二个操作数。
• 不会强制转换为布尔值，直接返回原始值。

示例：

console.log(3 && 0);       // 0（第一个是真值，返回第二个）
console.log(0 && "hello"); // 0（第一个是假值）
console.log(null && NaN);  // null（第一个是假值）
console.log("A" && "B");   // "B"（两个都是真值，返回第二个）

常见用途：

• 条件执行函数：

  user.isAdmin && showAdminPanel();
  

• 避免访问深层属性：

  const value = obj && obj.prop && obj.prop.value;
  

---

3. 假值（Falsy）列表

JavaScript 中假值包括：

• false
• 0
• ""（空字符串）
• null
• undefined
• NaN

其他所有值均为真值（包括 "0"、[]、{}、函数等）。

---

4. 对比其他语言**

• 在 C、Java 等语言中，|| 和 && 返回布尔值。
• 在 JavaScript 中，返回的是操作数本身，这使得它们可以用于更灵活的编程模式。

---

5. 实际应用场景**

|| 的默认值模式：

function greet(name) {
  name = name || "Anonymous";
  console.log(`Hello, ${name}!`);
}
greet();          // Hello, Anonymous!
greet("Alice");   // Hello, Alice!

&& 的安全访问模式：

const user = { profile: { age: 25 } };
const age = user && user.profile && user.profile.age; // 25

---

6. 注意事项**

• 优先级问题：&& 的优先级高于 ||，建议用括号明确逻辑：

  console.log(0 || 1 && 2);   // 2（等价于 0 || (1 && 2)）
  

• 避免滥用：过度使用可能降低代码可读性。

• ES6 替代方案：

  • 默认值可以用 ??（空值合并运算符）更精确处理 null/undefined：

    const value = input ?? "default";
    

  • 安全属性访问可用可选链（Optional Chaining）：

    const age = user?.profile?.age;
    

---

总结

• ||：寻找第一个真值，常用于默认值。
• &&：寻找第一个假值，常用于条件执行或安全访问。
• 理解它们的返回值机制，可以写出更简洁、高效的代码。