JS中你不知道的显式类型转换和隐式类型转换

JavaScript的显式类型转换和隐式类型转换

显式类型转换

显式类型转换顾名思义，就是他的转换的类型你一看就可以看出来是什么类型，坦坦荡荡，真君子

显式类型转换在 JavaScript 中给我们提供了一些方法，我们一起来通过一些案例来测试一下

Number 转为数值型

Number 方法会将传递进入的值转为数值型并返回

1.我们可以先来看一下几个简单案例，如下：

var n1 = Number('111')
var n2 = Number('abc')
var n3 = Number(true)
var n3 = Number(false)
var n4 = Number('')
var n5 = Number(null)
var n6 = Number(undefined)

console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: NaN
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 1
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 0
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: 0
console.log('类型是:', typeof n6, '值为:', n6) // 类型是: number 值为: NaN

console.log(Number('11abc'))//NaN
console.log(Number('abc111'))//NaN

2.上述的案例我们可以说一下字符串 abc 和 undefined 转为的值为 NaN 的情况，是因为通过 Number 方法转换的值一定是一个数值型，但是如果无法用数字表达出来就是 NaN，但是一定是数值型，NaN也是一个数值型，因为not a number能不是一个数值型吗

3.其余的应该就没有什么好疑惑的了

parseInt 整形

parseInt 将一个值转为整数

1.案例如下：

var n1 = parseInt('1111')
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 1111

var n2 = parseInt('123abc')
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 123

var n3 = parseInt('123.567')
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 123

var n4 = parseInt(false)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: NaN

var n5 = parseInt('abc111')
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN

console.log(parseInt(null))//NaN
console.log(parseInt(undefined))//NaN
console.log(parseInt(true))//NaN
console.log(parseInt('11 22'))//11
console.log(parseInt(' 11 22'))//11
console.log(parseInt(' 1122 '))//1122

2.从这里我们可以发现一点区别，false 在 Number 中可以转为数值 0，在 parseInt 中则不可以，这是因为 parseInt 主要是将一个值转为整数，而 Number 是会将一个值尽最大可能的转为数值型，并且字符串中的数字前面不管有多少空格都能识别出数字，但是中间有空格就不行

3.parseInt 遇见一个数字加其他字符结合的字符串，如果前面部分是数字的话，就会从最开始截止到首次出现非数字的字符为止，将这一部分截取出来转为整数，所以如果开头就是非数字的字符串则无法转换

4.当然这不是 parseInt 方法的全部，这个方法还具备第二个参数，这个参数就比较有意思了，radix(基底)，我们可以先来看一下案例，如下：

var n1 = parseInt('123', 16)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 291

5.第二个参数 16 的意思就是将 123 以 十六进制为基底转换为 十进制，如果想测试一下这个 291 是否正确，我们可以计算一下，十进制转为十六进制，对16进行取余来验算，首先第一次 291 / 16 余数为 3，商为 18，在用 18 除以 16，商为 1，余数为 2，1 除以 16 余数为 1，商为 0，所以到此结束运算，这些应该都很好理解，将余数顺序倒转取值就是 123，计算如图：

6.如果还不确定我们可以自己换算一下以 123 的十六进制换算为十进制，根据基数乘以指数的n次方来换算，基数就是 123，16 进制指数就是 16，这个次方就是基数的位置从 0 开始，类似索引，我们就可以得出一个式子，1 * 16^2 + 2 * 16^1 + 3 * 16^0，除 0 以外任何数的 0 次方都等于 1，计算结果为 291

7.既然都讲到这里了，那不说一下十六进制的 A-F 好像也说不过去啊，所以大概介绍一下，这个 A-F 就表式 10-15，为什么这么设计呢？因为十六进制采用的数位满 16 才进位，每个数位都会有 0-15 的范围，但是阿拉伯数字只有 0-9 是一位的，所以为了不引起混乱使用 A-F 代替 11- 15，更多的进制知识有兴趣的可以自己去了解一下

parseFloat

parseFloat 解析一个字符串，返回一个浮点数，通俗一点说就是小数，规则和 parseInt 相差不多

案例如下：

var n1 = '111.234'
n1 = parseFloat(n1)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: number 值为: 111.234

var n2 = '11 22'
n2 = parseFloat(n2)
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: number 值为: 11

var n3 = ' 11 '
n3 = parseFloat(n3)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: number 值为: 11

var n4 = '88 hello'
n4 = parseFloat(n4)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: number 值为: 88

var n5 = 'xx22'
n5 = parseFloat(n5)
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: number 值为: NaN

console.log(parseFloat(null))//NaN
console.log(parseFloat(undefined))//NaN

2.这个大家自行测试吧，没有太多特殊的地方

