JavaScript 中的 && 运算符：逻辑与和短路求值详解14

在 JavaScript 中，`&&` 运算符表示逻辑与 (logical AND)。它是一个二元运算符，需要两个操作数。只有当两个操作数都为真值 (truthy) 时，整个表达式的结果才为真值；否则，结果为假值 (falsy)。理解 `&&` 运算符的关键在于掌握其操作逻辑以及它特有的“短路求值”特性。

真值和假值

在 JavaScript 中，许多值都被认为是真值或假值。虽然 `true` 和 `false` 是最直接的真值和假值，但其他值也会在布尔上下文中被转换为布尔值。以下是一些常见的假值：
false
0 (数字零)
-0 (负零)
0n (BigInt 零)
"" (空字符串)
null
undefined
NaN (非数字)

所有其他值都被认为是真值，包括非零数字、非空字符串、数组、对象等等。

逻辑与运算

`&&` 运算符对两个操作数进行逻辑与运算。它的真值表如下：

操作数 1
操作数 2
结果

真值
真值
真值

真值
假值
假值

假值
真值
假值

假值
假值
假值

例如：
let a = true;
let b = false;
let c = 10;
let d = "";
(a && b); // false
(a && c); // 10 (c is truthy)
(b && c); // false
(c && d); // "" (d is falsy)
(c && a); // true

请注意，当第一个操作数为假值时，JavaScript 引擎会立即返回该假值，而不会评估第二个操作数。这就是“短路求值”。

短路求值

短路求值是 `&&` 运算符最重要的特性之一。它可以提高代码效率并允许编写更简洁的代码。如果 `&&` 运算符的左侧操作数为假值，则右侧操作数将不会被评估。这在处理可能导致错误或性能问题的表达式时非常有用。

例如：
let obj = { name: "John" };
let greeting = obj && ; // 如果obj是null或undefined，则不会访问，避免错误
(greeting); // "John"
let anotherObj = null;
let anotherGreeting = anotherObj && ; // 因为anotherObj是null，不会访问，避免错误
(anotherGreeting); // null
function expensiveOperation(){
("Expensive operation executed!");
return true;
}
let result = false && expensiveOperation(); // expensiveOperation不会被执行
(result); // false
result = true && expensiveOperation(); // expensiveOperation会被执行
(result); // true (and the log message from expensiveOperation)

在上面的例子中，如果 `obj` 为 `null` 或 `undefined`，则表达式 `obj && ` 将不会尝试访问 ``，从而避免了潜在的 `TypeError` 错误。短路求值使得代码更加健壮和高效。

&& 运算符的应用场景

除了基本的逻辑判断，`&&` 运算符还有许多其他的应用场景：
条件赋值： `value = condition && newValue;` 只有当 `condition` 为真时，才将 `newValue` 赋值给 `value`。
函数链式调用：可以用在函数链式调用中，如果前一个函数返回假值，则后续函数不会执行。
默认值： `value = value || defaultValue;` 如果 `value` 为假值，则使用 `defaultValue`。
条件渲染：在 React 等框架中，经常使用 `&&` 运算符进行条件渲染，例如： `{condition && }`。

总结

JavaScript 中的 `&&` 运算符是一个强大的工具，它不仅提供了逻辑与的功能，而且还具有重要的短路求值特性。理解 `&&` 运算符的逻辑和短路求值机制，可以编写更高效、更健壮、更简洁的 JavaScript 代码。熟练掌握其用法，对于提高 JavaScript 编程水平至关重要。

2025-05-17

上一篇：JavaScript中$(#): 选择器与jQuery库的妙用

下一篇：JavaScript 中的立即执行函数表达式 (IIFE) 深入解析