有趣的JS题目-求["1","2","3"].map(parseInt)的返回值

466 阅读2分钟

题目

这道题作为一道JS经典题,应该很多人都看过,今天,咱就来再分析并延伸一下。

首先,map大家应该很熟悉,主要就是parseInt的问题。按照我们平时的用法,parseInt就是一个将字符串转化为整形的函数,那么答案是 [1,2,3] 吗?既然我这么问了,那肯定不是。

正确答案是:[1,NaN,NaN] 。可是为什么呢?

分析

原因就在于,map我们平时只取了他第一个传入回调的参数,但其实他还有两个参数:indexarray。而恰巧,parseInt能接收两个参数:stringradix

因此,最终返回的结果其实是 [parseInt('1',0),parseInt('2',1),parseInt('3',2)]

可是到了这一步,依然有些同学不一定能弄清楚为什么答案是 [1,NaN,NaN]。如果你就是的话,那你可能要巩固一下自己的JS基础了。

引申

根据MDN所言:

radix 可选

  • 从 2 到 36,表示字符串的基数。例如指定 16 表示被解析值是十六进制数。请注意,10不是默认值! 如果 radixundefined0未指定的,JavaScript会假定以下情况:
  • 如果输入的 string"0x""0X"(一个0,后面是小写或大写的X)开头,那么radix被假定为16,字符串的其余部分被当做十六进制数去解析。
  • 如果输入的 string"0"开头, radix被假定为8(八进制)或10(十进制)。具体选择哪一个radix取决于实现。ECMAScript 5 澄清了应该使用 10 (十进制),但不是所有的浏览器都支持。因此,在使用 parseInt 时,一定要指定一个 radix
  • 如果输入的 string 以任何其他值开头, radix10 (十进制)。

具体到这个场景,就是

  • parseInt('1',0) 相当于1视为十进制表示,结果自然是1
  • parseInt('2',1) 由于1不在radix的选择范围内,任何将radix指定为2-36之外的整数的情况,返回值都为NaN。而如果传入的不是整数,则会将radix默认为10(chrome下)。
  • parseInt('3',2) 这个表达式的返回值也是NaN,但是原因却完全不同。在这里返回NaN是因为,3并不是二进制表达式的字符,因此无法转化,故而返回了NaN

如果你是第一次看到这里,有没有一种 JS还真是精妙啊 的感觉呢?

延伸

这个题应该算是比较经典的一个题了,可是大家有没有想过,如果对他进行一下延伸,你还答得出来吗?

比如:求["0x10","2","123"].map(parseInt)的返回值?

有兴趣的小伙伴,可以在评论区和大家交流一下答案以及原因哟。