面试题:['1', '2', '3'].map(parseInt) 输出什么?

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 面试题:['1', '2', '3'].map(parseInt) 输出什么?

正文


一、背景


事情经过是这样的,前几天上班路上,跟往常一样拿起手机看头条、逛知乎、刷掘金嘛。


过程中,看到以下这个面试题:


['1', '2', '3'].map(parseInt) 输出什么?


其实,这题很简单,不就是类似 [0, 1, 2].filter(Boolean) 这种变形题目嘛,但我却没能马上说出答案。


我知道 parseInt() 的第二个参数跟进制数相关,但由于平常多数是缺省第二个参数,平常写项目也会启用 ESLint 的 radix 规则,但规则启用时也几乎是填写 10 作为实参,因为涉及其他进制数的情况确实很少很少...


所以,趁机再熟悉下 parseInt(string, radix) 这个函数,也是挺不错的。


回到上面的题目,分解一下,就是返回以下三个运算结果组成的数组嘛:

parseInt('1', 0, ['1', '2', '3'])
parseInt('2', 1, ['1', '2', '3'])
parseInt('3', 2, ['1', '2', '3'])


对于 parseInt() 函数,仅接收两个参数,所以第三个参数实际上没有任何作用,因此 ['1', '2', '3'].map(parseInt) 结果就是:

[
  parseInt('1', 0),
  parseInt('2', 1),
  parseInt('3', 2)
]


但这篇文章的重点并非是答案,我们应该关注 parseInt(string, radix) 函数本身。


二、八进制数表示法的前世今生


如果常用 ESLint 的同学,应该知道它有一个规则 radix 是跟 parseInt() 相关的。

看个例子,它们分别打印什么结果?


parseInt('071') // 57
parseInt('071', 10) // 71

有些本着求真的同学,将 parseInt('071') 拷到控制台发现,无论是 Chrome、Firefox 还是 Safari 都是打印出 71 而不是 57


我为什么写成 57 呢?是写错了吗?明明在浏览器中 parseInt('071') 都是打印出 71 呢!

先别急,我们知道在「严格模式」下,是不允许使用以 0 开头的八进制语法的。

"use strict"
var n = 071 // SyntaxError: Octal literals are not allowed in strict mode.


但我想,你有可能不知道的是,其实在 ES6 标准发布之前,ECMAScript 是没有八进制语法的,至于类似 071 这种八进制表示法它只是被所有浏览器厂商支持罢了。就好比如 Object.prototype.__proto__ 从来就不是 ECMAScript 的标准语法一样,但所有浏览器都支持罢了,标准语法是 Object.getPrototypeOf()

在 ES6 中提供了八进制数的标准规范:在数字前加上 0o 来表示八进制数,比如八进制的 710o71 表示。


回到 parseInt(string, radix) 与八进制的话题上,


当没有指定 radix 参数时,看看各家是如何解析八进制数的?

  • ES3「不提倡」将带有 0 开头的数值字符串解析为一个八进制。(不赞成,但没禁止)
  • ES5 规范中「不允许」parseInt 函数的实现环境把带有 0 开头的数值字符串解析为八进制数值,而是以 10 为基数(即十进制)进行解析。(规范禁止了,但浏览器没有按标准实现)
  • 各浏览器厂商大爷们:我偏不按你规范去实现,仍要把带有 0 开头的数值字符串解析成八进制数值。(我行我素)


本着求真的态度,拿出了上古神器去验证并得出结果:在 IE8 及以下浏览器 parseInt('071') 打印结果为 57(下图),而 IE9 及以上则为 71


30.webp.jpg

Internet Explorer 8

随着 JavaScript 的飞速发展,浏览器厂商们都向标准靠近了,不再肆意我行我素了。至于浏览器 parseInt('071') 打印结果是 71,原因正是现在的浏览器 JS 引擎是以 10 为基数进行解析了。


尽管 2022 年了,但仍要兼容旧版(远古)浏览器,所以显式指定 radix 参数是非常有必要的。本节用一个比较典型的案例来说明,使用 parseInt 函数时,应当指定 radix 参数。


在 JavaScript 中,有四种进制数的表示语法:


  • 十进制:没有「前导零」的数值。
  • 二进制:以 0b0B 开头的数值。
  • 八进制:以 0o0O 开头的数值。浏览器等宿主环境也支持以「前导零」开头,且只有 0 ~ 7 的数组表示八进制数。
  • 十六进制:以 0x0X 开头的数值。


三、parseInt


语法

parseInt(string, radix)


解析一个字符串并返回指定基数的「十进制整数」或者 NaN

  • string
    被解析的值。若参数不是字符串类型,内部先隐式类型转换为字符串类型(即调用相应值的 toString() 方法)
  • radix(可选,取值范围 2 ~ 36 的整数)
    表示字符串的基数。但请注意,10 不是默认值!当参数 radix 缺省时,会有几种情况,下面会介绍。


注意点


  1. string 参数带有前导或尾随空白符(包括 \n\r\f\t\v 和空格),它们将会被忽略。换句话说,实际有意义的是第一个非空白符开始。

parseInt('  \n\r\f\t\v   11', 2) // 3,相当于 parseInt('11', 2)


  1. string 参数的「第一个非空格字符」不能转换为数字,或者当 radix < 2 || radix > 36 时,返回值为 NaN

