JavaScript值类型和引用类型转换用法实例详解

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

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

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: "phpcn",
 url:"php.cn"
}
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值类型和引用类型转换用法实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！