短路求值是 JavaScript 中 && 和 || 的天然行为,用于条件执行、防御性访问和默认值设置:&& 在左侧 falsy 时跳过右侧,|| 在左侧 falsy 时执行右侧,组合使用可提升代码健壮性。

短路求值在 JavaScript 中不是靠特殊语法实现的,而是逻辑运算符 && 和 || 的天然行为。它让代码在满足条件时“跳过”后续执行,从而安全地调用函数或访问嵌套属性,避免报错。
用 && 实现条件函数调用
当左侧表达式为 falsy(如 false、0、null、undefined、""、NaN)时,&& 不会执行右侧函数;只有左侧为 truthy 时,才真正调用右侧函数。
-
user.loggedIn && fetchUserData():仅当用户已登录才拉取数据 -
config.debug && console.log('API 请求:', url):只在调试模式下打印日志,生产环境不执行console.log -
isValid && saveToDB(record):验证通过才写入数据库,避免无效操作
用 && 做防御性属性访问
逐层检查对象是否存在,任一环节为 falsy 就停止,防止 Cannot read property 'xxx' of undefined 错误。
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
-
user && user.profile && user.profile.avatar:安全读取头像 URL -
response && response.data && response.data.items[0]:安全取响应首条数据 - 可进一步配合可选链(ES2020):
user?.profile?.avatar,但&&兼容性更好
用 || 设置默认行为或兜底逻辑
|| 在左侧为 falsy 时才会执行右侧,常用于提供备用函数或 fallback 流程。
-
onClick || (() => console.warn('未绑定点击处理')):无回调时输出提示,不报错 -
apiCall() || fallbackHandler():主接口失败(返回 falsy)时自动降级 - 注意:
0、false、""都会触发右侧,如需保留这些值,改用空值合并操作符??
组合使用提升健壮性
把多个短路逻辑串起来,能写出简洁又抗错的流程控制。
-
user && user.role === 'admin' && renderAdminPanel():双重条件满足才渲染管理界面 -
data && data.length > 0 ? processData(data) : loadDefaultData() || showEmptyState():结合三元与短路,覆盖多种边界情况 - 避免混合
&&和||在同一表达式中(如a && b || c),优先级易出错,建议加括号或拆成步骤


















