一文带你了解JavaScript的隐式类型转换
在了解隐式类型转换之前，你需要知道JavaScript的数据类型、数据类型之间的相互转换（强制/显示类型转换）。
JavaScript的数据类型
在JS中，数据类型可以分为：
- 简单数据类型（Number、String、Boolean、undefined、null）
- 复杂数据类型(Function、Obiect、Array)
JavaScript的显示转换
一般数据类型转换，通常指的是"简单数据类型"之间的相互转换。
以下的这种转换也叫"显示转换"、“强制转换”。
- 其他 转 Number
- 其他 转 String
- 其他 转 Boolean
其他转Number
语法：Number() parseInt() parseFloat()
- String ==> Number
// 说明：Number() 用于其他任意数据类型，parseInt()、parseFloat() 一般用于纯数字字符串
// 1 纯数字字符串
var str1 = '1234567' // 字符串类型
Number(str1) // 1234567 数值类型
// 2 非纯数字字符串 [记住结果是NaN]
var str2 = '1234567abcd'
Number(str2) // NaN (not a number) 但却是数值类型
// 3 纯数字的带小数点的字符串 parseInt()、parseFloat()
var str3 = '123456.789'
Number(str3) // 123456.789 数值类型
parseInt(str3) // 123456 仅保留整数部分，数值类型
parseFloat(str3) // 123456.789 即保留整数部分，也保留小数部分，数值类型
- Boolean ==> Number
// Boolean 值有两种：true false
var b1 = true
var b2 = false
Number(b1) // 1
Number(b2) // 0
// 若布尔值结果为 true会转为1，false会转为0
- undefined ==> Number
var num // 声明一个变量未赋值，结果是undefined
Number(num) // NaN [记住这种特殊情况]
- null ==> Number
// null 表示空 也就是没有
var m = null
Number(m) // 0
其他转String
语法：String() toString()
- Number ==> String
// 直接转为纯数字字符串 String()
var num1 = 1234567
var num2 = 1234567.89
String(num1) // '1234567' 字符串类型
String(num2) // '1234567.89' 字符串类型
// 转为xx进制的字符串 toString(几进制)
// 转为二进制
num1.toString(2) // 100101101011010000111
num1.toString(2) // 100101101011010000111.11100011110101110000101000111101
// 转为十六进制
num1.toString(16) // 12d687
num2.toString(16) // 12d687.e3d70a3d
- Boolean ==> String
// 布尔值两种均可使用，但不会转为xx进制
var b1 = true
var b2 = false
String(b1) // "true"
b2.toString() // "false"
- undefined ==> String
// 只能使用 String()
var n // 变量定义未赋值，结果是undefined
String(n) // "undefined"
- Null ==> String
// 只能使用 String()
var n = null // 将变量赋值为null 代表为空
String(n) // "null"
其他转Boolean
语法：Boolean()
- Number ==> Boolean
// 数字0
var num1 = 0
Boolean(num1) // false
// NaN
var n
var num2 = Number(n) // NaN
Boolean(num2) // false
// 其他数字
var num3 = 123.456
Boolean(num3) // true
- String ==> Boolean
var str1 = "" // 空字符串
var str2 = "hell0 world" // 非空字符串
Boolean(str1) // false
Boolean(str2) // true
- undefined ==> Boolean
var m
Boolean(m) // false
- Null ==> Boolean
var m = null
Boolean(m) // false
JavaScript的隐式转换
隐式转换一般会发生在JavaScript的运算时，所以在了解之前，你需要知道关于运算符的相关知识。
在JS中运算符一般分为：
- 一元运算符
- 二元运算符，隐式转换一般发生在二元运算符中
- 三元运算符
一元运算符
一般也叫自增自减运算符，如：i++ i–，也分为前、后自增/自减
- 前自增/自减：++i --i
- 后自增/自减：i++ i–
- 区别：前者是先自增/自减，再使用；后者是先使用，再自增/自减
/*
i++ 相当于 i = i+1
在运算时，有几个值需要关注
+ i自身的值
+ i++后的变化(表达式的值)
+ 当前项的值
*/
举个例子：
var b = -3
console.log(--b + b-- + b++ + b + --b + ++b); // -26
表达式： --b + b-- + b++ + b + --b + ++b
b的值： -3 -4 -5
表达式的值：-4 -5
当前项的值：
总结：
+ 最后运算求和，使用的是当前项的值累加
+ 前置时，当前项的值 = 表达式的值
+ 后置时，当前项的值 = b的值
分析：
/*
起初，b的值是-3
--b 先自减，再使用 当前项的值为：-4 表达式的值：-4 运算后b的值：-4
b-- 先使用，再自减 当前项的值为：-4 表达式的值：-5 运算后b的值：-5
b++ 先使用，再自增 当前项的值为：-5 表达式的值：-4 运算后b的值：-4
b 直接使用 当前项的值为：-4 表达式的值：-4 运算后b的值：-4
--b 先自减，再使用 当前项的值为：-5 表达式的值：-5 运算后b的值：-5
++b 先自增，再使用 当前项的值为：-4 表达式的值：-4 运算后b的值：-4
结果是当前项的值相加：-4 + -4 + -5 + -4 + -5 +-4 = -26
*/
试试看：
var a = 5
console.log(++a + a++ + a-- + a + a-- + --a); // 35
二元运算符
二元运算符有：数学运算符、赋值预算符、比较运算符、逻辑运算符
在进行运算时，会发生隐私类型转换
- 数学运算符 + - * / %
- 赋值预算符 = += -= *= /= %=
- 比较运算符 > < >= <= != !== == ===
- 逻辑运算符 && || ！
数学运算符
// 数学运算符也叫算数运算符，因此都需要转为Number才能计算
/*
加法 [需要特别注意]
如果等式两边有一个为字符串，那么会发生隐式类型转换
将另一边也转为String类型，然后拼接，最后得到一个拼接后的字符串
其他数学运算符，均是将等式两边先转为Number类型，然后再计算
*/
var a = 1
var b = '2'
var c = a+b // 结果是 "12"
赋值运算符
在JS中，一个等号表示赋值，两个等号才表示等于
// 赋值运算符有：= += -= *= /= %=
var a = 10
var b = a // 相当于是将a的值复制以一份给b 打印a、b的结果都是10
var a += m // 相当于 a = a+m -= *= /= %=类似，不再赘述
比较运算符
比较运算实际比较的是：两个变量的值，返回结果是布尔值
// 比较运算符有： > < >= <= != !== == ===
/*
简单数据类型的比较，比较的是变量的大小/值
所以会发生隐式类型转换，转为Number
复制数据类型的比较，比较的是两个变量保存的地址
而不是具体变量的内容，即使长得一样，后面有机会写个相应的文章
*/
var a = 10
var b = 20
var c = a > b // false
var m = 100
var n = "100" // 会隐式转换，将String转为Number
console.log(m==n) // true
/*
[经典问题] == 与 === 的区别？
* == 比较的是值（等于）
* === 比较值与类型（全等/恒等）
*/
举个例子：
var a = 20
var b = 20
console.log(a==b) // 比较值：两个值都是20 true
console.log(a===b) // 比较值与类型：类型都是Number 且 值都是20 true
var m = 100
var n = "100" // 会隐式转换，将String转为Number
console.log(m==n) // 比较值：两个值都是20 true
console.log(m===n) // 比较值与类型：第一个类型是Number，第二个类型是String 即使最后值相同，也是 false
逻辑运算符
逻辑运算符两边结果是布尔值，返回结果也是布尔值
- && 表示并且，需要两个同时满足，返回 true
- || 表示且，只要有一个满足，就返回true
- ！ 表示非，就是取反的意思，如果为true 则返回 false，反之亦然
// 逻辑运算符有：&& || !
1<2 && 3>4 // true && false 结果是 false
1==1 || 3==4 // true || false 结果是 true
var flag = true
console.log(!flag) // false
三元运算符
三元运算符也叫"三目运算符"，功能类似if···else···
语法：条件 ? 条件1 : 条件2
// 条件 ? 条件1(条件满足/为true时执行) : 条件2(条件不满足/为true时执行)
var age = 16
console.log(age<18?'未成年':'成年'); // 未成年
总结
使用 Number() String() Boolean() parseInt() parseFloat() 进行转换属于"强制类型转换"，也叫"显示类型转换"。
使用 二元运算符进行计算时，中间会出现"隐式类型转换"。
【自己总结的，难免出错，仅供参考】