浅析Javascript中双等号(==)隐性转换机制


Posted in Javascript onOctober 27, 2017

在Javascript中判断相等关系有双等号(==)和三等号(===)两种。其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否完全相等)。

因此有几个常识知识:

1、对于string,number等基础类型,==和===是有区别的

1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等

2)同类型比较,直接进行“值”比较,两者结果一样

2、对于Array,Object等高级类型,==和===是没有区别的

进行“指针地址”比较

3、基础类型与高级类型,==和===是有区别的

1)对于==,将高级转化为基础类型,进行“值”比较

2)因为类型不同,===结果为false

换句话说,双等号(==)在运算的时候会进行类型转换,而三等号(===)则不会。

如:

alert('55' == 55); //true
alert('55' === 55); //false

Javascript语言中五大基本数据类型(原始值,也叫简单数据类型):即 Undefined、Null、Boolean、Number 和 String 型。由于这些原始类型占据的空间是固定的,所以可将他们存储在较小的内存区域 - 栈中。这样存储便于迅速查寻变量的值;

Javascript中使用双等号(==)判断相等的隐性转换机制:

1,如果两边都是简单类型:

1,1,两边都是简单类型,且类型相同,则直接进行比较。

console.log(1==1); //true
console.log("1"=="1"); //true
console.log(false==false); //true
console.log(null==null); //true
console.log(undefined==undefined); //true

1.2,两边都是简单类型,类型不同,则先转换为数字比较(其中Boolean只有两个值:true==1,false==0;null与undefined相等;字符串数字等于数字值,空字符串""==0;)

console.log(1==true); //true
console.log(0==false); //true
console.log(1=="1"); //true
console.log(0==""); //true
console.log(0==null); //false
console.log(0==undefined); //false
console.log(null==undefined); //true

2,如果一边是简单类型,另一边是引用类型(高级类型),则高级类型隐式转换成简单类型再比较。

console.log(Object==Object); //true
console.log(Object=={}); //false
console.log(0=={}); //false
console.log(0==[]); //true
console.log(Array==Array); //true
console.log(Object==Array); //false

3,如果两边都是引用类型(高级类型),则进行进行“指针地址”比较。

重点-toString()和valueOf()

很多人看到这两个方法的第一感觉就是,toString()方法将一个对象转化为字符串,valueOf方法将一个对象转化为数值。

这种想法很片面,我们通过以下两个例子来看看:

var obj={
  name:"熊仔其人",
  getName:function(){ return $(this).name; }
};
console.log(obj.toString()); //[object Object]

定义一个obj对象,调用它的toString方法,返回值是[object Object],发现并未像我们想象的一样返回值其内容的字符串表示。

var arr=[1,2,3];
console.log(arr.valueOf()); //(3) [1, 2, 3]

定义一个数组arr,调用它的valueOf方法,返回值是[1, 2, 3],发现也并未像我们想象的一样返回数值类型的表示。

其实真正的理解是这样的:调用对象的toString()方法可以将对象转化为字符串,但是如果要转化为字符串不一定是调用toString方法。

我们再看看下面的代码。

var obj= { };   
obj.valueOf=function(){ return 1; }
obj.toString=function(){ return 2; }
console.log(obj==1);  //true
var obj2= { };   
obj2.valueOf=function(){ return 2; }
obj2.toString=function(){ return 1; }
console.log(obj2==1);  //false                                      
var obj3={ };
obj3.valueOf=function(){ return []; }
obj3.toString=function(){ return 1; }
console.log(obj3==1);  //true

上述代码中我们定义了一个对象obj,obj2,定义了valueOf和toString方法的返回值,通过与1比较相等,发现其优先调用了valueOf方法。

然后定义了一个对象obj3,定义了valueOf和toString方法的返回值,通过与1比较相等,发现其调用的是toString方法。

然后我们看下面一段代码:

var obj= { };   
obj.valueOf=function(){ return 'a'; }
obj.toString=function(){ return 2; }
console.log(obj=='a');  //true
var obj2= { };   
obj2.valueOf=function(){ return 'b'; }
obj2.toString=function(){ return 'a'; }
console.log(obj2=='a');  //false

上述代码2中定义一个对象obj,通过与字符串'a'比较发现其调用的是valueOf方法。

然后对象obj2与'a'的比较返回false,发现其并未调用toString方法。

由此我们可以得出结论:

对象转化为简单类型时会优先调用valueOf方法,如果可以与简单值进行比较则会直接比较,此时不再调用toString方法。如果调用valueOf方法后无法与简单值进行比较,则会再调用toString方法,最终得到比对的结果。

但是需要注意的一点是Date对象不满足上述的规则,Date对象的toString和valueOf方法都是重新定义过的,默认会调用toString方法。

PS:js的双等号隐式转换规则

使用双等号进行比较的时候,当两个操作数类型不一样时,双等号会进行一个隐式转换,转换成相同类型再比较,以下是转换规则,在红宝书P51页都能查到。(自己总是忘记,还是感觉好记性不如烂笔头,写一写总是影响深刻)

1、有一个操作数为布尔值,将布尔值转换成数值再进行比较,false为0,true为1.

2、一个为字符串,另一个为数字。将字符串转换成数值再进行比较。

3、一个操作符为对象,另一个不是对象,先利用 valueOf() 得到对象值得类型,再按照其他规则进行比较。

总结

以上所述是小编给大家介绍的Javascript中双等号(==)隐性转换机制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
PHP+jquery+ajax实现分页
Dec 09 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
基于JavaScript实现轮播图效果
Jan 02 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
vue-resource拦截器设置头信息的实例
Oct 27 #Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 #Javascript
vue2里面ref的具体使用方法
Oct 27 #Javascript
初学者AngularJS的环境搭建过程
Oct 27 #Javascript
JavaScript中Require调用js的实例分享
Oct 27 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
Vue 打包体积优化方案小结
2020/05/20 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python里使用正则的findall函数的实例详解
2017/10/19 Python
python实现二叉树的遍历
2017/12/11 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python下简易的单例模式详解
2019/04/08 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python函数参数分类原理详解
2020/05/28 Python
详解KMP算法以及python如何实现
2020/09/18 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
实习护士自荐信
2015/03/25 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android