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。

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

=== 的判定规则

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

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

例如：

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

== 的探究

接下来查看 == 的规则：

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

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

再看一个例子：


if (x == 10) 
  x += 5

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

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

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

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

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


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

总结

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

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

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

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

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

后记

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

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

==号

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

===号

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

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