【知识点】数据类型的转换(隐式和显式)

一、前言

今天一个学生问了我一个问题，噢不对，是一堆问题，看了几遍聊天记录突然不知道该从哪里回答。
干脆按照我的感觉一点一点讲吧~
请看不懂的童鞋们多看几遍

迷茫

二、显式转换（强制转换）

关于强制转换，我在之前的文章已经讲过一部分了。
一般常用的强制转有以下几种

1） 数值转换函数

parseInt和parseFloat，可以强制转换其他类型为整数或浮点数，如果遇到转换不了的，就直接转换成NaN。
parseInt:

   // parseInt()方法，官方解释，将字符串转换成一个数字整型类型
   parseInt("0.23")//Number  0
   parseInt("42.454")//Number  42
   parseInt("42.45abc4")//Number  42
   parseInt("4ab2")//Number  4
   parseInt("au3.14")//Number  NaN
   
   //看到这个有人懵逼了，不是说好的转换字符串变成数字的么，怎么会有数组
   //其实先将["1","21"]转换成字符串 “1,21”，然后parseInt  就得到 1
   //其他的类型就不举例子，可以看之前的文章，数据类型的转换
   parseInt(["1","21"])//Number  1 

parseFloat:

// parseFloat()方法，官方解释，将字符串转换成一个数字浮点类型
   parseFloat("0.23")//Number  0.23
   parseFloat("42.454")//Number  42.545
   parseFloat("42.45abc4")//Number  42.45
   parseFloat("42.00")//Number  42
   parseFloat("4ab2")//Number  4
   parseFloat("au3.14")//Number  NaN
   parseFloat(["1","21"])//Number  1

parseFloat和parseInt当然还有其他用法，比如进制转换，和本文无关，不讲~

2) 强制类型转换

就是使用Number()、String()、Boolean()函数将其他类型强制转换为数字、字符串、布尔值。
在之前的课程已经都讲解过了。这里给大家放链接，可以自行去看。
https://www.jianshu.com/p/3c9bc54948c8

3) toString()

• 返回相应值的字符串表现，MDN的说法是：返回一个表示该对象的字符串
• 重点来了：每个对象都有一个 toString() 方法，当对象被表示为文本值时或者当以期望字符串的方式引用对象时，该方法被自动调用
• 对于对象{}、Math等，toString() 返回 “[object type]”,其中type是对象类型（比如[object object]、[object Math]、[object Null]等等）。如果x不是对象，toString() 返回x应有的文本值(不是单纯的加引号，比如仔细看一下数组)。

   console.log((34).toString());//'34'
   console.log("abc".toString());//'abc'
   console.log({}.toString());//[object Object]
   console.log({"name":"lily"}.toString());//[object Object]
   console.log([].toString());//''
   console.log(["a","b",1].toString());//'a,b,1'
   console.log(["a","b",{name:"lily"}].toString());//'a,b,[object object]'
   console.log(["a","b",Math].toString());//'a,b,[object Math]'
   console.log(["a","b",undefined].toString());//'a,b,'
   console.log(["a","b",null].toString());//'a,b,'   看，其实并不是单纯的加引号，而是将其文本值取了出来
   console.log(true.toString());//'a,b,'

三、toString()和String()的区别

• toString()方法；数值、字符串、对象、布尔；都有toString方法；这个方法唯一能做的就是返回相应的字符串；其中null和undefined没有toString()方法；
• String()属于强制转换， null转换的结果为null；undefined转换的结果为undefined

四、valueOf()

• valueOf() 方法返回指定对象的原始值 (数值、字符串和布尔值)
• valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中

   console.log("--------")
   console.log((34).valueOf());// number 34
   console.log("abc".valueOf());// string 'abc'
   // console.log(null.valueOf());//null没有该方法
   // console.log(undefined.valueOf());undefined没有该方法
   console.log([].valueOf());//[]  数组类型
   console.log(true.valueOf());//true  布尔类型
   console.log([1,2,"3",{name:"lily"}].valueOf());//原数组
   console.log({}.valueOf());//{} 对象类型
   console.log({name:"lily"}.valueOf());//原对象

---

可是说了半天，到底是再说什么？？？？
刚才是基础，以下是重点

---

五、toString()和valueOf()

toString()和valueOf()这两个方法基本是不会主动的书写再代码中，而是JS 在运算的过程中自己调用

• 也就是说，当我们使用一个值显示或者计算的时候，他会自己偷偷调用toString或valueOf方法。也就是我们经常看见到隐式转换。

那既然刚才说了，它会自动偷偷调用toString或valueOf方法，我们何不自己对对象书写一个toString或valueOf方法，覆盖它原来的方法来测试呢?

//定义一个对象a
var a={}
给a写一个toString方法，覆盖它自带的toString方法
   a.toString=function () {
       console.log("toString方法被调用");
       return 10;
   }
给a写一个valueOf方法，覆盖它自带的valueOf方法
   a.valueOf=function () {
       console.log("valueOf方法被调用");
       return 20;
}

然后只要它偷偷调用这两个方法，就会有打印。
我们来试试吧~

   alert(a);//弹出10  打印toString方法被调用
   a+1;//打印valueOf方法被调用
   a+"";//打印valueOf方法被调用
   String(a);//打印toString方法被调用
   Number(a);//打印valueOf方法被调用
   Boolean(a)//打印valueOf方法被调用
   a>"5";//打印valueOf方法被调用

所以你发现了吗？
如果要求的是原始值那么就会调用valueOf，如果要求的是字符串那么就会调用toString。

• alert()弹出的是字符串，所以调用toString，所以你发现alert一个对象，都是[object object]等
• 加减乘除运算都要先使用原始值，所以要调用了valueOf的方法。

六、总结

• 基本上所有的JavaScript数据类型都有valueOf()，toString()方法，null除外，这两个方法解决了JavaScript值运算和显示的问题
• valueOf()会把数据类型转换成原始类型，也就是说原来是什么类型，转换后还是什么类型，日期类型除外
• toString()会把数据类型转换成string类型，也就是说不管原来是什么类型，转换后一律是string类型

这两个方法有意思的地方在于什么时候使用，总结如下：
1、valueOf()偏向于运算（加减乘除），toString()偏向于显示（alert）
2、强转字符串的情况下，优先调用toString()方法；强转数字的情况下优先调用valueOf()
4、正常情况下，优先调用toString()
5、在有运算操作符的情况下valueOf()的优先级高于toString()，这里需要注意的是当调用valueOf()方法无法运算后还是会再调用toString()方法

---

以下边的案例结束今天的内容吧

   //两个{}都参加运算，调用valueOf方法得到原始值
   //但是原始值还是不能参加运算，所以又调用toString方法得到'[object object]'
   console.log({}+{})//'[obeject object][obeject object]'

   // Math参加运算，调用valueof方法得到原始值
   //但是原始值不能运算，要转换成String，所以又调用toString得到[object math]
   //然后进行字符串拼接
   console.log(Math+3)//‘[object math]3’


   console.log({}+[])//'[obeject object]' []的valueOf后调用toString为空字符串
   console.log({}+"")//'[obeject object]'
   console.log([]+"")//''   空字符串
   console.log([]+3)//"3"

---

写的很仓促，有时间捋顺了会再次修改~
如有错误请指出~

拜拜，晚安