详解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的控制tabs打开的数量的代码
Oct 17 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
Vue实现选择城市功能
May 27 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
eslint 的三大通用规则详解
May 16 Javascript
Vue.js实现可编辑的表格
Dec 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
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP仿tp实现mvc框架基本设计思路与实现方法分析
2018/05/23 PHP
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
jquery使用经验小结
2015/05/20 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Sanic框架流式传输操作示例
2018/07/18 Python
Python异常处理操作实例详解
2018/08/28 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
学生出入校管理制度
2014/01/16 职场文书
眼镜促销方案
2014/03/15 职场文书
高中班主任评语大全
2014/04/25 职场文书
商场租赁意向书
2014/07/30 职场文书
远程培训的心得体会
2014/09/01 职场文书
2014年食堂工作总结
2014/11/20 职场文书
外国人来华邀请函
2015/01/31 职场文书
提档介绍信范文
2015/10/22 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js