简单介绍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 相关文章推荐
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 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 邮件发送问题解决
2014/03/22 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Ruby元编程基础学习笔记整理
2016/07/02 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python之文件读取一行一行的方法
2018/07/12 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
法律专业自我鉴定
2013/10/03 职场文书
运动会通讯稿50字
2014/01/30 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
地道战观后感300字
2015/06/04 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书