详解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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
python实现感知器算法详解
2017/12/19 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python虚拟环境完美部署教程
2019/08/06 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
新闻专业个人求职信
2013/12/19 职场文书
教师求职信
2014/06/17 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
python - asyncio异步编程
2021/04/06 Python