详解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代码超级推荐
Apr 05 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 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代码审核的详细介绍
2013/06/13 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
PHP实现简易图形计算器
2020/08/28 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
详解Vue中watch的详细用法
2018/11/28 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
JS实现打字游戏
2019/12/17 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
Python中字典的基础知识归纳小结
2015/08/19 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
预备党员思想汇报范文
2014/01/11 职场文书
大学军训感言1000字
2014/02/25 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
机动车登记业务委托书
2014/10/08 职场文书
美术教师个人工作总结
2015/02/06 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
工作失职自我检讨书
2015/05/05 职场文书
辞职信格式范文
2015/05/13 职场文书
微观世界观后感
2015/06/10 职场文书
七年级作文之游记
2019/12/11 职场文书
golang中的空接口使用详解
2021/03/30 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