详解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 相关文章推荐
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
php类
2006/11/27 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
详解JavaScript的内置对象
2016/12/07 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python操作oracle的完整教程分享
2018/01/30 Python
简单实现python聊天程序
2018/04/01 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python PyQt5整理介绍
2020/04/01 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
幼师自荐信
2013/10/26 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
欢度春节标语
2014/07/01 职场文书
村委会贫困证明范本
2014/09/17 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
奖金申请报告模板
2015/05/15 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
python如何将mat文件转为png
2022/07/15 Python