详解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 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
在小程序开发中使用npm的方法
Oct 17 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
php建立Ftp连接的方法
2015/03/07 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
jQuery Position方法使用和兼容性
2017/08/23 jQuery
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
几个人围成一圈的问题
2013/09/26 面试题
小学教师的个人自我鉴定
2013/10/26 职场文书
考试退步检讨书
2014/01/15 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Django与数据库交互的实现
2021/06/03 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
pycharm无法安装cv2模块问题
2022/05/20 Python