JavaScript逻辑运算符：&&、||与!的原理与实战

逻辑与 && 的处理规则

在 JavaScript 中，&& 运算符从左到右评估表达式，但其结果并非简单的 true 或 false，而是遵循以下返回逻辑：

1. 检查第一个值：如果第一个操作数是 Falsy（如 null、undefined、0、false、NaN 或空字符串），则直接返回该 Falsy 值本身，不再计算后续表达式。
2. 返回第二个值：如果第一个操作数是 Truthy（所有非上述 Falsy 的值均为 Truthy），则返回 第二个操作数的值（无论其是 Truthy 还是 Falsy）。

这种机制常用于安全地访问对象属性或执行依赖操作。

第1步：使用 && 进行属性安全访问

当需要访问嵌套对象属性且不确定父对象是否存在时，利用 && 可以避免报错。

var o = {x:1, y:2};
console.log(o && o.y); // 输出: 2

var n = null;
console.log(n && n.y); // 输出: null (不会抛出 TypeError)

在上述示例中，由于 n 为 null，表达式直接返回 null；而在对象 o 存在的情况下，表达式返回了 o.y 的值。

逻辑或 || 的处理规则

|| 运算符的逻辑走向与 && 相反，它主要用于在多个选项中寻找一个有效的值：

1. 检查第一个值：如果第一个操作数是 Truthy，则直接返回该 Truthy 值本身，停止计算。
2. 返回第二个值：如果第一个操作数是 Falsy，则继续计算并返回 第二个操作数的值。

这一特性使得 || 成为处理默认值和提供回退方案的便捷工具。

第2步：利用 || 获取第一个有效值

可以通过连续使用 || 来从一系列变量中提取第一个非假值。

var a = null;
var b = 42;
var v = a || b || 100;
console.log(v); // 输出: 42
// 解释: a(null)为假跳过 -> b(42)为真，返回42，忽略后续值

第3步：设置函数参数的默认值

在 ES6 默认参数语法普及前，这是 JS 中最常用的参数校验写法之一。它确保如果传入值为假，则使用替代对象。

function test(p) {
  // 如果 p 未传或为假值，则赋值为空对象
  p = p || {};
  console.log(p);
}

test();       // 输出: {}
test({});     // 输出: {}
test(null);   // 输出: {}

注意：虽然此写法常见，但若用户有意传入数字 0 或空字符串 "" 作为有效参数，此方法会错误地将其替换为空对象。现代开发中建议使用 ES6 的空值合并运算符 ?? 或默认参数 = 来处理此类边界情况。

逻辑非 ! 的行为

与具有短路特性的 && 和 || 不同，! 运算符的行为与其他强类型语言一致，始终返回布尔值。

• 如果操作数是 Truthy，结果为 false。
• 如果操作数是 Falsy，结果为 true。

它通常用于条件反转或确保某变量严格为布尔类型。

console.log(!true);  // false
console.log(!0);     // true
console.log(!'');    // true

总结

熟练掌握 && 和 || 的“返回操作数”特性，是提升 JavaScript 代码可读性和效率的关键。它们不仅是逻辑判断符，更是强大的表达式简写工具。而 ! 则是纯粹的布尔取反器。在实际开发中，合理运用这三者可以大幅减少冗余的条件判断代码。 以上就是 JavaScript 逻辑判断符 &&、|| 与 ! 的详细内容，更多关于 JavaScript 进阶技巧的资料请关注本站其它相关文章！