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

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,一不小心就被自己的“低级错误”坑了。我是陈小之知,希望与时代共同进步,时时刻刻学习!