['1', '7', '11'].map(parseInt) 会输出什么

js 真是门神奇的语言，有无数多的可能性，难怪现在大家都想去拥抱 typescript 了。相比 java ，c++ 等语言来说，js 语法略显宽松些，函数参数的类型可以有多种可能性，所以当我在网上看到下面这道题时，心里忍不住 mmp ，咱能不能整点正式的，少来这种妖魔鬼怪呀（逃

['1', '7', '11'].map(parseInt)  //  结果输出 -> [1, NaN, 3]

相信你也一样，第一次看到结果的时候有些困惑，为什么输出会有 NaN ? 为什么把 '11' 转成整数会是 3 ？

如果你早已知晓其中原因，可以直接拉到下方点个赞再走，否则的话我们一起来探索下其中缘由。

关键的 map 函数

我们想把数组里的字符串数字转换成整数，于是使用 map 函数来对数组的每一项作用，作用的函数是 parseInt 函数，所以预期的结果应该是 [1,7,11] ，然而人算不如浏览器算，最终浏览器的 JavaScript 引擎给出的答案是 [1, NaN, 3] 。从结果可以看到 1 是正常进行转化的，后面两个数则不是我们预期的结果。

第一个猜想：会不会是传入的 parseInt 出现问题 ？
现在我们把 parseInt 换掉，功能改为给每一个数乘 2

['1', '7', '11'].map(function(x){
    return x * 2;     // 结果 -> [2, 14, 22]
});

发现结果是正常的，x 代表从数组里拿到的每一个值，在依次去乘以 2 ，没问题。可是问题来了，除了 x ，会不会有其它参数，存不存在其它可以使用的参数。于是我们试验下：

['1', '7', '11'].map(function(x, i, j, k){
    console.log(x +' ' + i + ' ' + j + ' ' + k);
});

在 Chrome 的控制台执行后发现结果出乎意料

image

也就是说，map 接受的这个函数，它存在三个参数，第一个是数组当前的值，第二个是当前值的索引，第三个数是当前传入的数组 。

到这里我们就明白了，当我们传入 parseInt 时，map 函数会把三个参数（数组当前元素，当前元素的索引，当前传入的数组）一并打包给 parseInt 。那么现在问题就集中在 parseInt 函数上面。从 MDN 文档查询后可以知道， parseInt(string, radix) 函数接受两个参数，第一个是需要转换的字符串，第二个是进制。于是结果呼之欲出，我把这个过程画成了图，方便看图理解，如下：

image

可能有的人看完还是雾水，解释下：首先，parseInt 接受两个参数，因此第三个参数会被忽略。第一次执行， parseInt('1', 0) 会输出 1 ，因为 0 会转换成 false，而 false 会使它执行默认的进制 10 ，就是 parseInt 默认都是转换十进制；第二次执行，parseInt('7', 1) 因为没有所谓的 1 进制，所以无法转换，输出 NaN; 第三次执行parseInt('11', 2) 答案为 3 ，因为以 2 为进制转换，3 的二进制是 11 , 非常的巧妙。

所以最终的输出的结果就是 [1, NaN, 3] 啦，不怪浏览器，怪自己，哈哈。

总结

常言道人定胜天，在程序员的世界里大家都想人定胜机器（浏览器），然而事实通常与我们预期的不符，只有多掌握知识，多分析才能知晓其中原理，特别是要利用好文档材料，如 MDN， w3cschool 等等，只要一查，就能知道每个函数都有多个规定的参数，有些是必须，有些是可选的，当然，个人觉得不必死每个函数，需要的时候利用好 Internet 就行。

（完）