聊一聊什么是短路运算

摘要JS 的、||不只是简单返回 true/false存在短路运算并且返回原始值。前端开发中经常使用一、短路运算前置知识点真假转换规则数字0默认视为false空字符串、null、undefined、NaN都属于假值其余大多为真值。重要特性返回原始值和||不会一定返回布尔 true/false返回的是表达式本身原始的值不是单纯布尔结果。短路含义满足条件之后后面代码不再执行直接截断。二、逻辑与找第一个假值语法表达式1 表达式2规则如果表达式 1 为假直接返回表达式 1表达式 2 不会执行短路如果表达式 1 为真返回表达式 2链式连续a b c从左往右找遇到第一个假直接返回全部为真则返回最后一个表达式的值代码示例// 左边为真返回右边的值 console.log(88 66); // 66 console.log(10 20); // 20 // 左边是假值0直接返回0右边66完全不执行 console.log(0 66); // 0 // 左边真值继续看右边右边是假返回0 console.log(99 0); // 0 // 全部真值返回最末尾 console.log(10 20 30); //30一句话记忆找假一假就停全真返回最后一个。三、逻辑或||找第一个真值语法表达式1 || 表达式2规则如果表达式 1 为真直接返回表达式 1表达式 2 不会执行短路如果表达式 1 为假才返回表达式 2链式连续a || b || c || d从左向右遇到第一个真值立刻返回全部都是假返回最右侧最后一个表达式代码示例// 第一个值50是真值直接返回50后面100不执行发生短路 console.log(50 || 100); //50 // 第一个0是假无法短路返回后面100 console.log(0 || 100); //100 // 两边都是假值返回后面的空字符串 console.log(0 || ); // 四、 和 || 对比速查表表格运算符作用短路触发条件链式运算行为逻辑与寻找第一个假值左边表达式为假直接短路右边不运行遇假停止全部为真返回最末尾值 逻辑或寻找第一个真值左边表达式为真直接短路右边不运行遇真停止全部为假返回最末尾值⚠️关键点二者返回原始表达式的值不是单纯 true、false。很多初学者误以为运算结果只能是布尔这是高频踩坑点。五、短路运算在业务中的实际用途||做兜底默认值// 如果name是假值就赋值匿名用户 let name || 匿名用户; console.log(name); //匿名用户做简单条件判断// flag为true才执行后面函数 let flag true; flag console.log(条件成立才执行);注意ES6 之后有??空值合并运算符专门处理null/undefined和||有区别不要完全混用。六、踩坑点短路满足条件之后后面代码完全不会执行不要写依赖执行的逻辑放在短路后面。返回原始值不是 true/false。88 66得到 66而不是 true。一假即停||一真即停。假值集合0、、NaN、null、undefined、false这些在短路判断中当作 false。短路运算是 JS 基础中非常重要的知识点不仅面试常考日常项目中大量简写代码底层都是这套逻辑一定要理解短路截断和返回原始值这两个核心特性。