详解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 eval函数深入认识
Feb 21 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
js实现汉字排序的方法
Jul 23 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
Python虚拟环境venv用法详解
2020/05/25 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
高中生的自我鉴定范文
2014/01/24 职场文书
网络工程师职业规划
2014/02/10 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
土地转让协议书范本
2014/04/15 职场文书
求职信怎么写
2014/05/23 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书