JS进阶（一）数据类型与隐式转换

1.数据类型分类

（1）基本数据类型【7】

string、 number、null、undefined、 boolean、bigInt、symbol

注意⚠️：

Number类型中NaN不是有效数字但是属于Number类型,typeof NaN  //=> 'number'
NaN === NaN  // => false
Object.is(NaN,NaN)  // => true
BigInt出现的意思是保证超出最大最小安全值仍然可以准确计算
console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991
console.log(Number.MIN_SAFE_INTEGER); //=>-9007199254740991
9007199254740991n  =>bigint类型的

（2）引用数据类型【2】

• object
• 普通对象 {} Map
• 实例对象 new xxx
• 日期对象 new Date
• 正则对象 new RegExp
• 原型对象 prototype
• 数组对象 Set Array
• 。。。
• function

2.数据类型的检测

• typeof能检测基本类型和函数类型，但是对于对象类型和null不能区分（null为计算机历史遗留问题） typeof function(){}  // 'function' typeof NaN            // 'number'
• constructor[].constructor === Array
• instanceof
• Object.prototype.toString.call()Object.prototype.toString.call([])    // "[object Array]"

3.数据类型的隐式转换

（1）转化为Number类型的情况

• 使用Number显式类型转换, 转换过程中，遇到对象会先toString然后在Number转换

例子：Number()、Number(null)、Number("")、Number(false) 结果为 0 Number(undefined) 、 Number({})、 Number('wds'), 结果为 NaN Number(true) , 转化结果为 1 Number(['2222'])  结果为 2222 Number(['2222','1111'])  结果为NaN Number('1,2')

• 使用加号减号等运算符隐式转换, 转换过程中，遇到对象会先toString然后在Number转换

例子：

• '123' 结果为 123
• [] 、+null、+false   结果为 0
• {}、+ 'abc' 、+ undefined   结果为 NaN
• true  结果为 1 1 + true   结果为 2 注意⚠️： NaN + 任何数都是NaN、字符串和对象除外，会转成字符串拼接 NaN+123、NaN+ true、NaN+NaN  结果都为NaN NaN + {}  结果为 "NaN[object Object]" NaN + []  结果为 "NaN"

• 使用isNaN进行检测的时候，会隐式转换为数字在检测,,转换过程中，遇到对象会先toString然后在Number转换

验证是不是无效数字，无效返回true例子：isNaN(123) 、 isNaN('') 、isNaN('2222')  、 isNaN(false)、isNaN(true) 、isNaN(null) 、 isNaN([]) 结果为 false 结果为true 结果为false isNaN(undefined)、、 isNaN(NaN) 、

• 使用parseInt、parseFloat转换

先转成字符串，然后从左到右检测有效数字，如果没有检测到有效数字结果就为 NaN例子： parseInt('112abc')   结果为  112 parseInt('abc')、parseInt('abc22222')  结果为 NaN parseFloat('2.22'+'aa')   结果为 2.22 parseFloat('2e'+'3')   结果为 2000 科学计数法例外

• 在==比较的时候，有些值需要转换为数字再进行比较
  一道parseInt面试题

  let arr = [10.18,0,14,35,23]
  arr = arr.map(parseInt)
  console.log(arr)
  // 解体思路
  // 可以转化为arr.map((el,idx)=>parseInt(el,idx))
  //返回一个数组
  // 元素分别求
  // parseInt(10.18,0)  => 10
  // parseInt(0,1)   => NaN  parseInt的进制范围是2～36， 1 不在该范围返回NaN
  // parseInt(14,2)  => 从左向右检测进制2，数字范围0～1，所以4没有，相当于1的2进制转化为10进制，1*2^0 = 1, 结果为1
  // parseInt(35,3)  => 因为3进制数字范围0~2, 3和5都不在这个范围，返回NaN
  // parseInt(23,4) => 2*4^1+3*4^0 = 11 
  // 结果为[10,NaN,1,NaN,11]

（2）转化为String类型的情况

• 使用String或者toString显式类型转换

例子： String(123)  结果为"123" String(true) 结果为"true" String(undefined)     结果为"undefined" String([])     结果为"" String({})     结果为"[object Object]"    * 会调用原型上的toString()方法 注意⚠️： 123.toString() 会报错，因为会解析成（123.）toString()， 正确写法 (123).toString() 或者 123..toString 或者123 .toString

• 使用➕号连接的时候，如果一边有字符串或者有对象(会先调用toString()解析为字符串)，那么会进行字符串的拼接

例子： 1 + 'hello'  结果为 "1hello" 1 + []         结果为 "1" 1 + {}         结果为"1[object Object]" NaN + {}    结果为 "NaN[object Object]"

（3）转化为Boolean

• Boolean 强制转化

例子： Boolean(null)、Boolean(0) 、Boolean(“”)、Boolean(NaN)、Boolean(undefined) 结果为false 除上面五个，其他值转换都为true Boolean('haha') 、Boolean([]) 、 Boolean({}) 、Boolean(1) 结果为true

• !、!! 隐式转换

！ 结果为Boolean的相反 !!   结果为Boolean的值例子： ! null 、!"" 、 !undefined 、!NaN、!0  结果为true !!  undefined  结果为false

（4）“==”的隐式转化

• 两个 == 比较值，三个===号值和类型都比较

如果遇到对象会转换为字符串在比较 例子 [] == []   输出 false 对象比较对内存地址 null == undefined    输出true '123' == 123、'123' == [123] 、 '123' == ['123']  输出都是true

练习题

parseInt("");    // 输出NaN
parseInt(null);  // 输出NaN
parseInt("12px") // 输出12
parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)  // 输出'2.6NaN'  1.6 + 1 + typeof NaN
Number("")       // 输出0
Number(null)     // 输出0
Number("12px")   // 输出NaN
Number(!!Number(parseInt("0.8")))  // 输出0  0.8 => 0 => 0 => false => 0
isNaN("")        // 输出false "" => 0 =>false
isNaN(null)      // 输出false  null => 0 => false
isNaN("12px")    // 输出true
isNaN(Number(!!Number(parseInt("0.8"))))  // 输出false isNaN(0)
typeof !parseInt(null) + !isNaN(null)
let a = typeof typeof typeof [12,23];  // 'string'
// 输出'booleantrue'
// typeof !(NaN) + !(isNaN(Number(null)))
// typeof true + !(isNaN(0))   => 'boolean'+ true => 'booleantrue'

let result = 12+false+undefined+[]+'Test'+null+true+{};
console.log(result);
// 12 + false => 12 + 0 => 12
// 12 + undefined => 12 + NaN => NaN
// NaN + [] => NaN + Number([]) => NaN + Number([].toString()) => NaN + Number('') => NaN
// NaN+'Test' => 'NaNTest'
// 'NaNTest'+null => 'NaNTestnull'
// 'NaNTestnull'+true => 'NaNTestnulltrue'
// 'NaNTestnulltrue'+ {} => 'NaNTestnulltrue'+ {}.toString() => 'NaNTestnulltrue[object Object]'

let res = parseFloat('left:200px') //=> NaN
if(res===200){
    alert(200)
}else if(res === NaN){  // => NaN === NaN  false
    alert(NaN)
}else if(typeof res === 'number'){  
    alert('number')  //=> 'number' alert 输出结果都会转化为字符串
}else{
    alert('Invalid Number')
}