详解JavaScript中双等号引起的隐性类型转换


Posted in Javascript onMay 30, 2016

引子

if语句应该是程序员用的比较多的语句,很多时候都要进行if判断,if语句一般用双等号来判断前后两个元素是否是一致的,假如是一致,那么返回是true,然后执行下面的语句,否则,执行别的语句。本文所说的隐性类型的转换,说的是==引起的转换。举个简单的例子,双等号不是全等号,全等号是“===”三个等号,语句"1"==1,那么一般情况下是前面的字符串”1“转换为数字1,然后进行比较。通过这个例子应该了解了什么是隐性类型的转换了吧!

隐性类型转换步骤

一、首先看双等号前后有没有NaN,如果存在NaN,一律返回false。

二、再看双等号前后有没有布尔,有布尔就将布尔转换为数字。(false是0,true是1)

三、接着看双等号前后有没有字符串, 有三种情况:

1、对方是对象,对象使用toString()或者valueOf()进行转换;
2、对方是数字,字符串转数字;(前面已经举例)
3、对方是字符串,直接比较;
4、其他返回false
四、如果是数字,对方是对象,对象取valueOf()或者toString()进行比较, 其他一律返回false

五、null, undefined不会进行类型转换, 但它们俩相等

上面的转换顺序一定要牢记,面试的时候,经常会出现类型的问题。

.toString()方法和.valueOf()方法数值转换

通常情况下我们认为,将一个对象转换为字符串要调用toString()方法,转换为数字要调用valueOf()方法,但是真正应用的时候并没有这么简单,看如下代码实例:

var obj = {
 webName: "haorooms前端博客",
 url:"3water.com"
}
console.log(obj.toString()); //[object Object]

同理,我们再看valueOf()方法:

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

从上面的代码可以看出,valueOf()方法并没有将对象转换为能够反映此对象的一个数字。相反,我们用toString()

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

注:很多朋友认为,转换为字符串首先要调用toString()方法, 其实这是错误的认识,我们应该这么理解,调用toString()方法可以转换为字符串,但不一定转换字符串就是首先调用toString()方法。

我们看下下面代码:

var arr = {};
arr.valueOf = function () { return 1; }
arr.toString = function () { return 2; }
console.log(arr == 1);//true

var arr = {};
arr.valueOf = function () { return []; }
arr.toString = function () { return 1; }
console.log(arr == 1);//true

上面代码我们可以看出,转换首先调用的是valueOf(),假如valueOf()不是数值,那就会调用toString进行转换!

var arr = {};
arr.valueOf = function () { return "1"; }
arr.toString = function () { return "2"; }
console.log(arr == "1");//true

假如"1"是字符串,那么它首先调用的还是valueOf()。

var arr = [2];
console.log(arr + "1");//21

上面的例子,调用的是toString();因为arr.toString()之后是2。

转换过程是这样的,首先arr会首先调用valueOf()方法,但是数字的此方法是简单继承而来,并没有重写(当然这个重写不是我们实现),返回值是数组对象本身,并不是一个值类型,所以就转而调用toString()方法,于是就实现了转换为字符串的目的。

小结

大多数对象隐式转换为值类型都是首先尝试调用valueOf()方法。但是Date对象是个例外,此对象的valueOf()和toString()方法都经过精心重写,默认是调用toString()方法,比如使用+运算符,如果在其他算数运算环境中,则会转而调用valueOf()方法。

var date = new Date();
console.log(date + "1"); //Sun Apr 17 2014 17:54:48 GMT+0800 (CST)1
console.log(date + 1);//Sun Apr 17 2014 17:54:48 GMT+0800 (CST)1
console.log(date - 1);//1460886888556
console.log(date * 1);//1460886888557
Javascript 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
vue-router传参用法详解
Jan 19 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
JavaScript中的操作符类型转换示例总结
May 30 #Javascript
jQuery中的通配符选择器使用总结
May 30 #Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 #Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 #Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 #Javascript
JS检测移动端横竖屏的代码
May 30 #Javascript
BootStrap中Tab页签切换实例代码
May 30 #Javascript
You might like
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Python类及获取对象属性方法解析
2020/06/15 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
年终总结会主持词
2014/03/25 职场文书
中学清明节活动总结
2014/07/04 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2016高考感言
2015/08/01 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js