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


Posted in Javascript onDecember 21, 2019

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,要用”!=”。对象和非对象在进行比较的时候会先转为基本类型值然后再根据上面的规则进行比较。

Javascript 相关文章推荐
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
Prototype框架详解
Nov 25 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
VUEX 数据持久化,刷新后重新获取的例子
Nov 12 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 #Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 #Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 #Javascript
angularjs模态框的使用代码实例
Dec 20 #Javascript
推荐几个不错的console调试技巧实现
Dec 20 #Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 #Javascript
node使用request请求的方法
Dec 20 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
python3.x实现发送邮件功能
2018/05/22 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
django创建超级用户过程解析
2019/09/18 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Python configparser模块操作代码实例
2020/06/08 Python
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
放飞中国梦演讲稿
2014/04/23 职场文书
高中语文课后反思
2014/04/27 职场文书
服务宗旨标语
2014/07/01 职场文书
关于旅游的活动方案
2014/08/15 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
创业计划书之书店
2019/09/10 职场文书
导游词之安徽九华山
2019/09/18 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
深入解析MySQL索引数据结构
2021/10/16 MySQL
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