详解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 相关文章推荐
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue和webpack安装命令详解
Jun 15 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
微信小程序实现展示评分结果功能
Feb 15 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中用正则表达式清除字符串的空白
2011/01/17 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
应届生骨科医生求职信
2013/10/31 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
体现团队精神的口号
2014/06/06 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
交通事故被告代理词
2015/05/23 职场文书
CAD实训总结范文
2015/08/03 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
SpringRetry重试框架的具体使用
2021/07/25 Java/Android