一、为什么有类型转换
- JS是动态类型语言，即在编译时并不能确定变量的数据类型，而是执行代码时确定。
- 一方面变量的类型是不确定的，另一方面进行变量运算时对于变量的数据类型却是有要求的。
- 这就导致了类型转换的出现：某些场景对变量的数据类型是有预期的，若实际类型与预期不符，就会自动转换类型
二、类型转换的原理与规则
类型转换主要通过三个函数：Number()、String()、Boolean()，分别将变量转换为数值类型、字符串类型和布尔类型。
先来一张总览图：
2.1 Number()
作用是将变量转换为数值类型。它的规则分成两部分讨论：
- 参数为原始类型
转换规则如下：
- 可以被解析为数值的字符串会转换为数值，无法被解析的转换为 NaN，空字符串转换为 0
- true 转换为 1，false 转换为 0
- null 转换为 0；undefined 转换为 NaN
- 参数为引用类型
转换步骤如下:
- 调用对象的 valueOf() 方法。若返回值为原始类型，则进行 Number() 转换；若不是原始类型，则调用对象的 toString() 方法
- 若 toString() 返回值为原始类型，则进行 Number() 转换；若不是原始类型，则直接报错
它的表现结果是：
- 若参数是包含单个数值的数组，则转换结果为该数值；
- 若参数是空数组，则转换结果为 0
- 其他情况转换结果均为 NaN
Number([3]) // 3
Number([3, 5]) // NaN
Number([]) // 0
Number({}) // NaN
Number({a: 1}) // NaN
Number(function(){}) // NaN
2.2 String()
作用是将变量转换为字符串类型。它的规则分成两部分讨论：
- 参数为原始类型 转换规则如下：
- 数值转换为相应的字符串
true转换为'true'，false转换为'false'null转换为'null'，undefined转换为'undefined'
- 参数为引用类型
转换步骤如下:
- 调用对象的 toString() 方法。若返回值为原始类型，则进行 String() 转换；若不是原始类型，则调用对象的 valueOf() 方法
- 若 valueOf() 返回值为原始类型，则进行 String() 转换；若不是原始类型，则直接报错
它的表现结果是：
- 参数为数组时均转换为字符串，用逗号连接；空数组转换为空字符串
- 参数为对象时转换为
'[object Object]' - 参数为函数时转换为
'function(){}'
2.3 Boolean()
作用是将变量转换为布尔类型。 它的转换规则很简单，只需要记住哪些值会转换为 false，除了这几个，其余都转换为 true。
转换为false的值：
- undefined
- null
- 0 （包含 -0 和 +0）
- ‘’ （空字符串）
- NaN
需要注意的是所有对象都会转换为 true
Boolean([]) // true
Boolean({}) // true
三、类型转换的分类
3.1 显式类型转换
显式类型转换是指手动调用以上几个函数来进行转换，主要为了与隐式类型转换做区分。
3.2 隐式类型转换
隐式类型转换是指在某些运算中，JavaScript 会自动转换数据类型，这种转换是自动的，是我们不可见的。
这种转换虽然是自动的，但是有依据的： 在这个场景中，运算符期望什么样的数据类型，JavaScript 就会调用相应的函数(就是以上3个函数)将其转换为预期的类型
因此，根据场景预期的数据类型，我们可以将隐式类型转换情况分为三类：
- 自动转换为布尔值
1）if 语句
let a = 1
if (a) {
console.log('将 a 转成了布尔值 true') // '将 a 转成了布尔值 true'
}
2）逻辑运算符（&&、||、!、三元表达式等 ）
let a = 1
let b = a ? '我是true' : '我是false'
console.log(b) // '我是true'
- 自动转换为字符串 1）加法运算中，跟在字符串前后的运算子会被自动转为字符串
'abc' + 'def' // 'abddef'
2 + 'abc' // '2abc'
2 + 5 + 'abc' // 7abc
'abc' + 2 + 5 // 'abc25'
- 自动转换为数值 1）加法运算中，如果没有字符串运算子，则所有运算子都会被自动转为数值
1 + true // 2
1 + null // 1
1 + undefined // NaN
2）除加法外的其他算术运算中，所有运算子都会被自动转为数值（）
2 - true // 1
2 / 'a' // NaN
2 * null // 0
3）比较运算符（除 === 和 ==）的两个运算子不全是字符串时（全是字符串会按照字典顺序比较，不会转换）
true > false // true （相当于 1 > 0）
null < false // false （相当于 0 < 0）
3 > 'a' // false （相当于 3 > NaN，任何与 NaN的比较都返回 false，包括它本身）
注意：任何与 NaN的比较都返回 false，包括它本身
4）== 相等运算符。当两个运算子的数据类型不同时，原始类型会直接调用 Number() 函数转换成数值，引用类型会先转为原始类型，再转换成数值
2 == true // false （相当于 2 == 1）
2 == 'a' // false （相当于 2 == NaN）
false == null // false
undefined == null // true
注意：undefined和null与其他类型的值比较时，结果都为false，它们互相比较时结果为true
5）一元运算符。一元运算符会将运算符后面的值转换成数值
+true // 1
-('3') // -3
+null // 0
<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。
目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里
如文章有错误或表述不清晰，欢迎各位留言反馈~~
