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高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
JQuery工具函数汇总
Jun 15 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
利用python分析access日志的方法
Oct 26 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
实例分析js事件循环机制
Dec 13 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
Javascript设计模式之原型模式详细
Oct 05 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
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
js正则表达式注册页面表单验证
2016/10/11 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Django日志及中间件模块应用案例
2020/09/10 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
animation和transition的区别
2020/10/12 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
英文自我鉴定
2013/12/10 职场文书
应届毕业生个人求职自荐信
2014/01/06 职场文书
大学生英语演讲稿
2014/04/24 职场文书
红头文件任命书范本
2014/06/05 职场文书
广播体操比赛口号
2014/06/10 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2014年民政工作总结
2014/11/26 职场文书
家长会欢迎词
2015/01/23 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
手写实现JS中的new
2021/11/07 Javascript
MySQL中order by的使用详情
2021/11/17 MySQL