异常教程

js ||（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：探索 JavaScript 中的 || 运算符

在 JavaScript 开发中，逻辑运算符 ||（或运算符）是一个高频使用却常被低估的工具。它不仅是条件判断的核心组件，还能在代码优化、默认值处理等场景中发挥重要作用。对于编程初学者，理解 || 的行为是掌握条件逻辑的关键；而对中级开发者，深入其短路特性则能显著提升代码的简洁性与性能。本文将从基础用法到高级技巧，结合生动案例，系统讲解 || 运算符的多维应用。

一、基础概念：|| 是什么，如何工作？

1.1 逻辑或的基本定义

|| 是 JavaScript 的逻辑或运算符，用于组合两个布尔表达式。当 至少有一个表达式为真（truthy）时，整个表达式的结果为真；只有当 两个表达式均为假（falsy） 时，结果才为假。例如：

console.log(true || false); // true  
console.log(0 || "");       // false

1.2 短路行为：关键特性

|| 的核心特性是 短路执行。这意味着：

  • 若左侧表达式为真（truthy），右侧表达式将被跳过，直接返回左侧的值。
  • 若左侧为假（falsy），才会继续计算右侧表达式，并返回右侧的结果。

这一特性使 || 不仅能判断真假，还能实现“取第一个有效值”的功能。例如：

const username = "Alice" || "Guest";  
console.log(username); // "Alice"（左侧有效，右侧未执行）

二、|| 的进阶用法：从条件判断到默认值赋值

2.1 默认值的优雅处理

在需要提供默认值的场景中，|| 能大幅简化代码。例如：

// 原始写法  
let input = "";  
if (input === "") {  
  input = "默认值";  
}  

// 使用 || 简化  
let input = "" || "默认值"; // input 变为 "默认值"

此技巧在函数参数处理中尤为常见：

function greeting(name = "Guest") {  
  return `Hello, ${name}!`;  
}  

// 等效于使用 || 的写法（不支持默认参数时）  
function greeting(name) {  
  name = name || "Guest";  
  return `Hello, ${name}!`;  
}

2.2 条件分支的优化

结合短路特性，|| 可以替代部分 if 语句，使代码更简洁。例如：

// 原始写法  
if (condition) {  
  doSomething();  
} else {  
  doSomethingElse();  
}  

// 简化写法（假设 doSomething() 返回 true）  
condition && doSomething() || doSomethingElse();

不过需注意，此写法依赖于 doSomething() 的返回值类型，可能不如 if-else 直观，建议在代码可读性优先的场景中谨慎使用。

三、|| 与 && 的对比：短路逻辑的差异

3.1 短路方向的差异

&&（逻辑与）的短路方向与 || 相反：

  • &&：若左侧为假，直接返回左侧值，不执行右侧。
  • ||：若左侧为真，直接返回左侧值，不执行右侧。

对比示例：

// || 的短路  
console.log(1 || 2); // 1（左侧真，右侧未执行）  

// && 的短路  
console.log(1 && 2); // 2（左侧真，执行右侧并返回结果）

3.2 联合使用：构建复杂逻辑

通过组合 || 和 &&，可实现多条件判断。例如：

function checkAccess(user) {  
  return (user.isAdmin && user.isActive) || user.isGuest;  
}

四、|| 的陷阱与注意事项

4.1 隐式类型转换的风险

JavaScript 的弱类型特性可能导致意外结果。例如：

console.log(0 || "有效值"); // "有效值"（0 是 falsy）  
console.log("" || null);    // null（两者均为 falsy）

在处理数字、空字符串等值时，需明确其 truthy/falsy 特性。

4.2 与赋值操作符的混淆

避免在条件表达式中误用 = 而非 == 或 ===：

// 错误示例：将条件判断写成赋值  
if (value = 5 || 10) { ... } // 实际赋值 value = 5，然后判断是否真

五、实战案例：|| 在真实场景中的应用

5.1 模块化配置的默认值

在合并配置对象时，|| 可快速提供默认值：

function createSettings(userSettings) {  
  const defaultTheme = "light";  
  const theme = userSettings.theme || defaultTheme;  
  return { theme };  
}

5.2 API 请求的条件参数

控制 API 请求参数时，|| 可避免发送空值：

fetchData({  
  page: currentPage || 1,  
  limit: pageSize || 10  
});

六、性能优化：短路逻辑的优势

由于 || 的短路特性，它能避免不必要的计算，提升性能。例如：

// 低效写法  
if (computeExpensiveValue() || checkAnotherCondition()) { ... }  

// 高效写法（假设 computeExpensiveValue() 为真时，右侧不执行）  
if (computeExpensiveValue() || checkAnotherCondition()) { ... }

当 computeExpensiveValue() 返回真值时，右侧的 checkAnotherCondition() 将被跳过，节省计算资源。

结论：掌握 || 的多维价值

|| 运算符在 JavaScript 中远不止“逻辑或”这单一用途。通过理解其短路行为，开发者可以将其应用于默认值赋值、条件判断优化、性能提升等场景。无论是初学者夯实基础，还是中级开发者追求代码简洁性，深入掌握 || 的用法都能显著提升编码效率与代码质量。记住，工具的价值在于灵活运用——善用 ||，让代码更优雅！

扩展思考：运算符的哲学

|| 的短路逻辑体现了计算机科学中的“惰性求值”思想：仅在必要时执行计算。这种思想不仅适用于运算符，也是函数式编程、数据库查询优化等领域的重要原则。在后续学习中，可进一步探索 ??（空值合并运算符）与 || 的区别，以及惰性求值在更复杂场景中的应用。

最新发布

查看更多文章