String 转为字符串

这个会将所有的值转为字符串，这个应该不难，很好理解，所以简单演式一下吧

1.案例如下：

var n1 = String(1111)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 1111

var n2 = String(false)//true也一样
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: string 值为: false

var n3 = String(null)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: string 值为: null

var n4 = String(undefined)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: string 值为: undefined

2.String 这个没什么好解释的，这个方法就是这么霸道，进入即同化，有那么点小说顶级功法味了

Boolean 布尔值

这个大家应该都很熟悉了，除开以下六个值都是 true

1.案例如下：

var n1 = Boolean(0)
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: Boolean 值为: false

var n2 = Boolean('')
console.log('类型是:', typeof n2, '值为:', n2) // 类型是: Boolean 值为: false

var n3 = Boolean(null)
console.log('类型是:', typeof n3, '值为:', n3) // 类型是: Boolean 值为: false

var n4 = Boolean(undefined)
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: Boolean 值为: false

var n5 = Boolean(NaN)
console.log('类型是:', typeof n5, '值为:', n5) // 类型是: Boolean 值为: false

var n6 = Boolean(false)
console.log('类型是:', typeof n6, '值为:', n6) // 类型是: Boolean 值为: false

2.好了，其余都是无脑的 true，一路搜哈

toString 转为字符串

这个方法的使用方式有一点区别，不是直接传入值，而是那个值需要转为字符串就直接调用即可

1.案例如下：

var n1 = 111
n1 = n1.toString()
console.log('类型是:', typeof n1, '值为:', n1) // 类型是: string 值为: 111

var n2 = null
// n2 = n2.toString() // 报错 error

var n3 = undefined
// n3.toString() // 报错 error

var n4 = true
n4.toString()
console.log('类型是:', typeof n4, '值为:', n4) // 类型是: boolean 值为: true

2.是不是发现不一样了，先来说一下为什么布尔值调用的话是布尔值，这是为什么呢？首先一个对象原型身上的 toString 方法如果调用会返回一个 "[object xxx]"格式的字符串，xxx 表式数据的类型名称，也因此这个常常被用作判断数据类型，而且非常精准，所以显然，这里是 Boolean 身上重写了一个 toString 方法，所以会输出的值还是没有转成字符串，下面对于各种数据的类型的 toString 方法做一个介绍，如果不理解原型链的知识不明白这个继承和重写的，可以选择记下来，如下：

3.null 和 undefined 身上没有 toString 方法，所以会导致报错，为什么没有就是因为原型这一块的原因，不理解的可以自行了解相关知识

4.除了上面介绍的之外，这个 toString 也可以接收一个参数，而且有意思的是他和 parseInt 刚好相反，toString 方法也可以接收一个进制参数，以十进制为基底转为目标进制，我们可以写一些案例测试一下，如下：

var n1 = 111
console.log(typeof n1.toString(8), n1.toString(8)) // string 157

5.至于十进制换算八进制的过程也和转换十六进制一样的，使用一样的取余方法，111 / 8 得到 13…7，13 / 8 得到 5…1，1 / 8 得到 0…1，倒转取值就是 157，这里不在展式图形的验算过程了，相信还是非常好理解的

隐式类型转换

隐式的类型转换其实本质上也是在内部运行了显式转换，只是没有告知我们，所以叫做隐式类型转换，因此要掌握隐式类型转换就要必须掌握显式类型转换

isNaN

1.这个方法相信大家都不陌生了，就是判断一个值是否是一个 NaN，返回一个布尔值，我们先看几个案例，如下：

var n1 = '111'
console.log(isNaN(n1)) // false

var n2 = 111
console.log(isNaN(n2)) // false

var n3 = 'aaa'
console.log(isNaN(n3)) // true

var n4 = NaN
console.log(isNaN(n4)) // true

var n5 = null
console.log(isNaN(n5)) // false

var n6 = undefined
console.log(isNaN(n6)) // true

2.这里我就讲一下 null 和 undefined 为什么是这个结果，isNaN 在内部是调用一次 Number() 之后再判断这个值是否为 NaN，null 被 Number 转换一次就是 0，0 不为 NaN，返回 false，undefined 被 Number 转为为 NaN，因此返回 true，其余的先使用 Number 转换一次在使用 NaN 判断应该就和明了了

数学运算符

1.先看一些 ++ 运算符的案例，在分析，如下：

var n1 = '111'
n1++
console.log(n1) // 112

var n2 = null
n2++
console.log(n2) // 1

var n3 = undefined
n3++
console.log(n3) // NaN

