在 JavaScript 中,||(逻辑或)和&&(逻辑与)操作符不总是返回布尔值,而是返回参与运算的其中一个操作数的原始值。
1.逻辑或||(Logical OR)
规则:返回第一个 truthy 值;如果所有值都是 falsy,则返回最后一个值。
// 短路求值:找到第一个 truthy 值就立即返回"hello"||"world"// "hello"(第一个值就是 truthy)0||"default"// "default"(0 是 falsy,返回第二个)null||undefined||42// 42(前两个都是 falsy,返回最后一个)""||false||"ok"// "ok"// 所有值都是 falsy0||""||null// null(返回最后一个)false||undefined// undefined常用场景:提供默认值
constname=userInput||"默认名称";constcount=config.count||10;2.逻辑与&&(Logical AND)
规则:返回第一个 falsy 值;如果所有值都是 truthy,则返回最后一个值。
// 短路求值:找到第一个 falsy 值就立即返回true&&false// false"hello"&&"world"// "world"(两个都是 truthy,返回最后一个)0&&"anything"// 0(第一个就是 falsy,立即返回)null&&undefined// null// 所有值都是 truthytrue&&"hello"&&42// 42(返回最后一个)"a"&&"b"&&"c"// "c"常用场景:条件执行
isLoggedIn&&showDashboard();user&&user.name&&user.name.toUpperCase();3.短路求值机制
||:如果第一个操作数是 truthy,不再计算第二个操作数&&:如果第一个操作数是 falsy,不再计算第二个操作数
false&&console.log("不会执行")// 不会输出true||console.log("不会执行")// 不会输出4.与三元运算符对比
// || 相当于value1||value2// 等价于value1?value1:value2// && 相当于value1&&value2// 等价于value1?value2:value15.注意事项
- 返回值是原始值,不是布尔值
- 利用短路特性可以优化性能或避免错误
- ES2020 引入了空值合并运算符
??,只检查null和undefined,不检查其他 falsy 值:0||10// 100??10// 0(0 不是 null/undefined)""||"def"// "def"""??"def"// ""(空字符串不是 null/undefined)
6.实际示例
// 链式调用保护user&&user.profile&&user.profile.avatar;// 默认值设置constconfig={timeout:0,retries:undefined};constfinalTimeout=config.timeout||3000;// 3000(0 是 falsy)constfinalRetries=config.retries??3;// 3(undefined 是 null/undefined)总结:
||返回第一个 truthy 值,或最后一个 falsy 值&&返回第一个 falsy 值,或最后一个 truthy 值- 两者都使用短路求值,返回的是操作数的原始值