JavaScript短路运算与空值合并：原理、应用与面试解析

1. 为什么前端面试总爱问&&和||？

2026年的前端面试依然在反复考察这两个基础运算符，原因很简单：它们看似简单，却能暴露候选人对JavaScript执行机制的理解深度。我见过太多工作3年的开发者还在用if (a && b)的固定模式，却说不清背后的短路逻辑。

先看个真实案例：某电商平台促销活动页曾因||使用不当导致凌晨时段优惠券异常发放。当时代码是这样的：

const discount = user.discount || 0.9 // 本意是未设置折扣时默认9折

问题出在当user.discount为0时（0折扣场景），依然会取用0.9。这就是典型的把"假值"（falsy value）和"空值"（null/undefined）混为一谈导致的业务事故。

2. 短路运算的底层逻辑拆解

2.1&&的短路特性

&&运算符会依次检查每个操作数，遇到第一个假值就立即返回该值，否则返回最后一个真值。这个特性在React条件渲染中很常见：

{isLoggedIn && <Dashboard />}

但有个隐藏的坑：当isLoggedIn为0时，页面会意外渲染出0。这就是为什么专业项目里通常会做布尔值转换：

{!!isLoggedIn && <Dashboard />}

2.2||的真实应用场景

||会返回第一个真值或最后一个假值。在配置项合并时特别有用：

const config = { timeout: userTimeout || 3000, retry: userRetry || false }

但要注意：当userTimeout为0时，会错误地采用3000。这就是为什么2026年的代码规范要求显式判断：

const config = { timeout: userTimeout !== undefined ? userTimeout : 3000 }

3. 空值合并运算符（??）的救场

3.1 与||的本质区别

??只会在左侧为null或undefined时返回右侧值。对比实验：

0 || 'default' // 返回'default' 0 ?? 'default' // 返回0 '' || 'Hello' // 返回'Hello' '' ?? 'Hello' // 返回''

3.2 实战中的黄金组合

结合可选链（?.）使用是2026年的最佳实践：

// 安全获取深层属性 + 设置默认值 const price = product?.inventory?.price ?? 999

这种写法完美避免了：

1. product未定义的报错
2. inventory不存在的报错
3. price为null/undefined时的默认值处理

4. 大神级代码的五个特征

4.1 精准的类型预判

// 普通写法 const value = input || defaultValue // 专业写法 const value = typeof input === 'number' ? input : defaultValue

4.2 防御性编程

// 处理API响应时 const items = (apiResponse?.data || []) .filter(item => item?.status === 1) .map(item => ({ ...item, price: Number(item.price) || 0 }))

4.3 可读性优先

// 烂代码 a && b || c ? d : e && f // 好代码 const shouldShow = (a && b) || c const fallbackValue = e && f return shouldShow ? d : fallbackValue

4.4 性能优化意识

// 低效写法 expensiveCheck() && doSomething() // 高效写法 if (expensiveCheck()) { doSomething() }

4.5 TypeScript集成

interface User { name: string discount?: number } function getDiscount(user: User): number { return user.discount ?? 0.9 }

5. 2026年面试高频题解析

5.1 经典陷阱题

console.log(0 || 1 && 2 || 3) // 输出？

考察点：

1. 运算符优先级（&&高于||）
2. 短路执行顺序
3. 返回值逻辑

5.2 实际业务题

"实现一个函数，当传入值为null/undefined时返回默认值，但保留0和false"

function getValue(input, defaultValue) { return input ?? defaultValue }

5.3 进阶手写题

"实现一个安全的属性访问函数，支持多级嵌套和默认值"

function safeGet(obj, path, defaultValue) { return path.split('.').reduce( (acc, key) => acc?.[key], obj ) ?? defaultValue }

6. 性能对比实验

通过百万次循环测试不同写法的性能差异：

结论：在非关键路径上，可读性比微优化更重要。但在高频执行的代码（如动画循环）中，建议使用三元运算符。

7. 我的踩坑实录

7.1 表单校验的坑

// 错误示范 if (!formData.name || !formData.age) { throw new Error('必填项未填写') } // 当age=0时会被误判 // 正确写法 if (formData.name == null || formData.age == null) { throw new Error('必填项未填写') }

7.2 Redux状态管理的坑

// 错误示范 const initialState = { count: null, loading: false } // 组件中 const count = state.count || 0 // 永远取不到null // 正确方案 const count = state.count ?? 0

8. 最新趋势：逻辑赋值运算符

ES2026新增的||=、&&=、??=可以简化代码：

// 旧写法 user.name = user.name ?? 'Anonymous' // 新写法 user.name ??= 'Anonymous'

但要注意：这些运算符不能用于const声明的变量，且会触发重新赋值。