JavaScript面试题：['1','2','3'].map(parseInt)

console.log(['1','2','3'].map(parseInt))会输出什么呢?

答案是这个

如果你不清楚机制的话，肯定和这哥们一样扣问号了。

下面我们一步一步来分析一下吧。

分析

我们首先有一个数组['1', '2', '3']，这个数组每个元素是string类型，然后我们对这个数组对象用.访问其map方法，并给map方法传入一个参数，参数为函数parseInt。

哦哦，看样子要解决这个问题，关键是知道map方法有什么用，我们去MDN网站上查查看。

哦哦，原来map会将原数组中的元素都调用一次，然后把每个返回值组成一个新数组呀。

---

但是不对呀，map参数中并没有和parseInt相关的参数定义呀，那可能parseInt不是参数而是执行函数，即map通过parseInt函数执行后返回的结果来构建一个新数组。

在上面我们发现map其实还有三个参数，我们来把这三个参数测试一下吧。

['1', '2', '3'].map((num, index, arr) => {
    console.log(num, index, arr);
    return num;
})

结果为

哦，确实第一个参数是迭代的每个元素，第二个参数为数组的索引，第三个参数为数组本身。

光看map的用法好像并不能解决我们的问题，我们再去MDN网站看看parseInt的用法吧

哦，我们发现parseInt有一个可选参数，参数将指明被解析值是什么进制数，关键是后面，如果超出这个范围，将返回NaN，噢噢噢，是不是和我们的问题挂钩了。很有可能是我们把['1','2','3'].map((value, index) => parseInt(value, index))中map的index当作参数传给了parseInt，导致当index=0时，自动解析值是什么进制数，所以会输出1,而index为1或者2时，解析成了其他进制数，因为超出了范围，所以返回了NaN。

我们可以手动用parseInt试试看

console.log(parseInt('1', 0, ['1', '2', '3']));
console.log(parseInt('2', 1, ['1', '2', '3']));
console.log(parseInt('3', 2, ['1', '2', '3']));

输出

哇，amazing！！！结果输出一模一样，就是因为

['1','2','3'].map(parseInt)

把数组index当作参数传递给了parseInt，所以才会发生这个问题 那我们怎么解决这个问题呢？

解决方法

因为parseInt的radix参数是可选的，所以我们可以手动只传一个参数，即

console.log(['1','2','3'].map(num => parseInt(num)))  // 明确只传一个参数

这样输出的结果就是正常的1,2,3了