深入理解JavaScript中&&和||运算符的短路特性与实战技巧

Noah

发布时间：2026-10-13| 7人浏览过

原创

JavaScript 中的逻辑运算符 &&（且）和 ||（或）不仅用于布尔判断，更核心的价值在于其“短路求值”机制能直接返回值。本文将详细拆解其处理非布尔值时的行为规律，并演示如何在实际开发中利用该特性简化默认值赋值、函数调用检查及条件逻辑。

||（逻辑或）运算符的短路行为

在纯布尔运算中，|| 只要有一个操作数为 true 即返回 true。但在 JavaScript 中，当操作数包含非布尔值时，它会遵循以下规则：

如果第一个操作数为真（Truthy），则直接返回第一个操作数的值，不再计算第二个操作数。
如果第一个操作数为假（Falsy），则返回第二个操作数的值，无论其真假。

通过以下代码片段可以更直观地观察其行为：

// 第一个值为 true (1)，返回 1
alert(1 || 2); // 输出: 1

// 第一个值为 false (0)，返回第二个值 2
alert(0 || 2); // 输出: 2

// 第一个值为字符串 'a' (True)，返回 'a'
alert('a' || 1); // 输出: a

// 第一个值为空字符串 '' (False)，返回 1
alert('' || 1); // 输出: 1

核心结论与应用场景：默认值赋值

基于上述规则，A || B 常被用作**获取默认值**。若 A 存在且不为 falsy，则使用 A；否则回退到 B。这与传统的 if-else 判断相比更为简洁。

// 等价写法对比
const defaultValue = "default";
let input = null;

// 方法一：常规逻辑
if (!input) {
  input = defaultValue;
}

// 方法二：利用 || 运算符（推荐，更简洁）
input = input || defaultValue;

console.log(input); // 输出: default

&&（逻辑与）运算符的短路行为

&& 运算符的逻辑如下：

如果第一个操作数为真，则继续计算并返回第二个操作数的值。
如果第一个操作数为假，则直接返回第一个操作数的值，不再计算第二个操作数。

测试代码示例：

// 第一个值为 'a' (True)，返回第二个值 1
alert('a' && 1); // 输出: 1

// 第一个值为 0 (False)，直接返回 0
alert(0 && 1); // 输出: 0

// 两个都为 True，返回第二个值
alert('a' && 'b'); // 输出: b

核心应用场景：条件执行与安全检查

A && B 常用于在满足条件时才执行后续操作，特别适用于防止对 null 或 undefined 对象的属性访问。

function handleCallback(callback) {
  // 只有当 callback 存在且为函数时，才执行调用
  callback && callback();
}

这种写法比 if (callback) { callback(); } 更加紧凑，且在现代 JS 开发中非常常见。

Falsy 值清单：判断基准

要准确运用以上技巧，必须明确哪些值在 JavaScript 中被视为 false。以下 7 个值均为 Falsy：

false
0（包括 -0 和 NaN）
''、""、` `（空字符串）
null
undefined

任何不在上述列表中的值（包括空数组 []、空对象 {}、字符串 '0' 等）均被视为 true。

进阶应用：简化复杂条件逻辑

在某些特定场景下，合理使用 && 和 || 可以替代冗长的 if-else 或 switch-case 结构，使代码更具表现力。

示例 1：映射等级显示

假设需要根据数值显示不同数量的箭头，使用嵌套逻辑可实现单行代码：

// 原始需求：5->1, 10->2, 12->3, 15->4, 其他->0
// 利用 || 的回退特性
var add_level = (add_step == 5 && 1) || 
                (add_step == 10 && 2) || 
                (add_step == 12 && 3) || 
                (add_step == 15 && 4) || 
                0;

更优解法：使用对象映射表配合 ||，可读性和扩展性更佳：

var levels = {'5':1, '10':2, '12':3, '15':4};
var add_level = levels[add_step] || 0;

示例 2：范围区间判断

当判断区间大于等于某个阈值时，按优先级从高到低排列：

// 需求：>12显示4个，>10显示3个，>5显示2个，>0显示1个，<=0显示0个
var add_level = 
    (add_step > 12 && 4) || 
    (add_step > 10 && 3) || 
    (add_step > 5 && 2) || 
    (add_step > 0 && 1) || 
    0;

这种写法利用了“一旦匹配成功，后续表达式因左操作数为真而返回右操作数（数字），再通过 || 被忽略（因为前面的结果已非 falsy）”的特性，实现了紧凑的条件路由。