深入理解 JavaScript 逻辑或 ||：用法、默认值与短路特性

在 JavaScript 中，||（逻辑或运算符）是一个高频使用却常被低估的操作符。它除了用于条件判断，还能在开发中提供默认值、规避错误并优化逻辑。文章将深入解析 || 的用法及关联知识。

一、逻辑或的基本用法

1. 什么是 || 运算符？

|| 属于 JavaScript 逻辑运算符，名为“逻辑或”。其核心机制是返回两个操作数中的“真值”：

若第一个操作数为真值，则直接返回该操作数。
若第一个操作数为假值，则返回第二个操作数。

2. 什么是真值和假值？

JavaScript 中，以下值被判定为假值（falsy）：

false
0
NaN
null
undefined
空字符串（''）

其余所有值均为真值（truthy），涵盖：

非零数字（例如 1, -1）
非空字符串（例如 'hello'）
对象（例如 {} 或 []）

3. 示例讲解

console.log(true || false); // 输出：true
console.log(false || 'hello'); // 输出：'hello'
console.log(0 || 42); // 输出：42
console.log('' || 'default'); // 输出：'default'
console.log(undefined || null || 'fallback'); // 输出：'fallback'

上述示例中，若首个值为假值，|| 运算符将返回后续值。

二、|| 在代码中的常见应用

1. 提供默认值

最典型的应用是为可能为假值的变量设定默认值。例如，当函数参数未传入时：

function greet(name) {
  name = name || 'Guest';
  console.log(`Hello, ${name}!`);
}
greet(); // 输出：Hello, Guest!
greet('Alice'); // 输出：Hello, Alice!

若 name 为 undefined 或空字符串，则默认值 'Guest' 生效。

2. 防止报错

访问可能不存在的对象属性时，利用 || 设定默认值可避免程序崩溃：

const user = { name: 'Alice' };
console.log(user.age || 'N/A'); // 输出：N/A

此处 user.age 为 undefined，|| 返回了 'N/A'。

3. 短路特性优化代码

|| 具备短路特性：若左侧操作数为真值，右侧表达式不再计算。此特性可用于代码优化：

const getData = () => {
  console.log('Fetching data...');
  return { key: 'value' };
};
const result = true || getData();
// 输出：没有输出“Fetching data...”
// 解释：因为左侧的 `true` 是真值，`getData()` 不会被调用。

三、|| 和其他逻辑运算符的对比

1. || 与 &&

console.log(false || 'hello'); // 输出：'hello'
console.log(false && 'hello'); // 输出：false
console.log('world' || 0); // 输出：'world'
console.log('world' && 0); // 输出：0

2. || 与三元运算符 ? :

有时可用 || 替代简单的三元运算符：

const value = input || 'default'; // 等价于：
const value2 = input ? input : 'default';

需注意，|| 逻辑不完全等同于三元运算符。当需区分假值（如 0 和 false）时，三元运算符更精准。

JavaScript 逻辑或 || 运算符详解：默认值、短路机制与对比

一、逻辑或的基本用法

二、|| 在代码中的常见应用

三、|| 和其他逻辑运算符的对比

实用工具推荐