简单介绍JavaScript数据类型之隐式类型转换


Posted in Javascript onDecember 28, 2015

JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object。object是引用类型,其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等。。

typeof '11' //string    
typeof(11)  //number
'11' < 4   //false

本章节单独介绍一下javascript中的隐式数据类型转换,对于它的良好掌握,在实际应用能够简化很多操作。

看如下代码实例:

var arr = [5];
console.log(arr+"");

上面的代码就是将数组隐式转换为字符串的一个操作,是不是要比下面的方式要简单不少:

var arr = [5];
console.log(arr.toString());

像上面类似的隐式数据类型转换在实际编码中应用很多,下面进入正题。

一.值类型之间的数据类型转换:

javascript中的数据类型可以参阅javascript数据类型详解一章节。

(1).数字和字符串使用+运算符:

数字和字符串如果使用+运算符进行操作,那么会将数字先转换为字符串,然后进行字符串连接操作:

var antzone = "antzone";
var num = 8;
console.log(antzone+num);

(2).布尔值参与的+运算符操作:

如果有布尔型参与,那么首先会将布尔值转换为对应的数字或者字符串,然后再进行相应的字符串连接或者算数运算。

var bool = true;
var num = 8;
console.log(bool + num);

上面的代码是先将true转换为数字1,然后再进行算数加运算。

var bool = true;
var num = "8";
console.log(bool + num);

上面的布尔值会被转换为对应的字符串形式"true",然后再进行字符串连接。

(3).减法操作:

如果进行减法操作,那么两个操作数都会先被转换为数字,然后在进行算数运算:

var bool = true;
var num = "8";
console.log(bool - num);

true会被转换为数字1,字符串"8"会被转换为数字8,然后进行算术运算。

乘,除,大于,小于跟减的转换也是一样,就不再举例子了。

(4).==等性运算:

undefined和null比较特殊,它们两个使用==运算符返回值是true。

console.log(undefined==null);

其他值类型进行比较的时候都会将运算数转换为数字

console.log("3"==3);

上面的代码会将字符串"3"转换成数字,然后再进行比较。

console.log("1"==true);

上面的代码会分别将"1"和true转换成数字,然后进行比较。

二.引用类型转值类型:

引用类型(对象)转换为值类型则要复杂很多,下面分布展开介绍。

对象继承的两个方法可以帮助我们实现对象到值类型的转换功能:

(1).toString()方法。

(2).valueOf()方法。

通常情况下我们认为,将一个对象转换为字符串要调用toString()方法,转换为数字要调用valueOf()方法,但是真正应用的时候并没有这么简单,看如下代码实例:

var obj = {
 webName: "三水点靠木",
 url:"softwhy.com"
}
console.log(obj.toString());

从上面的代码可以看出,toString()方法并没有将对象转换为一个能够反映此对象的字符串。

var arr = [1, 2, 3];
console.log(arr.valueOf());

从上面的代码可以看出,valueOf()方法并没有将对象转换为能够反映此对象的一个数字。

var arr = [1, 2, 3];
console.log(arr.toString());

数组对象的toString()方法能够将数组转换为能够反映此数组对象的字符串。

总结如下:

(1).有些对象只是简单继承了toString()或者valueOf()方法,比如第一个例子。
(2).有些对象则不但是继承了两个方法,而且还进行了重写。

所以有些对象的方法能够达成转换成字符串或者数字的目标,有些则不能。

调用toString()或者valueOf()将对象转换成字符串或者数字的规则如下:

调用toString()时,如果对象具有这个方法,则调用此方法;如果此方法返回一个值类型数据,那么就返回这个值类型数据,然后再根据所处的上下文环境进行相关数据类型转换。如果没有toString(),或者此方法返回值并不是一个值类型数据,那么就会调用valueOf()(如果此方法存在的话),如果valueOf()返回一个值类型数据,那么再根据所处的上下文环境进行相关的数据类型转换。

进一步说明:

(1).上面介绍了通常默认情况下valueOf()和toString()方法的作用(将对象转换为数字或者字符串),但是需要注意的是,这并不是硬性规定,也就是说并不是valueOf()方法必须要返回数字或者toString()方法必须要转换为字符串,比如简单继承的这两个方法就无法进行实现转换为数字和字符串的功能,再比如,我们可以自己称谢这两个方法,返回值也没有必要是数字或者字符串。

(2).还有需要特别注意的一点就是,很多朋友认为,转换为字符串首先要调用toString()方法, 其实这是错误的认识,我们应该这么理解,调用toString()方法可以转换为字符串,但不一定转换字符串就是首先调用toString()方法。

看如下代码实例:

var arr = [];
arr.valueOf = function () { return "1"; }
arr.toString = function () { return "2"; }
console.log(arr + "1");

上面的代码中,arr是要被转换为字符串的,但是很明显是调用的valueOf()方法,而没有调用toString()方法。有些朋友可能会有这样的质疑,难道[2]这样的数字转换成字符串"2",不是调用的toString()方法吗。

代码如下:

var arr = [2];
console.log(arr + "1");

其实过程是这样的,首先arr会首先调用valueOf()方法,但是数字的此方法是简单继承而来,并没有重写(当然这个重写不是我们实现),返回值是数组对象本身,并不是一个值类型,所以就转而调用toString()方法,于是就实现了转换为字符串的目的。

总结如下:

大多数对象隐式转换为值类型都是首先尝试调用valueOf()方法。但是Date对象是个例外,此对象的valueOf()和toString()方法都经过精心重写,默认是调用toString()方法,比如使用+运算符,如果在其他算数运算环境中,则会转而调用valueOf()方法。

代码实例如下:

var date = new Date();
console.log(date + "1");
console.log(date + 1);
console.log(date - 1);
console.log(date * 1);

以上内容是小编给大家介绍的JavaScript数据类型之隐式类型转换的全部内容,希望大家喜欢。

Javascript 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
jquery创建div 实现代码
Apr 27 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 #Javascript
Bootstrap实现响应式导航栏效果
Dec 28 #Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 #Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 #Javascript
Bootstrap实现默认导航栏效果
Sep 21 #Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 #Javascript
AngularJS进行性能调优的7个建议
Dec 28 #Javascript
You might like
php下Memcached入门实例解析
2015/01/05 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
php实现微信支付之现金红包
2018/05/30 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
地球一小时宣传标语
2014/06/24 职场文书
家长对孩子的寄语
2015/02/26 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
Python内置数据结构列表与元组示例详解
2021/08/04 Python