美文网首页让前端飞Web前端之路前端开发
002_一道面试题的引申——关于parseInt

002_一道面试题的引申——关于parseInt

作者: maze1943 | 来源:发表于2019-07-02 22:21 被阅读0次

欢迎到github交流前端技术https://maze1943.github.io/Front-End-Maze/
查看我的github仓库https://github.com/maze1943/Front-End-Maze

今天刷到一道面试题:

['0','1','2','3'].map(parseInt);

很多人的第一反应可能是[0,1,2,3],但是如果对parseInt和ES5的数组迭代方法map了解的话,应该可以知道返回值为[0,NaN,NaN,NaN];
那如果稍微改动一下呢:

['0','1','2','3','15'].map(parseInt);

这一次的返回值为[0,NaN,NaN,NaN,1]
让我们具体分析一下:
首先,需要了解parseInt这个方法:

parseInt(string, radix) string为字符串,radix为介于2-36之间的数。使用者告诉这个函数string(比如11)是radix(比如2)进制的,函数将固定返回string以十进制时显示的数(3)。

所以parseInt不同于Number,并不是简单的将字符串类型转换成数值,而是有一个进制转换。
在基数为 undefined,或者基数为 0 或者没有指定的情况下,JavaScript 作如下处理:

  1. 如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制)。
  2. 如果字符串 string 以"0"开头, 基数是8(八进制)或者10(十进制),那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10,但是并不是所有的浏览器都遵循这个规定。因此,永远都要明确给出radix参数的值。
  3. 如果字符串 string 以其它任何值开头,则基数是10 (十进制)。

回到题目,map方法对数组进行迭代,传入了parseInt作为处理函数,map的处理函数会传入三个参数:item(当前迭代的数组项),index(数组项索引),array(进行迭代的数组);所以在对每一个数组项执行parseInt时,对parseInt传入了item和index两个参数,可以视为依次执行了以下处理函数:

parseInt("0",0) // 进制基数为0,视为10进制,将10进制的0转换为整数0
parseInt("1",1); // 进制基数为1,不存在1进制,NaN
parseInt("2",2); // 进制基数为2,不存在2进制的数字2,NaN
parseInt("3",3); // 进制基数为3,不存在2进制的数字3,NaN

['0','1','2','3','15'].map(parseInt)同理,不同的是将4进制的15转换成整数时,字符串15的第一位正确转换为1,到第二位时无法继续转换,从而输出1;这也是parseInt与Number做数值类型转换时的一个不同点:
parseInt会将字符串从头开始可以进行转换的部分进行转换并返回,而Number如果字符串中存在不能解析的情况,会直接返回NaN。

让我们再稍微变动一下:

['10','2','3'].reduce(parseInt); // 结果返回2

和前面所描述的基本一致,只是map方法换成了reduce,也就是说传入parseInt的两个参数变成了preItem(前一个迭代项)和nextItem(下一个迭代项)。

相关文章

网友评论

    本文标题:002_一道面试题的引申——关于parseInt

    本文链接:https://www.haomeiwen.com/subject/qhsxhctx.html