parseInt('a11') // NaN
parseInt('11', 1) // NaN
parseInt('11', 37) // NaN


但请注意,并不是所有的字母开头的都返回 NaN。比如 parseInt('a11', 12) 返回值为 1453。因为超过十进制之后,字母也可能用于表示相应的进制数的。


  1. radix 参数为 undefinednull0 或缺省(未显式指定)时,JavaScript 引擎会假定以下情况:


  1. 如果 string 是以 0x0X 开头的,那么 radix 将会假定为 16,将其余部分当作十六进制数去解析。比如 parseInt('0xf') 相当于 parseInt('f', 16),结果为 15
  2. 如果 string 是以 0 开头的,那么 radix 在不同的环境下,有可能被假定为 8(八进制)或假定为 10(十进制)。具体选择哪一种作为 radix 的值,视乎运行 JavaScript 的宿主环境(前面提到过了)。因此,在使用 parseInt 时,一定要显式指定 radix 参数。
  3. 如何 string 是以任何其他值开头,radix 会被假定为 10(十进制)。
  1. parseIntstring 的解析规则是:从第一个非空白符开始,然后一直往后面查找,若有任意一个字符不能被转换为数值就会停止,那么最终被解析的字符串就是从开始到停止的这一截字符串。

parseInt('11a', 10) // 结果为 11,被解析的字符串为 '11'
parseInt('11a', 11) // 结果为 142,被解析的字符串为 '11a',因为在十一进制里面,a 是有意义的。


所以,在使用 parseInt 处理 BigInt 类型的时候,最终的返回值总是为 Number 类型(过程中会失去精度),其中 BigInt 类型的拖尾的 n 是会被丢弃的。

parseInt(1024n, 10) // 1024
parseInt(1024n, 36) // 46732,相当于 parseInt('1024', 36)
// 注意,有别于以下这个
parseInt('1024n', 36) // 1682375


原因非常的简单,前面也提到过的。当 parseInt 的第一个参数不是 String 类型时,会调用 BigInt.prototype.toString() 方法先转换为字符串,即 1024n.toString(),结果为 1024


四、结尾


回到文章开头的题目:

[
  parseInt('1', 0),
  parseInt('2', 1),
  parseInt('3', 2)
]


这时候,是不是就可以快速说出答案了:[1, NaN, NaN]

借机彻底弄懂了 parseInt() 的方法,可以满意地离开了,The end.

目录
相关文章
|
JavaScript 前端开发
[阿里巴巴最新面试题----JavaScript中map(parseInt)的问题]
[阿里巴巴最新面试题----JavaScript中map(parseInt)的问题]
60 0
|
3月前
|
Java
【Java集合类面试二十二】、Map和Set有什么区别?
该CSDN博客文章讨论了Map和Set的区别,但提供的内容摘要并未直接解释这两种集合类型的差异。通常,Map是一种键值对集合,提供通过键快速检索值的能力,而Set是一个不允许重复元素的集合。
|
3月前
|
算法 Java 索引
【Java集合类面试四】、 描述一下Map put的过程
这篇文章详细描述了HashMap中put操作的过程,包括首次扩容、计算索引、插入数据以及链表转红黑树和可能的再次扩容。
【Java集合类面试四】、 描述一下Map put的过程
|
3月前
|
安全 Java
【Java集合类面试五】、 如何得到一个线程安全的Map?
如何得到一个线程安全的Map的方法包括:使用Collections工具类将Map包装为线程安全,使用java.util.concurrent包下的ConcurrentHashMap,以及不推荐使用性能较差的Hashtable。
|
3月前
|
安全 Java
【Java集合类面试三】、Map接口有哪些实现类?
这篇文章介绍了Java中Map接口的几种常用实现类:HashMap、LinkedHashMap、TreeMap和ConcurrentHashMap,以及它们适用的不同场景和线程安全性。
|
5月前
|
消息中间件 安全 Java
高德面试:为什么Map不能插入null?
在 Java 中,Map 是属于 java.util 包下的一个接口(interface),所以说“为什么 Map 不能插入 null?”这个问题本身问的不严谨。Map 部分类关系图如下: ![image.png](https://cdn.nlark.com/yuque/0/2024/png/92791/1717578225132-241fa833-180d-41ab-95eb-3d7cd1118633.png#averageHue=%233f3424&clientId=u395c5adf-4577-4&from=paste&height=687&id=u98d6a0bc&originHeig
45 1
|
6月前
|
前端开发 程序员
【面试题】在循环 for、for-in、forEach、for-of 、map中改变item的值,会发生什么?
【面试题】在循环 for、for-in、forEach、for-of 、map中改变item的值,会发生什么?
|
存储 编译器 C++
【C++从0到王者】第三十五站:面试官让手撕红黑树,我直接向他秀一手手撕map与set
【C++从0到王者】第三十五站:面试官让手撕红黑树,我直接向他秀一手手撕map与set
73 0
|
6月前
|
存储 安全 Java
[Java基础面试题] Map 接口相关
[Java基础面试题] Map 接口相关
|
6月前
|
存储 JavaScript 前端开发
面试题:问js的forEach和map的区别
面试题:问js的forEach和map的区别