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

重阳微噪
351 阅读5分钟

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')
}

知识延伸

习题

写在最后

欢迎访问我的博客rockshang.com

avatar
文章
阅读
粉丝