详解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代码格式化和语法着色V2
Oct 14 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
js给selected添加options的方法
May 06 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 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实现执行定时任务
2015/12/21 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
python适合做数据挖掘吗
2020/06/16 Python
Clarks英国官方网站:全球领军鞋履品牌
2016/11/26 全球购物
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
公司司机岗位职责
2014/02/07 职场文书
心理健康日活动总结
2014/05/08 职场文书
2016春节慰问信范文
2015/03/25 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
Elasticsearch 聚合查询和排序
2022/04/19 Python