JavaScript的map函数是否异常？为何['10','10','10','10','10'].map(parseInt)返回[10,NaN,2,3,4]

兄弟，别怀疑map函数的问题——它工作得完全正常！这个反直觉的结果其实是因为你没搞清楚map给回调函数传递的参数，以及parseInt到底需要什么参数，俩函数的“配合”产生了这个看起来诡异的输出。

先搞懂两个函数的参数规则： #

• Array.prototype.map：它给传入的回调函数传递三个参数：
  1. 当前正在处理的元素
  2. 当前元素的索引值
  3. 调用map的原数组
• parseInt：它接收两个参数：
  1. 要解析的字符串
  2. 可选的基数（radix）：表示要解析的数字的进制，范围是2到36；如果传0或者不传，会根据字符串开头自动判断进制（比如以0x开头是十六进制，否则默认十进制）

逐行拆解你的代码执行过程： #

你的代码是['10','10','10','10','10'].map(parseInt)，相当于每次迭代都把map的前两个参数传给parseInt，也就是：

• 第一次迭代：parseInt('10', 0) → 基数0默认用十进制，结果是10
• 第二次迭代：parseInt('10', 1) → 基数1是无效的（进制只能从2开始），无法解析，返回NaN
• 第三次迭代：parseInt('10', 2) → 二进制的10等于十进制的2，结果是2
• 第四次迭代：parseInt('10', 3) → 三进制的10等于十进制的3，结果是3
• 第五次迭代：parseInt('10', 4) → 四进制的10等于十进制的4，结果是4

所以最终返回的就是[10, NaN, 2, 3, 4]啦！

怎么得到你想要的全10结果？ #

如果你想把每个字符串都转成十进制的10，需要让parseInt只接收第一个参数（也就是元素本身），可以用箭头函数包装一下：

['10','10','10','10','10'].map(str => parseInt(str))
// 或者更简洁的用Number函数，它只需要一个参数
['10','10','10','10','10'].map(Number)

这两种写法都会返回[10, 10, 10, 10, 10]，符合你的预期。

内容的提问来源于stack exchange，提问作者Tuomas Toivonen