深入解析JavaScript中==与===的区别及类型转换机制

JavaScript中==与===的区别概述

引言

在JavaScript的if条件判断中，存在六种被视为“假值”的情况：false、null、undefined、空字符串（''）、NaN以及0。首先通过几个示例来观察：

[] === []
NaN === NaN
NaN == NaN
0 == []
'' == []
'' == {}
[] == undefined
{} == []
null == undefined

上述判断的结果如何？读者能否一眼看出答案？过去，我对==和===的理解仅停留在大致印象层面：==在两侧变量类型不同时，会先进行类型转换再比较；而===则不进行类型转换，若类型不同直接返回false。然而，近期遇到的一个题目颇具启发性，现分享如下：

var x = 1;
var obj = {
  valueOf: function(){ 
    x = 2; 
    return 0 
    }
  }
console.log(obj == 0, x)

这段代码的输出结果为true和2，这是否令人感到意外？还有更令人惊讶的情况：

var x = 1;
var obj = {
  valueOf: function(){ 
    return {} 
  }, 
  toString: function(){ 
    return {}
  }
 }
 console.log(obj == 0)

这段代码直接抛出了异常：Uncaught TypeError: Cannot convert object to primitive value。

如果你也感到困惑，请继续阅读下文。

===严格相等的判定规则

=== 的判定规则

这一部分相对简单，我将规则列举如下：

1. 若两个值的类型不同，则它们不相等。
2. 若两个值均为数值且值相同，则相等；例外情况是，若其中至少有一个为NaN，则不相等（判断NaN只能使用isNaN()函数）。
3. 若两个值均为字符串，且每个位置的字符完全一致，则相等；否则不相等。
4. 若两个值均为true或均为false，则相等。
5. 若两个值引用同一个对象或函数，则相等；否则不相等。
6. 若两个值均为null或均为undefined，则相等。

不难发现，对于复合类型数据（如对象、数组、函数等）的比较，并非比较其内部值是否相等，而是比较它们引用的对象是否相同。因此，[] === [] 的结果为false也就合情合理了。

例如：

==隐式类型转换机制解析

== 的探究

接下来查看 == 的规则：

1. 若两个值类型相同，则进行 === 比较。
2. 若两个值类型不同，它们可能相等。此时需根据以下规则进行类型转换后再比较：
3. 若一个值为null，另一个为undefined，则它们相等。
4. 若一个是字符串，另一个是数值，需将字符串转换为数值后再进行比较。
5. 若任一值为true，将其转换为1后再比较；若任一值为false，将其转换为0后再比较。
6. 若一个是对象，另一个是数值或字符串，需将对象转换为基本类型的值后再比较。对象转换为基本类型时，主要调用其toString()或valueOf()方法。JavaScript核心内置类通常优先尝试valueOf()，再尝试toString()；但Date对象例外，它使用toString()进行转换。非JavaScript核心定义的对象转换较为复杂，有兴趣的读者可深入研究。
7. 其他任何组合，均不相等。

至此，结合第六条规则，我们便能理解为何上述代码会输出意想不到的结果甚至抛出错误。

再看一个例子：

if (x == 10) 
  x += 5

根据上述规则，假设输入的x为字符串“20”，x的结果将变为“205”。这往往不是我们期望计算20+5的结果。

综合上述示例可以看出，== 的比较看似便捷（如1 == '1'），但可能埋下隐患，例如对类型做出错误假设。因此，多数人建议少用==而尽量使用===。事实上，若明确知道类型，最好使用===。

再举一个简单的例子：在团队协作中，阅读他人代码时，看到==需要判断作者的意图是确实需要类型转换，还是无所谓是否转换随手所写，亦或是本不应转换却写错了……这所花费的脑力和时间远多于明确的===（加上可能需要的显式转换）。由此可见，===显然更优。

理解了==的机制后，判断这6个假值便变得容易了。

简单看几个例子，大家判断一下真假：

false == ''
false == []
0 == []
'' == []
[] == []
[] == {}
null == undefined
false == undefined

==比较假值的总结与建议

总结

可以用一张图来展示==返回true的几个假值情况：

一、首先检查双等号前后是否存在NaN，若存在NaN，一律返回false。

二、检查双等号前后是否存在布尔值，若存在，将布尔值转换为数字（false转为0，true转为1）。

三、接着检查双等号前后是否存在字符串，分三种情况：

1. 若对方是对象，对象通过toString()或valueOf()进行转换；
2. 若对方是数字，字符串转为数字；
3. 若对方是字符串，直接比较；
4. 其他情况返回false。
5. 若一方是数字，对方是对象，对象通过valueOf()或toString()进行比较，其他情况一律返回false。
6. null和undefined不进行类型转换，但它们彼此相等。

后记

我的建议是：如果你确实清楚自己在做什么（了解类型转换的结果），可以使用==；否则，还是使用===吧。

网上偶然看到的一张图，大家可以参考：

==号

===号

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。