JavaScript中的相等操作符使用详解

 更新时间:2019年12月21日 14:16:06   作者:Wise.Wrong  
JavaScript 中的相等操作符详解,包括 [] == []、[] == ![]、{} == !{}几个操作符,需要的朋友可以参考下

ECMAScript 中的相等操作符由两个等于号 ( == ) 表示,如果两个操作数相等,则返回 true。

相等操作符会先转换操作数(通常称为强制转型),然后比较它们的相等性。

在转换不同的数据类型时,相等操作符遵循下列基本规则:

1. 如果有一个操作数是布尔值,则在比较相等性之前,将其转换为数值;

2. 如果一个操作数是字符串,另一个操作数是数值,在比较之前先将字符串转换为数值;

3. 如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf() 方法,用得到的基本类型值按照前面的规则进行比较;

4. 如果有一个操作数是 NaN,无论另一个操作数是什么,相等操作符都返回 false;

5. 如果两个操作数都是对象,则比较它们是不是同一个对象。如果指向同一个对象,则相等操作符返回 true;

6. 在比较相等性之前,不能将 null 和 undefined 转成其他值。

7. null 和 undefined 是相等的。

以上内容摘自《 JavaScript 高级程序设计(第3版)》3.5.7

一、基本规则

上面阐述的 1、2、3 三条规则,总结成一句话就是:

如果相等操作符两边的操作数,不包含 null 或者 undefined,且两个操作数不全是对象,

在执行相等比较之前,会先调用 Number() 将两个操作数强制转为 Number 类型,然后进行比较

所以在使用相等操作符的时候,会有以下情况:

'55' == 55; //true
false == 0; //true
"wise" == 3; //false ( Number("wise") -> NaN )
[] == 0; //true ( Number([]) -> 0 )

但是在特殊情况下,也就是两边都有对象的时候,会产生看似不合理的结果:

NaN == NaN; //false (参考第4条规则)
[] == []; //false
[] == ![]; //true
{} == {}; //false
{} == !{}; //false

二、[] == [] 和 {} == {}

在 JavaScript 中,Object、Array、Function、RegExp、Date 都是引用类型

声明引用类型的时候,变量名保存在 js 的栈内存里面,而对应的值保存在堆内存里面

而这个变量在栈内存中实际保存的是:这个值在堆内存中的地址,也就是指针

var a = {};
var b = {};

上面的代码中,声明变量 a 的时候,在堆内存中存储了一个 Object,而 a 实际保存的这个 Object 的地址

然后声明变量 b 的时候,又存储了一个新的 Object

虽然 a 和 b 都保存了一个 Object,但这是两个独立的 Object,它们的地址是不同的

再结合前面的第5条规则:如果两个对象指向同一个对象,相等操作符返回 true

所以 {} == {} 的结果是 false,同样的, [] == [] 的结果也是 false

var c = b;
b == c; //true(变量c保存的是b的指针,它们指向同一个对象)

三、[] == ![] 和 {} == !{}

参考链接:JavaScript 运算符优先级

ECMAScript 中规定,逻辑非 (!) 的优先级高于相等操作符 ( == )

在比较 [] == ![] 的时候,先计算 ![] 得到布尔值 false

所以实际上比较的是 [] == false

然后根据上面的第1条规则和第3条规则,将两个操作数转为数值类型:

Number([]) == Number(false); // -> 0 == 0 -> true

在比较 {} == !{} 的时候,也是遵守同样的规则:

{} == !{} -> {} == false -> Number({}) == Number(false) -> NaN == 0

然后第4条规则规定:如果有一个操作数是 NaN,相等操作符返回 false

所以 {} == !{} 的结果是 false

小结:

“==”在比较不同类型值得时候会进行隐式的类型转化,而”===”不会转化,全等一定相等,相等却不一定全等,这是一个充分不必要条件。undefined和null相等而不全等,且在相等比较的时候不会转化为其他类型的值。NaN是不等于NaN 的,要判断某个变量是不是NaN,要用”!=”。对象和非对象在进行比较的时候会先转为基本类型值然后再根据上面的规则进行比较。

相关文章

  • nestjs实现图形校验和单点登录的示例代码

    nestjs实现图形校验和单点登录的示例代码

    本文主要介绍了nestjs实现图形校验和单点登录的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • js canvas实现擦除效果示例代码

    js canvas实现擦除效果示例代码

    擦除效果在我们日常开发中也是时有见到的,通过擦除效果大大加强了与用户的交互性,所以下面这篇文章主要给大家介绍了利用js和canvas实现擦除效果的相关资料,文中给出了详细的介绍和示例代码,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • js实现简易的英汉词典

    js实现简易的英汉词典

    这篇文章主要为大家详细介绍了js实现简易的英汉词典,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 一次JavaScript正则的诡异经历记录

    一次JavaScript正则的诡异经历记录

    正则表达式是用于匹配字符串中字符组合的模式,下面这篇文章主要给大家介绍了一次JavaScript正则的诡异经历记录,文中通过实例介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • javascript实现移动端红包雨页面

    javascript实现移动端红包雨页面

    这篇文章主要为大家详细介绍了javascript实现移动端红包雨页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JavaScript电子时钟倒计时第二款

    JavaScript电子时钟倒计时第二款

    这篇文章主要介绍了JavaScript电子时钟倒计时的实现代码,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-01-01
  • js 分页代码带切换效果

    js 分页代码带切换效果

    js 分页效果实现代码,可以切换页面
    2009-06-06
  • js 字符串转化成数字的代码

    js 字符串转化成数字的代码

    js 字符串转化成数字的代码,需要的朋友可以参考下。
    2011-06-06
  • JS使用canvas技术模仿echarts柱状图

    JS使用canvas技术模仿echarts柱状图

    这篇文章主要介绍了JS使用canvas技术模仿echarts柱状图,对canvas感兴趣的同学,可以参考下
    2021-04-04
  • javascript中break,continue和return语句用法小结

    javascript中break,continue和return语句用法小结

    break,continue和return这三个语句的用法新手们经常弄混淆,至少在我学习c语言的时候经常把它们的用法给搞错。不过现在好了,我已彻底搞清楚它们之间的用法
    2012-05-05

最新评论