一次讲透 !、&&、||:90% 的条件判断 Bug 都出在这里

25 阅读4分钟



大家好,我是 31 岁的小米。如果你写过 JavaScript,一定有过这样的时刻:

明明代码不复杂,但结果就是不对;明明条件都写了,if 却像装死一样不进来。后来你会发现,问题往往不在变量,不在 API,而是在布尔操作符

今天,我想给你讲一个故事。一个关于 “门卫”“安检”“兜底方案” 的故事。主角有三个:

  • 逻辑非(!)
  • 逻辑与(&&)
  • 逻辑或(||)

故事的开场:布尔世界的小镇

在 JavaScript 的世界里,有一个很小、但非常重要的小镇,叫 Boolean 镇。这个镇子里只有两种人:

  • true
  • false

没有灰色地带,没有“差不多”,你要么能过关,要么直接被拦下来。而镇子的大门口,站着三位守门人。

逻辑非(!):那个“唱反调”的门卫

1、逻辑非是什么?

逻辑非,符号是一个感叹号:

!value

它只干一件事:把“是”变成“不是”,把“不是”变成“是”。 在 Boolean 镇里,它是最简单、也最“叛逆”的角色。

2、把它想象成:唱反调的门卫老王

想象一个场景。你去小区找朋友,门口有个门卫老王。规则是这样的:

  • 如果你是 业主 → 本来可以进
  • 如果你不是业主 → 本来不能进

但老王今天心情不好,开始反着来

你越是“对的”,他越说你“不行”。

3、JavaScript 会先“转布尔值”

这里有一个新手最容易踩坑的点。逻辑非并不是简单地“取反”,它会先把值转换成布尔值,再取反

于是你会发现:逻辑非,其实是一个强制布尔转换器

4、双重逻辑非:!! 是个“照妖镜”

!!value

这在代码里非常常见。它的意思不是“取两次反”,而是:把任意值,变成一个真正的布尔值

你可以把 !! 理解成:“不管你是什么,我只关心你算不算‘真’”

5、生活类比总结

  • !:唱反调
  • !!:验真伪
  • 常用于:状态判断、参数校验、快速转 Boolean

逻辑与(&&):严格的安检通道

1、逻辑与是什么?

逻辑与,符号是:

A && B

规则非常严格:必须 A 为真,并且 B 为真,结果才为真

2、把它想象成:机场安检

你要坐飞机,必须通过两道关卡:

  1. 身份证
  2. 登机牌:hasID && hasTicket

少一样,都不让你上飞机,全部齐了,才放行

3、短路行为:没必要的事我不干

这是 && 的灵魂特性如果左边是 false,右边根本不会执行

这就像安检员说:“身份证都没有,还看什么登机牌?”

4、&& 在 JavaScript 里,不只是返回 true/false

这是 JavaScript 非常“骚”的地方。

let result = a && b;

返回的不是布尔值,而是:第一个为 false 的值,或者最后一个值

5、实战中的经典写法

user && user.profile && user.profile.name

这行代码的真实含义是:“只要中间有一步不成立,立刻停下来”

这是早期 JavaScript 没有 ?. 时,最常见的防空指针写法

6、生活类比总结

  • &&:所有条件都满足才行
  • 特点:短路
  • 常用于:前置校验、条件执行、防御性编程

逻辑或(||):兜底方案大师

1、逻辑或是什么?

逻辑或,符号是:

A || B

规则很简单:只要有一个为真,就算成功

2、把它想象成:Plan B 的人生哲学

你今天的计划是:

  • 如果能坐地铁 → 坐地铁
  • 否则 → 打车

takeSubway || takeTaxi:你不是非得地铁不可,你只是想到公司

3、|| 的短路行为

和 && 正好相反:左边为真,右边就不执行了

这就是“有更好的,就不考虑备胎”。

4、|| 在 JavaScript 中的返回规则

A || B

返回的是:第一个为真的值,或者最后一个值

5、默认值的经典写法(也是坑最多的)

let port = config.port || 3000;

如果:config.port = 0;

结果会是:port === 3000

这不是 bug,这是 0 在 Boolean 世界里是 false

6、后来为什么有了 ??

正是因为 || 太“宽松”,ES2020 引入了:

??

但那是另一个故事了。

7、生活类比总结

  • ||:只要能用就行
  • 特点:兜底、短路
  • 常用于:默认值、回退方案

三兄弟同框:一张思维对照表

为什么说:布尔操作符决定了代码的“性格”

写多了你会发现:

  • 用 && 多的人,代码偏 谨慎
  • 用 || 多的人,代码偏 乐观
  • 滥用 ! 的人,代码偏 难读

布尔操作符不是语法糖,它是逻辑表达方式的体现

END

如果你只把“ && 、|| 、! ”当成“条件判断的符号”,那你永远会在 if 里迷路。

但如果你把它们当成:

  • 决策规则
  • 执行策略
  • 人生兜底方案

你会发现,JavaScript 的逻辑,其实一点都不冷冰冰。

好了,好朋友们,我们下篇见。

我是小米,一个喜欢分享技术的31岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货!