2.++ 运算符在计算之前，就会调用 Number 方法先把值转为数值，经过这一层转换在计算 111 自增为 112，null 转为 0，自增为 1，undefined 转为 NaN，自增运算还是 NaN

3.然后其余的 符号也是差不多的，来看一些案例，如下：

var n1 = '111'
n1--
console.log(typeof n1, n1) // number 110

var n2 = 'abc'
n2 = +n2
console.log(typeof n2, n2) // number NaN

var n3 = null
n3 = +n3
console.log(typeof n3, n3) // number 0

var n4 = '88'
n4 = -n4
console.log(typeof n4, n4) // number -88

var n5 = '99'
n5 = +n5
console.log(typeof n5, n5) // number 99

4.还是一样先执行 Number 方法，所以因此我们经常会利用在一个变量前面加上 + 来将其转为数值型

5.还可以在来看一下其他用法，如下：

var n1 = '5'
var n2 = 20

var n3 = n2 - n1
console.log(typeof n3, n3) // number 15

var n4 = n1 * n2
console.log(typeof n4, n4) // number 100

var n5 = n2 / n1
console.log(typeof n5, n5) // number 4

var n6 = n2 + n1
console.log(typeof n6, n6) // string 205

6.这个 + 号比较特殊，当加号两侧有一个值是字符串的时候，就会调用 String 方法把两个值都转为字符串，然后在拼接，其余的还是调用 Number

&& || !

1.这三个就比较简单了，! 就是会调用 Boolean 将一个值转为 布尔值，&& 和 || 则是转为 布尔值 比较，但是返回的值不是这个布尔值，是本身。

只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值；

只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值；

只要“||”前面为false，不管“||”后面是true还是false，都返回“||”后面的值；

只要“||”前面为true，不管“||”后面是true还是false，都返回“||”前面的值。

如下：

var test1 = null
console.log(!test1) // true

var test2 = 111
console.log(!test2) // false

var test3 = 'abc'
console.log(!!test3) // true

var n1 = 0
var n2 = 111

var n3 = n1 && n2
console.log(n3) // 0

var n4 = n1 || n2
console.log(n4) // 111

1&&3 //3
1&&0 //0
3&&1 //3
3&&0 //3
0&&3 //3

2.上述的案例应该一眼就可以明白了，因此如果要将一个值转为布尔值，且这个布尔值不取反，可以使用 !! 进行转换，当然一般 ! 情况比较多，&& 和 || 的规则就不过多介绍了

<、 > 、<=、 >=、 == 、!=

1.这个也是进行比较，不过如果存在数字，就会先调用 Number 方法，在进行比较,如下：

var n1 = 111
var n2 = '222'
console.log(n1 > n2) // false
console.log(n1 < n2) // true
console.log(n1 <= n2) // true
console.log(n1 >= n2) // false

2.不过如果两个都是字符串类型，比较的就是 ASCII 码值

3.== 和 != 也存在隐式类型转换，如下：

var n1 = 111
var n2 = '222'
console.log(n1 == n2) // false

var n3 = '1'
var n4 = 1
console.log(n3 == n4) // true

var n5 = true
var n6 = 0
console.log(n5 == n6) // false

4.也因为这个可以发现一些比较有意思的案例，如下：

console.log(false > true) // false

console.log(1 > 2 > 3) // false

console.log(10 > 7 < 3) // true

5.false 经过 Number 转换得到 0，true 转换得到 1，0 > 1 比较为 false

6.1 > 2 得到 false，false 经过 Number 转换得到 0，0 > 3 比较得到 false

7.10 > 7 得到 true，true 经过 Number 转换得到 1，1 < 3 比较得到 true

8.通过这个案例可以看到比较是依次比较的，因此无法直接通过两个比较判断一个一个数是否处于某个区间，如下：

var n = 0
var res = null
if (-1 < n < 1) {
    
    
	res = '在 -1 ~ 1 区间'
} else {
    
    
	res = '不在 -1 ~ 1 区间'
}
console.log(res) // 不在 -1 ~ 1 区间

9.再来看一个案例，如下：

console.log(undefined < 0) // false   Number(undefined)=NaN
console.log(undefined > 0) // false
console.log(undefined == 0) // false

console.log(null < 0) // false   Number(null)=0
console.log(null > 0) // false
console.log(null == 0) // false

console.log(null == undefined) // true

10.这部分为什么是这些值，没有为什么，他们是系统定义的，生来如此，记住这些特殊的值就好了\

11.当然还有一个自己不等于自己的 NaN，如下：

console.log(NaN == NaN) // false
console.log(NaN === NaN) //false

12.所以在进行业务开发的时候，一般会使用全等 === 和 !== 来判断

好啦就先讲到这里吧，来都来了点歌爱心收藏一下吧~~~