详解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的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 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
html中select语句读取mysql表中内容
2006/10/09 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
PHP仿盗链代码
2012/06/03 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python argv用法详解
2016/01/08 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
优秀少先队工作者事迹材料
2014/05/13 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
再谈python_tkinter弹出对话框创建
2022/03/20 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python