null >= 0 引发的血案

3,048 阅读2分钟

背景

某天,开开心心准备下班,想着等会是来份烧烤还是关东煮,来抚慰一下忙碌一天的身体,突然:

  • QA:不准走,有个bug,页面数值这里显示null了!
  • 我:不可能,我特意处理了!
  • QA:咯,你自己看!
  • 我:哇哦!还真是!

满脸疑惑的我,又打开了电脑,开始逐一排查:

  1. 看了看代码,null值确实处理了啊
  2. 瞅了瞅提交记录,代码也push了啊
  3. 翻了翻部署流水线,测试环境已经部署了啊
  4. 清了清浏览器缓存,bug还稳定复现啊

摸了摸我还不太高的发际线,告诉自己,遇事不要慌,什么大场面没见过。

问题

查看接口请求,确实给我返回个null;又看了看代码,难道是处理方法错了?

// 出现bug的代码
<span v-if="num >= 0">{{ num }}</span>

在控制台调试了一下我写的判断条件,惊呆了!好家伙,null居然在我眼皮子底下通关了

null >= 0 // true

于是我不死心,又试了试

null == 0 // false
null > 0 // false

这下我就更疑惑了,两个false合在一起怎么就变成true,难道这就是传说中的负负得正

问题依然没有那么简单

隐式转换?脑海中莫名浮现一个名词。对对对

Number(null) // 0

啊,这就说得通null >= 0的结果是true了。但是,又说不通null == 0的结果是false了。

以我以往学习的知识看来,null == 0也会进行隐式转换啊。

查阅资料后才发现,并非如此,null0相比较,会直接返回false,而不会进行隐式转换

image.png 参考:非严格相等判断

但在null >= 0中,null会被隐式转换Number(null),然后再与0比较

参考:大于或等于判断