JS基础很扎实?来挑战看能否一次性全做对!

·  阅读 251

1. 来试试看,以下12道题是否能一次性全答对:

parseInt("")
Number("")
isNaN("")

parseInt(null)
Number(null)
isNaN(null)

parseInt("12px")
Number("12px")
isNaN("12px")

parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)

isNaN(Number(!!Number(parseInt("0.8"))))

typeof !parseInt(null) + !isNaN(null)
复制代码

答案:

parseInt("") // NaN
Number("")  // 0
isNaN("")  // false

parseInt(null)  // NaN
Number(null)  // 0
isNaN(null)  // false

parseInt("12px")  // 12
Number("12px")  // NaN
isNaN("12px")  // true

parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)  // "2.6number"

isNaN(Number(!!Number(parseInt("0.8"))))  // false

typeof !parseInt(null) + !isNaN(null)  // "booleantrue"
复制代码

全做对了?基础很扎实哦!棒棒哒!!!

没全做对?那就趁热巩固一下吧!

2. 巩固

  1. parseInt()处理的值是字符串,从字符串的左侧开始查找有效数字字符,遇到非有效数字字符则停止查找(==如果处理的值不是字符串,需要先转化为字符串然后再开始查找==)。详细请参考:parseInt
  2. Number()直接调用最底层的数据类型检查机制来完成,其中:
被转化为
true1
false0
null0
""0
undefinedNaN
==字符串中必须保证都是有效数字才会转换为数字,否则都是NaN==。详细请参考:Number
  1. isNaN()处理的值是数值,==如果传入的参数不是数值的话,会先转化为数值后再进行判断==。详细请参考:isNaNJS中的NaN

有了以上知识的铺垫,我们来逐个分析以上的题:

parseInt("") // NaN
复制代码

parseInt传入的参数是空字符串"",它不包含任何有效数字,所以结果为NaN

Number("")  // 0
复制代码

Number函数底层将空字符串转化为0

isNaN("")  // false
复制代码

isNaN传入的参数是空字符串""不是数值,首先将参数转化为数值(即调用Number("")),得到结果为0,然后再执行isNaN(0)0是一个数值,所以isNaN(0)的结果为false

parseInt(null)  // NaN
复制代码

parseInt传入的参数是null不是一个字符串,首先将null转化为字符串(即调用String(null)),得到结果为字符串"null",然后再执行parseInt("null"),因为字符串"null"不包含任何有效数字,所以结果为NaN

Number(null)  // 0
复制代码

Number函数底层将null转化为0

isNaN(null)  // false
复制代码

isNaN传入的参数是null不是数值,首先将参数转化为数值(即调用Number(null)),得到结果为0,然后再执行isNaN(0)0是一个数值,所以isNaN(0)的结果为false

parseInt("12px")  // 12
复制代码

parseInt从字符串的左侧开始查找有效数字字符,遇到非有效数字字符则停止查找,所以遇到字符p停止查找,结果为12

Number("12px")  // NaN
复制代码

Number()传入的字符串参数中必须保证都是有效数字才会转换为数字,否则都是NaN,所以结果为NaN

isNaN("12px")  // true
复制代码

isNaN传入的参数是字符串"12px"不是数值,首先将参数转化为数值(即调用Number("12px")),得到结果为NaN,然后再执行isNaN(NaN)NaN不是一个数值,所以isNaN(NaN)的结果为true

parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)  // "2.6number"
复制代码

等价于:

1.6 + 1 + typeof NaN
复制代码

进一步又等价于:

2.6 + "number"
复制代码

+运算符中存在字符串的时候就变成了==字符串拼接==,所以结果为字符串"2.6number"

isNaN(Number(!!Number(parseInt("0.8"))))  // false
复制代码

一步步拆解: parseInt("0.8")结果为0Number(0)结果为0!!Number(0)即为!!0!0结果为true,所以!!0结果为falseisNaN(false)即为isNaN(0)0是一个数值,所以结果为false

typeof !parseInt(null) + !isNaN(null)  // "booleantrue"
复制代码

一步步拆解,等价于:

typeof !NaN + !false
复制代码

又等价于:

typeof true + true
复制代码

又等价于:

"boolean" + true
复制代码

字符串拼接,所以最终的结果为字符串"booleantrue"

细节是不是挺多的,怎么样,这回都会了吧?

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改