怎么利用JS中的&&和||简化条件判断与默认值赋值

底层求值机制：为什么它们能代替条件分支与默认值

理解逻辑运算符简化技巧的前提，是彻底摒弃“逻辑运算结果只能是布尔值”的刻板印象。在 ECMAScript 规范中，逻辑与和逻辑或的操作数可以是任意数据类型，计算过程遵循两项基本法则：

1. 真值（Truthy）与假值（Falsy）判定：在需要布尔判断的环境下，JavaScript 会自动将操作数隐式转换为布尔值。在整个语言规范中，假值仅有八个：false、0、-0、0n（BigInt 零）、""（空字符串）、null、undefined 和 NaN。除此八类之外的所有值（包括空对象 {}、空数组 []、字符串 "0"）均为真值。
2. 短路与原值返回规则：
   • 对于 expr1 && expr2：先求值 expr1。若其为假值，则整个表达式的结果已注定为假，引擎立即短路并直接返回 expr1 的值，expr2 完全不会被执行；若 expr1 为真值，则继续求值并返回 expr2 的值。
   • 对于 expr1 || expr2：先求值 expr1。若其为真值，则整个表达式的结果已注定为真，引擎立即短路并直接返回 expr1 的值，expr2 完全不会被执行；若 expr1 为假值，则继续求值并返回 expr2 的值。

正是由于“一旦结果确定就停止执行后续表达式”且“返回的是具体的操作数而非布尔值”，才使得 && 具备了“条件成立才放行”的守卫能力，而 || 具备了“前方失效才回退”的兜底能力。

利用 && 简化条件判断与函数执行

在日常业务开发中，我们经常遇到“当某个前置条件成立时，才执行特定操作或访问属性”的需求。使用 && 可以大幅削减样板代码。

1. 替代单分支 if 语句（条件函数调用）

当条件满足时需要触发一个函数，且无需处理 else 分支时，直接使用 && 能够将多行结构压缩为一行直观的声明：

// 传统 if 结构写法 (4行代码)
if (isValid) {
  submitForm();
}

// 利用 && 简化后的写法 (单行紧凑)
isValid && submitForm();

执行原理：如果 isValid 计算结果为假值（如 false、null），&& 表达式在左侧立即短路退出，右侧的 submitForm() 函数根本不会被调用；只有当 isValid 为真值时，右侧的函数调用才会真正执行。

2. 级联前置检查与多层属性安全访问

在深层嵌套对象中，直接读取下层属性很容易触发臭名昭著的 TypeError: Cannot read properties of undefined。在现代可选链运算符普及之前，&& 是最为通用的多层防护写法：

// 传统嵌套检查写法
let city = "未知城市";
if (user && user.address && user.address.city) {
  city = user.address.city;
}

// 利用 && 链式守卫
const safeCity = user && user.address && user.address.city;

如果 user 是 null，表达式会在第一个节点立即停止并返回 null，有效保护了后续属性不会抛出空指针异常。

3. 前端框架模板与 JSX 中的条件渲染

在 React 等现代前端框架中，&& 被广泛用于组件的条件渲染：

// 当有未读通知时展示红点徽章
function NotificationBar({ count, isReady }) {
  return (
    <div className="header">
      {isReady && <span>系统已就绪</span>}
      {count > 0 && <Badge value={count} />}
    </div>
  );
}

利用 || 简化变量兜底与默认值赋值

在处理函数参数、用户输入、配置合并或环境变量时，经常需要“如果有有效值就用该值，否则回退到预设默认值”。|| 凭借其“遇真即停，遇假向后寻访”的特性，成为最经典的默认值赋值方案。

1. 配置项与函数参数兜底

在没有 ES6 默认参数或需要兼容对象属性缺失时，|| 能够简洁地提供保底：

function createHttpClient(config) {
  // 如果未传入 config，则使用空对象兜底
  const cfg = config || {};

  // 指定超时时间，未提供时默认 5000 毫秒
  const timeout = cfg.timeout || 5000;

  // 请求头未提供时默认空对象
  const headers = cfg.headers || {};

  return { timeout, headers };
}

2. 表单空文本与展示名称回退

从界面输入框取值或展示用户信息时，如果用户未填写任何内容（获取到空字符串），通常需要展示“匿名访客”：

const rawInput = document.getElementById("username").value.trim();
// 当用户输入空白或未输入时，rawInput 为 "" (假值)，自动取右侧兜底名称
const displayName = rawInput || "匿名访客";

3. 级联降级链（Cascading Fallback Chain）

当存在多个备用来源且具备优先级时，多个 || 可以串联成简洁的降级链条：

// 优先级：页面自定义参数 -> 全局配置 -> 环境变量 -> 硬编码默认服务地址
const apiBase = customApiUrl 
  || window.APP_CONFIG?.apiUrl 
  || process.env.API_ENDPOINT 
  || "https://api.default-domain.com";

执行引擎从左至右逐个评估，一旦命中第一个真值就直接返回，后续所有来源都不会被访问，具备极高的执行效率。

警惕“假值陷阱”：|| 与 && 的边界限制与排查

虽然 || 和 && 极其便利，但在以下关键场景中盲目使用，会导致极其隐蔽的逻辑缺陷。

1. || 的假值误判陷阱：0、空文本与 false 的意外覆盖

|| 依据的是 JavaScript 的假值规则，而不仅是 null 或 undefined。这意味着当有效业务值本身恰好是 0、"" 或 false 时，|| 会错误地将其当成“缺失”，从而强行使用默认值覆盖有效数据！

现代解决方案：空值合并运算符（??）
为了解决 || 的这一缺陷，ECMAScript 2020 引入了空值合并运算符 ??。与 || 不同，?? 仅在左操作数为 null 或 undefined 时才会回退到右侧默认值。对于 0、""、false、NaN 等合法假值，均会安全保留：

// 安全的默认值赋值方案
const safeVolume = userVolume ?? 80; // 当 userVolume = 0 时，结果精确为 0
const safeDebug = options.debug ?? true; // 当 options.debug = false 时，结果精确为 false

2. 运算符优先级陷阱：&& 优先于 ||

在 JavaScript 中，&& 的运算符优先级高于 ||（类似于乘法优先于加法）。在混合使用多个运算符时，若未显式加括号，执行顺序往往与自然语言直觉相反：

// 预期意图：如果是管理员，或者（具有编辑权限并且文章未锁定）时允许编辑
// 错误书写：
const canEdit = isAdmin || hasPermission && !isLocked;

// 实际等价解析为：
const canEdit = isAdmin || (hasPermission && !isLocked);

// 强烈建议：只要混合使用 && 与 ||，必须使用圆括号强制指定结合顺序
const canEditSafe = (isAdmin || hasPermission) && !isLocked;

3. 意外的副作用执行

短路特性意味着右侧的代码只有在左侧未能决出胜负时才会执行。如果右侧函数包含修改全局状态、发起异步请求等副作用，必须清楚了解短路可能导致该副作用被静默跳过，避免引发难以排查的时序问题。

综合选型策略与编码指南

在现代前端工程开发中，应根据不同的场景意图选择最契合的运算符：