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

欢迎到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（下一个迭代项）。