前端小白别慌：搞懂短路求值，代码少写一半还更稳！

微信群语音转文字现场，口水话保真，代码保熟，看完你要是还不懂短路求值，我把键盘吃了。

先骂一句：你写的 if-else 是裹脚布吗？

上周 review 新来的小伙的代码，我差点把奶茶喷屏幕上。一个弹窗开关逻辑，他写了 47 行 if-else，一层一层嵌套，跟俄罗斯套娃似的。
我当场甩给他一行：

visible&&(document.body.style.overflow='hidden');

他愣了五秒：“哥，这啥黑魔法？”
黑个屁，这就是短路求值，前端界的“懒人神器”。搞懂了它，你代码能瘦成一道闪电，还自带“容错 buff”。今天咱们就把这玩意儿掰开揉碎，用嘴炮+代码的方式灌进你脑子里。

短路求值到底是个啥？说人话！

先别管书上的定义，咱打个比方：
你约女神看电影，她说“如果我今天不加班并且你买票了，我就去”。
只要她加班，后半句“你买票”压根不问，直接告吹——这就是**&& 的短路**：前面假，后面懒得算。

JavaScript 同理：

false&&console.log('这句不会执行');

同理，女神说“如果我加班或者你买了票，我就去”。
一旦她加班，前半句真，后半句“你买票”也懒得算，直接成真——这就是**|| 的短路**：前面真，后面不跑。

代码里就是：

true||console.log('这句也不会执行');

总结一句话：能偷懒就偷懒，真值/假值一旦确定，后半截直接跳过。

&& 和 || 可不是“逻辑运算符”那么简单

官方文档天天把 && || 叫“逻辑运算符”，搞得大家只敢在 if 括号里用。
其实人家返回值是最后一个被执行的表达式的值，不是单纯的 true/false！

来看骚操作：

consta=0&&'哈哈';// 0 被返回constb=1&&'哈哈';// '哈哈' 被返回constc=null||'兜底';// '兜底' 被返回constd='hello'||'兜底';// 'hello' 被返回

发现没？返回值就是那条“决定命运”的数据本身。
利用这点，我们可以把 if-else 拍扁成一行，还能顺手做默认值、条件渲染、函数调用，一套连招打完，老板都夸你“代码写得清秀”。

省掉 if-else 的 6 个日常骚场景

1. 默认值一把梭

// 老写法letname=userName;if(!name){name='游客'；}// 短路写法constname=userName||'游客';

2. 对象属性安全读取（可选链出来之前的土办法）

conststreet=user&&user.address&&user.address.street;

现在有?.了，但老项目遍地都是这种“复古风”，你得看得懂。

3. 条件渲染（React 经典）

{isLoggedIn&&<button onClick={logout}>退出</button>}

组件不渲染？直接短路掉，省得写三目还包一层 null。

4. 函数调用“保险丝”

// 只有 onSubmit 存在才执行onSubmit&&onSubmit(values);

5. 链式赋值（面试常考）

consta=b&&c&&d;// 谁第一个 falsy 就返回谁，全 truthy 返回最后的 d

6. 日志开关（生产环境一键闭嘴）

constlog=DEBUG?console.log:()=>{};log('这句只在开发环境打印');

React & Vue 里短路到底香不香？

React 例子——防呆条件渲染

function Card({ data }) { return ( <div> {data.length > 0 && ( <ul> {data.map(item => <li key={item.id}>{item.name}</li>)} </ul> )} {data.length === 0 && <Empty />} </div> ); }

写 JSX 最怕Cannot read properties of undefined，短路一把就能挡住。

Vue3 例子——v-if 的替代品

<template><div><ErrorBannerv-if="error":msg="error"/><!-- 下面这行用短路，省掉多一个 v-if -->{{ error && reportError(error) }}</div></template><scriptsetup>functionreportError(msg){// 埋点window.$tracking?.('error',msg);}</script>

注意：模板里写短路，别搞副作用！reportError里如果改数据，会死循环。

翻车现场：短路不是万金油

1. 数字 0 被“误杀”

constcount=0;consttext=count||'暂无';// 结果 text 是 '暂无'，0 被当成 falsy 了！

正确姿势：用“空值合并运算符”??，它只认 null/undefined：

consttext=count??'暂无';// 0 被保留

2. 副作用被短路“吃掉”

letcalled=false;constfn=()=>(called=true);false&&fn();// fn 压根没跑，called 还是 false

调试时你还纳闷“我函数咋不执行”，其实就是短路把你坑了。

3. 团队新人看不懂，骂你“炫技”

constres=(a||b)&&(c||d)&&(e||f);

老手写起来很爽，新人直接原地爆炸。
规范建议：复杂逻辑还是拆成 if，或者加注释，别让同事想捶你。

调试技巧：一眼看穿“为啥没执行”

1. console.log 插桩法

true&&console.log('A')&&false&&console.log('B');

只打印 A，B 被短路。
把 log 插在每个片段末尾，看谁没打印，就知道谁被“掐掉”。

2. 浏览器断点

在 Sources 面板给每一小段表达式打断点，Step into 观察执行顺序，比瞪眼盯代码快多了。

3. 用 VSCode 的 Quokka 插件

实时跑值，falsy 的地方直接灰色，一眼看清短路路径，爽到飞起。

性能真相：短路到底快不快？

有人担心“少写 if 会不会变慢？”
兄弟，短路是语言层面的底层机制，直接跳字节码，比你写 if 还快一丢丢。
Chrome 跑基准测试（10 亿次循环）：

console.time('if');leta=0;for(leti=0;i<1e9;i++){if(flag)a++;}console.timeEnd('if');// 1.2sconsole.time('short');letb=0;for(leti=0;i<1e9;i++){flag&&b++;}console.timeEnd('short');// 1.1s

差距不大，但短路不会更慢，还省字节省流量，包体都能小几 byte，老板听了都感动。

短路 + 可选链，王炸组合

可选链?.解决“属性链路上 null/undefined”问题，短路解决“表达式真假”问题，俩兄弟一起上，代码直接起飞：

// 老代码constcity=user&&user.address&&user.address.city||'地球';// 现代代码constcity=user?.address?.city||'地球';

可读性高，还不用担心 0 被误杀（配合 ?? 更稳）。
浏览器兼容？Babel 一把梭，@babel/plugin-proposal-optional-chaining走起。

团队协作：这样写才不挨打

1. 简单逻辑再短路，复杂逻辑拆 if；
2. 数字 0、空字符串可能出现时，优先用??；
3. 写副作用函数（发请求、改数据）时，禁止用短路包裹，除非加注释；
4. Code Review 见到(a || b) && c先问“能看懂吗”，看不懂就拆；
5. 项目 ESLint 加规则：

"no-unused-expressions":["error",{"allowShortCircuit":true,"allowTernary":true}]

防止同事把短路当行内语句乱写。

短路 vs 三元 vs if，到底谁更优雅？

一句话：没有银弹，该谁上就谁上，别让“炫技”变成“炫祭”。

总结（用嘴炮版）

短路求值就是 JavaScript 给你的“懒癌福利”：
能一行写完绝不分两行，能早下班绝不加班。
但记住，代码是写给同事看的，不是写给编译器看的。
当你写下a && b && c && d的时候，先问问自己：
“半个月后我喝大了回来看，还能秒懂不？”
如果不能，乖乖拆成 if，或者加行注释：
“别删，这里是短路，删了弹窗出不来。”

下回 PR 再被吐槽“炫技”，就把这篇甩过去，
让他感受短路求值的魅力，然后——
一起偷懒，一起早下班！

完。键盘保住了，今晚不加鸡腿。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤

非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！