一起来了解JS的隐式转换吧

这是我参与更文挑战的第18天，活动详情查看： 更文挑战

前言

大家都知道，js是一个弱类型语言，所以它的隐式转换太神奇了，跟孙悟空的72变一样，变化多端，不管你是工作几年的老油条，还是初入职场的萌新，稍有不慎，可能你就踩坑了。这篇文章尝试把这个梳理一遍，争取能讲清楚，如果有问题，欢迎指正。

数据类型

我们先来了解js的数据类型有哪些？

基本类型： Number, Boolean, String,Null, Undefined, Symbol(新引入，这里暂不做讨论), BigInt(新引入，这里暂不做讨论)
引用类型： Object(Function,Array，Date等都属于Object)

隐式转换

主要场景

发生隐式转换主要有==宽松相等和if判断， 比较运算符（>,<）, 算术运算符（+，-等）等场景

转换规则

转换规则主要有这么几类

• 转原始值（ToPrimitive）
• 转字符串（ToString）
• 转数字 (ToNumber)
• 转布尔值 (ToBoolean)

下面一个个来讲

转原始值（ToPrimitive）

对象类型转原始值会遵循一下规则：

1. 先调用对象的valueOf方法，如果valueOf返回的是原始值，则返回该值；
2. 如果不是原始值，则再调用toString方法，如果返回的是原始值，则返回该值；
3. 如果不是，则报错。

补充：
在valueOf方法和toString方法没有被改写的情况下
数组会返回字符串，逗号分隔，空数组会返回''，如果元素是null或者undefined，则会把该元素当作空字符串''
函数会返回该函数的字符串形式
对象会返回'[object Object]'

例子：

var obj = {
   valueOf () {return '答案'},
   toString () {return 'cp3' }
}
console.log(obj == '答案') // true

var obj = {
   valueOf () {return {}},
   toString () {return '答案cp3'}
}
console.log(obj == '答案cp3') // true


console.log([1,2,3] == '1,2,3') // true
console.log([] == '') // true
console.log(function a () {} == 'function a () {}') // true
console.log({} == '[object Object]') // true
复制代码

转字符串（ToString）

别的类型转字符串的规则如下：

• Boolean类型： true，false转成 'true'，'false'
• Number类型： 0，1转成 '0'，'1'
• Object类型: 遵循上面的对象转原始值流程；
• Null类型: null 转成 'null'
• Undefined类型: undefined 转成 'undefined'

例子如下：

console.log(String(false)) // 'false'
console.log(String(123)) // '123'
console.log(String({})) // '[object Object]'
console.log(String(null)) // 'null'
console.log(String(undefined)) // 'undefined'
复制代码

转数字 (ToNumber)

• Boolean类型： true，false转成 1，0
• String类型：数字字符串转成数字，空字符串转成0, 其它字符串则是NaN
• Object类型: 遵循上面的对象转原始值流程；
• Null类型: null 转成 0
• Undefined类型: undefined 转成 NaN

例子如下：

console.log(Number(false)) // 0
console.log(Number('123')) // 123
console.log(Number({})) // NaN 对象会先按照上面转原始值流程，转成字符串后再用字符串的方法，最后得到NaN
console.log(Number([1])) // 1
console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN
复制代码

转布尔值 (ToBoolean)

• ''
• 0
• false
• null
• undefined
• NaN

这六个都是转布尔值是转成false，其它都是转成true

例子如下：

console.log(Boolean('')) // false
console.log(Boolean(0)) // false
console.log(Boolean(false)) // false
console.log(Boolean(null)) // false
console.log(Boolean(undefined)) // false
console.log(Boolean(NaN)) // false
console.log(Boolean('123')) // true
console.log(Boolean({})) // true
console.log(Boolean([1])) // true
复制代码

总结

以上就是我总结的隐式转换的一些知识点，希望能帮助你们理解～