话说在前头

我为什么想写这篇文章呢？原因有以下几个：

我不想躺平，我再继续挣扎一下
我喜欢创作，我喜欢写文，我喜欢捣鼓
工作中遇到null >= 0为true让我百思不得其解，我从此记住了它
前端知识杂乱无章，至少做到好记性不如烂笔头

问题背景

将工作中遇到的问题简化如下：
index是数组索引，本来它一定满足index>=0这个条件的，但在另外一个条件下将它置为null，以为>=0就不成立了，结果index = null时浏览器输出竟然是zero（当然我期望输出sakura）。此时，各位jym，你们已经能想象到我脸上挂着什么表情了，那真是晴天霹雳啊！？why?what happened?

<div v-if="index >= 0">zero</div>
<div v-else=>sakura</div>

结果是：zero

欧克欧克，冷静，冷静，在console里面打印一下试试吧。

为true嘛，当然是zero了，有什么可质疑的呢！但是，why?

进入正题

看看下面每一行都输出什么结果？

// 1、[]秀
[] == false
[] === false
[] == true
[] == 0
[] == 1
[] >= 0
[] < 0
[] == undefined
[] == null
[] == ![]
!![]
[] == ''
[''] == ''
[0] == 0
[0] == ''
[''] == 0
[null] == ''
[null] == 0
[undefined] == ''
[undefined] == 0
[[]] == 0
[[]] == ''
[[[[]]]] == ''
[[[[]]]] == 0
[[[[null]]]] == ''
[[[[null]]]] == 0
[[[[undefined]]]] == 0
[[[[undefined]]]] == ''

// 2、true和false秀
'' == false
0 == false
1 == true
+true
+false
true + true
false + false
true == 'true'
false == 'false'
!!'false'
!!'true'
!!'true' == !!'false'
!!'true' === !!'false'


// 3、null和undefined秀
null == false
!!null
null < 0
null >= 0
null == 0
null == undefined
undefined == false
!!undefined
undefined < 0
undefined >= 0
undefined == 0


// 4、NaN秀
NaN == NaN
NaN === NaN
Number(NaN)
parseInt(NaN)
parseFloat(NaN)
typeof NaN
NaN instanceof Number

// 5、其他
1 < 2 < 3
3 > 2 > 1
3 - 1
3 + 1
'3' + 1
'3' - 1

我已经不省人事了，快来个人把我泼醒呀！！！此处省略一万点。。。。。。

终于醒过来了，该面对的还是要面对，该攻克的必须全力以赴。

1、[]

解释：
==会对两边比较的值做转换，如何转换呢？点击这里
!逻辑非运算符在操作非布尔值时，先将其转换为布尔值再取反。

[] == false
1、类型转换：[].toString() == Number(false),然后就变成了'' == 0
2、类型转换：Number('') === 0变成0 === 0，结果为true
[] == ![]
1、布尔值转换：Boolean([]) === true，!true是false,这时候根据第1条可知：[] == ![]
[''] == ''
1、类型转换：[''].toString() === '',所以变成了'' == ''
[null] == 0
1、类型转换：Number([null]) === 0，所以0 == 0。这里Number在转换[null]时，先执行[null].toString()得到'',然后再执行Number('')得到0。

注意：用[]做if判断时是true，即下面代码会打印出111

if([]) {
    console.log(111); // -> 111
}

2、true和false

这个就没啥好说的了。

3、null和undefined

解释： js规定：null是空的意思,undefined是未定义，null只和undefined以及它自己相等。但是当它们作为if语句判断的时候可以当成false使用。

null >= 0
见js比较运算符说明The Greater-than-or-equal Operator ( >= )

由上可知：>=的结果是取<的反。那么null < 0的值是怎样的呢？
根据上文11.8.5的描述：
(1)<两边都不是string类型，那么进行Number(null) < Number(0)的比较。
(2)0 < 0为false。
(3)所以null>=0为true。
这个比较绕，通篇的规定也记不住，总之记住null >= 0就够了。至于undefined >= 0为false的原因，各位jym自行去对号入座吧！

4、NaN

NaN必须写成NaN，写成其他的都是错误的，记住以下几点：

NaN的类型是number，但它不是Number的实例
NaN表示'不是一个数字（Not a Number）'
NaN跟自身不相等
只有isNaN()这个函数能判断它

5、其他

解释：

1 < 2 < 3
(1)1 < 2为true
(2)true < 3为true
3 > 2 > 1
(1)3 > 2为true
(2）true > 1即1 > 1为false

说了这么多，我已经废了，==真的就是坑货呀，咱们还是乖乖用===吧，或者TypeScript学起来吧！

结语

1、太多了，太多要记的了，不过最重要的记住下面这几个比较容易出错的：

[] != []; -> true
null >= 0; -> true
NaN === NaN; -> false
3 > 2 > 1; -> false

2、附上各大类型比较结果表，看下就行了

上图截自Equality comparisons and sameness - JavaScript | MDN (mozilla.org)

一起学习，冲冲冲鸭！

今天从null >= 0为true说起