异常教程
javascript ||（一文讲透）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 中的逻辑或运算符，用于判断两个表达式是否满足“至少一个为真”的条件。其语法结构如下：
condition1 || condition2
当 condition1 的计算结果为“真值”时，整个表达式直接返回 condition1 的值；若 condition1 为“假值”，则继续计算 condition2 并返回其结果。
真值与假值的判断规则
JavaScript 中的真假值判断遵循“松散类型转换”规则，以下值会被视为假值（Falsy）：
false0（数值零）""（空字符串）nullundefinedNaN
其余值均为真值（Truthy）。例如：
console.log(0 || "默认值"); // 输出："默认值"（因为 0 是假值）
console.log(5 || "默认值"); // 输出：5（因为 5 是真值）
与生活场景的类比
想象一个早晨的场景：
规则：“必须吃早餐或午餐才能上学。”
- 如果早餐已吃过（真值），则直接满足条件，无需考虑午餐；
- 如果早餐未吃（假值），则需要检查午餐是否已吃。
这一逻辑与 || 的短路求值机制完全一致，即优先返回第一个“有效”的真值。
短路求值机制：核心特性与对比
短路求值的定义
|| 的短路求值特性指的是：当表达式中存在多个条件时，一旦遇到第一个真值，后续条件将不再执行。这一特性既提高了性能，也带来了代码设计上的灵活性。
示例 1：条件分支控制
function showUserMessage(user) {
const name = user.name || "Guest";
console.log(`欢迎 ${name}！`);
}
// 当 user.name 存在时，直接使用其值；否则使用 "Guest"
此处 || 等价于：
name = user.name ? user.name : "Guest";
示例 2：避免空值错误
const element = document.getElementById("myElement") || document.createElement("div");
// 若元素不存在，则创建新元素
与逻辑与运算符 && 的对比
&& 的短路行为与 || 相反：
&&：只有当左侧为真值时，才会计算右侧并返回右侧结果；若左侧为假值，则直接返回左侧结果。||：只有当左侧为假值时，才会计算右侧并返回右侧结果；若左侧为真值，则直接返回左侧结果。
| 运算符 | 左侧为真值时 | 左侧为假值时 |
|---|---|---|
&& | 返回右侧结果 | 返回左侧结果 |
|| | 返回左侧结果 | 返回右侧结果 |
实战应用：默认值设置与条件合并
场景 1：函数参数的默认值
在 ES6 之前，开发者常通过 || 实现参数的默认值赋值：
function calculateArea(width, height) {
width = width || 10;
height = height || 5;
return width * height;
}
console.log(calculateArea()); // 输出：50（默认值生效）
但需注意：若参数可能合法传入 0（如 calculateArea(0, 5)），则此方法会导致 0 被错误替换为默认值。此时应改用 ES6 的默认参数语法：
function calculateArea(width = 10, height = 5) {
return width * height;
}
场景 2：合并多个配置项
在处理对象属性或配置时，|| 可快速合并默认值与用户自定义值：
const config = {
theme: "dark",
fontSize: 14
};
const mergedConfig = {
theme: config.theme || "light",
fontSize: config.fontSize || 12
};
// 若 config.theme 不存在，则使用 "light"
高级技巧与潜在陷阱
技巧 1：返回第一个真值
|| 的返回值不仅是布尔值，而是直接返回第一个真值或最后一个假值。例如：
console.log(0 || "" || null || undefined || "最终结果"); // 输出："最终结果"
此特性常用于从多个可能的值中选择第一个有效值：
const value = getFromCache() || fetchFromAPI() || "默认值";
技巧 2：类型转换需谨慎
由于 || 依赖松散类型转换，需注意以下情况：
// 预期：设置默认值为 0，但实际可能出错
let count = inputValue || 0; // 若 inputValue 是空字符串，则 count = 0（符合预期）
// 但若 input 是 "0"（字符串）时，会被视为真值，导致 count = "0"
此时应显式判断类型：
let count = (inputValue === "" ? 0 : parseInt(inputValue)) || 0;
常见误区与解决方案
误区 1：与 || 混淆的 or 运算符
JavaScript 仅支持 || 作为逻辑或运算符，不存在 or 关键字。例如：
// 错误写法
if (a or b) { ... } // 报错：Unexpected identifier
// 正确写法
if (a || b) { ... }
误区 2：忽略运算符的返回值类型
const result = "apple" || 100; // result 的值是 "apple"（字符串），而非布尔值 true
因此，在需要布尔类型时，应显式转换：
const isAvailable = !!("apple" || 100); // 转换为布尔值 true
进阶案例分析
案例 1：动态路由参数处理
在前端路由中，|| 可用于处理可选参数：
function resolvePath(path) {
return path || "/default";
}
// 当 path 为 null 时，返回 "/default"
案例 2：异步数据的降级显示
在数据请求失败时，使用 || 提供备用数据：
async function fetchData() {
try {
const response = await fetch("/api/data");
return response.json();
} catch (error) {
return { fallback: "数据加载失败" };
}
}
const data = await fetchData() || { message: "默认信息" };
总结
|| 运算符是 JavaScript 开发中不可或缺的工具，其短路求值特性在简化代码、提升性能方面表现突出。通过本文的讲解，读者应能掌握以下核心要点：
- 理解真假值的判断规则，避免因类型转换引发的逻辑错误；
- 熟练运用短路求值特性处理默认值、条件合并等场景；
- 注意运算符的返回值类型，避免在布尔判断时的隐式转换问题；
- 结合实际案例，灵活设计简洁高效的代码逻辑。
掌握 javascript || 的深层原理与最佳实践，不仅能提升代码的可读性与健壮性，更能帮助开发者在复杂场景中快速定位并解决问题，成为 JavaScript 开发的得力助手。