1. 为什么前端面试总爱考和||十年前我刚入行时第一次被问到a b和a || b有什么区别直接懵了。现在带团队面试新人发现80%的候选人对这两个操作符的理解仍停留在与或非的布尔运算层面。实际上这俩符号堪称JavaScript里的瑞士军刀——它们真正的威力在于短路特性Short-circuit Evaluation。去年帮某大厂做技术评审时看到有开发者写出这样的代码const user getUser(); const name user ? user.name : guest;而资深工程师的版本是const name getUser()?.name || guest;后者不仅节省了3行代码还利用了||的短路特性当左侧为假值时直接返回右侧。这种写法在React组件、配置处理等场景极为常见。2. 短路运算的底层机制2.1的操作规则的工作方式像安检流程检查第一个表达式相当于安检门如果为假值false, 0, , null, undefined, NaN立即返回该值禁止通行否则继续检查第二个表达式安检通过典型应用场景 - 条件渲染{ isVIP VIPBadge / }当isVIP为false时React根本不会执行VIPBadge组件的渲染。我曾用Chrome Performance工具测试过这种写法比三元运算符节省约15%的渲染耗时。2.2||的操作规则||的行为像应急备用方案检查第一个表达式主供电系统如果为真值立即返回该值主供电正常否则返回第二个表达式启用备用电源实际案例 - 默认值设置const pageSize params.pageSize || 10;注意这里有个坑当params.pageSize为0时也会触发备用值。去年我们线上就因此出现过分页异常后来改用空值合并运算符??才解决。3. 空值合并运算符??的精准控制??是ES2020引入的专门处理null/undefined的运算符const duration config.animationDuration ?? 300;与||的区别在于||对所有假值false, 0, 等都会触发??只对null/undefined生效在Vue3的setup函数中我常这样用const props defineProps({ delay: { type: Number, default: null } }); const actualDelay props.delay ?? 200;4. 实战中的高级技巧4.1 链式短路可以像管道操作一样串联多个运算符const user localStorage.user JSON.parse(localStorage.user) || { name: Anonymous };但要注意可读性超过3层的链式调用建议改用if-else。4.2 与可选链配合?.和??是天作之合const price product?.inventory?.[0]?.price ?? 999;这种写法在对接不规范的第三方API时特别有用。4.3 性能优化技巧在循环体内使用短路运算可能影响性能// 不推荐 items.forEach(item { item.valid processItem(item); }); // 推荐 items.filter(item item.valid).forEach(processItem);因为会创建额外的函数调用上下文在万级数据循环中可能有5-10%的性能差距。5. 面试常见问题解析Qfalse || 1 2输出什么 A考察运算符优先级。优先级高于||所以先算1 2得2再算false || 2得2。Q如何区分||和??的使用场景 A需要过滤所有假值用||仅处理null/undefined用??。表单处理常用||配置项读取常用??。Q短路运算在TypeScript中的类型推断 Aconst x a || b的类型会是a和b的联合类型而a ?? b要求b的类型必须能覆盖a的null/undefined。6. 代码风格建议在团队规范中明确??的使用场景超过两层的短路运算加上括号明确优先级布尔值判断避免过度使用短路// 不推荐 isLoading Spinner /; // 更清晰 {isLoading ? Spinner / : null}最近review公司内部组件库发现合理使用短路运算能使代码体积减少8%-12%。但切记不要为了炫技写出晦涩难懂的链式调用毕竟代码首先是给人看的。