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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
高性能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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
15种PHP Encoder的比较
2007/04/17 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
js密码强度检测
2016/01/07 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python opencv实现图像配准与比较
2021/02/09 Python
教师求职自荐信
2014/03/09 职场文书
学校标语大全
2014/06/19 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
体育个人工作总结
2015/02/09 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby