前言
JavaScript中数据类型转换在开发中会经常遇到，我相信大家在这方面一定踩了不少的坑，看似简单实则各种规则变化莫测，今天就再来温习一下！
什么是类型转换?
我们都知道js中有很多种数据类型，主要分为基本类型和引用类型两大类，当我们使用两种数据类型进行一些操作的时候，这里面就会涉及到js数据类型转换的操作，数据转换也分为两类：显示类型转换 和 隐式类型转换
我们需要知道的是不管是基本类型还是引用类型，最终都将会被转化为这三种类型之一：Number类型或String类型或Boolean类型
转化为boolean
- 显示：Boolean()方法可以用来显示的将值转化为布尔类型
Boolean(2) // true
Boolean({}) // true
Boolean(NaN) // false
- 隐式：隐式类型转换通常在逻辑判断或者有逻辑运算符时被触发(|| && !)
if(123) {} // true
123 && true // 如果前面的值为true，则返回后面的值，否则返回前面的值
'123' || 'hello' // 如果前面的值为true，则返回前面的值，否则返回后面的值
!!2 // true
!2 // false
Boolean类型转换只有两种结果：true 或者 false, JavaScript中0,空字符串,null,undefined,NaN这五种数据将被转换为false，其余所有的会被转换为true
转化为string
- 显示：通过String(),toString()方法可以显示的将值转为字符串类型
String([1,2,3]) // "1,2,3"
String({}) // "[object Object]"
- 隐式：隐式转换通常发生在+运算符并且有一个操作数是string类型时触发
1 + [] // '1'
1 + [1,2,3] // '1123'
1 + {} // "1[object Object]"
'1' + true // "1true"
1 + true // 2
number类型与boolean类型相加时，boolean类型会转换为nubmer
string类型与boolean类型相加时，boolean类型会转化为string
转化为nubmer
- 显示： 通过Number(),parseInt(),parseFloat()方法可以显示的将值转化为数字类型
Number('') // 0
Number('123') // 123
Number('10px') // NaN
Number(true) // 1
Number(false) // 0
Number(null) // 0
Number(undefined) // NaN
Number([1,2,3]) // NaN
Number({}) //NaN
-
隐式：number类型的隐式转换相对复杂一点，因为它的转换场景比较多
- 比较操作( >,<,>=,<=)
- 按位操作(| & ^ ~)
- 算术操作，当+操作符中只要存在任意一个string字符串类型，就不会触发number类型的隐式转换
- 一元+操作
对象隐式转换为数字时，会按照如下步骤进行转换
- 现调用对象的Symbol.toPrimitive方法，如果不存在
- 再调用对象的valueOf获取原始值，如果获取的值不是原始值
- 再调用对象的toString把其变为字符串
- 最后在把字符串基于Number()方法转换为数字
操作符==
如果两边数据类型不同，需要先转化为相同的类型，然后进行比较，以下几种情况需要注意一下
对象==字符串
会把对象转换为字符串
[1,2,3] == '1,2,3' // true
null和undefined
会把null和undefined转化为boolean类型
null == undefined // true
对象==对象
对象直接比较的是地址
[] == [] // false
操作符===
全等操作符，只有当两个值数据类型一致并且值相等时才为true，否则为false
