详解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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
简单理解vue中Props属性
Oct 27 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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/10/09 PHP
php&java(一)
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
PHP伪造referer实例代码
2008/09/20 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
如何提高MySql的安全性
2014/06/19 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
计算机大学生的自我评价
2013/10/15 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
公司员工离职证明书
2014/10/04 职场文书
企业年检委托书范本
2014/10/14 职场文书