map函数传入parseInt函数处理数字输出有误

在业务中常常会使用map函数将数字字符串数组处理为数字数组。

常常使用在input输入框的值都是字符串，当后端需要它的值为number类型时，就需要将其处理为数字。

parseInt是常用的函数。

但遇到了这样的问题

["1", "2", "3"].map(parseInt);
// [1, NaN, NaN]
1
2

出现这样的问题，首先需要弄明白map和parseInt这两个函数。

首先是 map​方法：

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

它接受一个callback函数，其中有三个参数。

callback
生成新数组元素的函数，使用三个参数：
currentValue
callback 数组中正在处理的当前元素。
index 可选
callback 数组中正在处理的当前元素的索引。
array 可选
map 方法调用的数组。

而常常我们只会使用currentValue 这一个参数。

接下来是 parseInt​方法：

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。

可以看到它接受两个参数，被解析的字符串与指定基数。

所以到这里就能够知道问题所在了。

map函数中传入parseInt是因为将map的callback函数的第二个参数index传入了parseInt作为了指定基数。

["1", "2", "3"].map(parseInt);
// 实际上是执行了下面的代码
["1", "2", "3"].map((currentValue, index) => parseInt(currentValue, index));

// 以下是每次迭代的结果
// radix 为 0 时，string 以其它任何值开头，则基数是 10
parseInt("1", 0); // 1
// 没有一进制
parseInt("2", 1); // NaN
// 3 不是二进制
parseInt("3", 2); // NaN
1
2
3
4
5
6
7
8
9
10
11

所以这里我之前使用的是 [“1”, “2”, “3”].map( item => parseInt(item) )这样的方式实现的。在写下这篇文章时了解到，可以使用Number构造函数。

// 解决办法
 ["1", "2", "3"].map( item => parseInt(item) )
// 或者使用Number构造函数
 ["1", "2", "3"].map(Number)
1
2
3
4