JavaScript的 == 和 === 运算符你真的了解吗?

时间:2021-02-23 19:55:01

      我们都知道在Javascript中,== 运算符是用来判断两个变量是否相等的一个常规运算符,通过一个布尔值得知判断的对与错,这种运算符通常用于if语句或者是三元运算中。如下面代码所示: 

1 if (1 == 2) {
2     ...  
3 }

     但是 == 运算符的结果往往是让我们很琢磨不透。总是在本以为是true的时候却是false,认为是false的时候变成true。下面有几个鲜活的例子

1 alert( 1 == true );               //true
2 alert( '1' == true);               //true
3 alert( '1' == 'true' );             //false
4 alert( 0 == false);               //true
5 alert( 2 == true);                //false
6 alert(undefined == null);    //true
7 alert(NaN == NaN);           //false,NaN就是个奇葩。  

 

     好吧,我承认在没有深刻理解 == 运算符的时候看到这些我已经跪了,毫无章法可言,甚至让我怀疑我到底会不会用 == 运算符了,一直以来在if语句里写的究竟是神马玩意儿? 但是一切都是有科学依据的,只有精华的东西才能被流传下来,所以我坚信里面是有学问可循的。后来才知道,JavaScript(ECMAScript)在定义 == 运算符的时候是有一套算法。对,没听错,是有一个算法。。规定 == 运算符工作原理的算法。下面我要列出算法咯:

     如:比较运算x == y,  其中x和 y是值,产生 true 或者 false 。这样的比较按如下方式进行:

 1. 若 Type(x) 与 Type(y) 相同
   A. 若Type(x)为undefined, 返回true    B. 若Type(x)为null, 返回true    C. 若Type(x)为Number,      a. 若x为NaN, 返回false      b. 若y为NaN, 返回false      c. 若x与y为相等数值, 返回true      d. 若x 为
+0 且 y为−0, 返回true      e. 若x 为 −0 且 y为+0, 返回true      f. 返回false    D. 若Type(x)为String, 则当x和y为完全相同的字符序列(长度相等且相同字符在相同位置)时返回true. 否则, 返回false    E. 若Type(x)为Boolean, 当x和y为同为true或者同为false时返回true. 否则, 返回false    F. 当x和y为引用同一对象时返回true. 否则, 返回false
2. 若x为 null , y为 undefined, 返回true 3. 若x为 undefined, y为 null, 返回true 4. 若Type(x) 为 Number 且 Type(y) 为 String, 返回 comparison x
== ToNumber(y) 的结果 5. 若Type(x) 为 String 且 Type(y) 为 Number, 返回 ToNumber(x) == comparison x 的结果 6. 返回比较 ToNumber(x) == y 的结果 7. 若Type(x)为Boolean, 返回比较 ToNumber(x) == y 的结果 8. 若Type(y)为Boolean, 返回比较 x == ToNumber(y) 的结果 9. 若Type(x)为String 或 Number, 且 Type(y) 为 Object ,返回比较 x == ToPrimitive(y) 的结果 10. 若Type(x)为Object且 Type(y) 为 String 或 Number , 返回比较 ToPrimitive(x) == y 的结果 11. 返回false

     有了如上算法,我们不难得出为什么 1 == true 会 return true了, 原来是因为首先==运算符会将true进行 toNumber()转换,我们都知道toNumber(true)的结果为 1, 所以该表达式就成为了 1 == 1, 这样的结果return true;没有人会觉的有疑议吧?同样,其他的例子通过这样的一个算法就会变得有道理了,瞬间就觉得自己又会 == 运算符了~~

     但是,我们了解了 == 运算符之后,不禁会想到它的大哥 === 运算符,这个家伙不会也是一个让人摸不着头脑的家伙吧?难道也是一个颠覆三观的东西?你猜对了,他和 == 虽然是兄弟,但是还真有点不一样,好吧,看看一个例子:

1 alert(1 === true );               //false;
2 alert(undefined === null);   //false;
3 alert(NaN === NaN); //false;(这个还真比较诡异和特殊)

     what??? 突然感觉又穿越回白痴状态了?,肿么 == 那一套 === 完全不感冒了?出于对知识的好奇,我觉得 === 运算符绝对也有自己的一套规则算法。在惊慌失措中是不是突然记起来 === 这个家伙的真名 ----‘严格等于运算符’? 其实一看到名字也就明白了,这家伙是要求丝毫不差的两个东西才能返回true的,其他的一律不鸟都返回false(但是也有例外,就是NaN)。好啦,还是也来了解一下它的算法吧:

     如比较 x===yx 和 y 为值,  需要产出 true 或 false. 比较过程如下:

 1. 若 Type(x) 与 Type(y) 的结果不一致, 返回 false, 否则 2. 若Type(x)结果为 undefined, 返回 true 3. 若Type(x)结果为 null, 返回 true 4. 若Type(x)结果为 Number, 则    A. 若x为NaN,返回 false    B. 若y为NaN,返回 false    C. 若x与y 为同一个数字,返回 true    D. 若x为+0, y为-0, 返回 true    E. 若x为-0, y为+0, 返回 true    F. 返回 false 5. 若Type(x) 结果为String, 如果 x 与 y 为完全相同的字符序列(相同的长度和相同的字符对应相同的位置), 返回 true, 否则, 返回 false 6. 若Type(x) 结果为Boolean, 如果 x 与 y 都为 truefalse, 则返回 true, 否则, 返回 false 7. 若x和y引用到同一个Object 对象, 返回 true, 否则, 返回 false

     != 和 !== 运算符和 == ,=== 原理相同,很好理解。看到这里,也许你才真正的了解了 == 和 === 运算符,这就是JavaScript的诡异与魅力,很多细节值得探索~~