[‘1’, ‘2’, ‘3’].map(parseInt) what & why ?

今天在看掘金文章发现一道有趣的题目：['1', '2', '3'].map(parseInt) what & why ?
冷静一下，先不要问答案是什么。我们先来分析一下，出这个题的人想考面试者什么内容？map的用法？parseInt的用法？会不会太简单了。

map用法：

map(item-值,index-索引) 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

例如：

[4, 9, 16, 25].map(Math.sqrt) ;  // [ 2,3,4,5]

parseInt用法：

parseInt(string-字符串, radix-进制基数)可解析一个字符串，并返回一个整数。如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。
不过这个玩意有点坑，往往容易忽略它的第二个值。

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

例如：

parseInt("100", 10); // “100”本身是10进制，再转成10进制，就是100
parseInt("100", 2); // “100”本身是2进制，再转成10进制:  1*2^2 + 0*2^1 + 0*2^0 = 4
parseInt("100", 8); // “100”本身是8进制，再转成10进制:  1*8^2 + 0*8^1+0*8^0 = 64

错因分析：

再回到这个面试题，哇！我好像明白了radix 和map的使用方法才是这道题的难点！
出错点一：将问题直接当成下面写法，忽略了map的第二个值是index索引：

['1', '2', '3'].map((item)=>{ return parseInt(item)})； //[1,2,3]

出错点二：parseInt被想的简单了，将值每次的值直接传入了， 结果还是[1,2,3]

正解：

['1', '2', '3'].map((item,index)=>{ return parseInt(item,index)})；

所以3次执行的取整操作如下：

==>  parseInt("1",0);  //1
==>  parseInt("2",1);  //没有1进制，返回NaN
==>  parseInt("3",2);  //3不是2进制数，2进制只有0和1，返回NaN

看到这看懂的，还不鼓掌。是不是想骂一句：“什么玩意？还可以这样操作？”。其实早在 2013年， 加里·伯恩哈德就在微博上发布了以下代码段：

['10','10','10','10','10'].map(parseInt);  // [10, NaN, 2, 3, 4]

所以，开发中千万不能忽视任何一个小细节！即便是最熟悉的函数方法API，一不小心就被自己的“低级错误”坑了。我是陈小之知，希望与时代共同进步，时时刻刻学习！