详解 JS 中的 map 和 parseInt 陷阱

JavaScript 小坑：parseInt 遇上 map 时发生了什么？如何正确转换字符串数组为数字？

在JavaScript中，map和parseInt是两个常用的方法，但它们的组合使用可能会产生令人困惑的结果。让我们一起来探究这个问题。

理解 map 方法

map 是数组的一个方法，它会遍历数组中的每个元素，并对每个元素执行提供的函数，最后返回一个新数组。

基本语法：

javascript

array.map(function(currentValue, index, arr), thisValue)

其中：

• currentValue：当前处理的元素
• index（可选）：当前元素的索引
• arr（可选）：当前数组本身

理解 parseInt 函数

parseInt 函数用于将字符串转换为整数。它的完整语法是：

javascript

parseInt(string, radix)

参数：

• string：要解析的字符串
• radix（可选）：表示要使用的基数（进制），范围是2-36

问题分析

当我们执行 ['1', '2', '3'].map(parseInt) 时，实际上发生的事情是：

1. map 方法会为每个数组元素调用 parseInt，并自动传递三个参数：

   • 元素值
   • 元素索引
   • 整个数组

2. 所以实际调用相当于：

   javascript

   parseInt('1', 0, ['1', '2', '3'])  // 第一个元素
   parseInt('2', 1, ['1', '2', '3'])  // 第二个元素
   parseInt('3', 2, ['1', '2', '3'])  // 第三个元素
   

3. parseInt 会忽略第三个参数，只使用前两个参数：

   • parseInt('1', 0)：基数为0时，JavaScript会根据字符串前缀决定基数（没有前缀默认为10），所以返回1
   • parseInt('2', 1)：基数为1是无效的（必须在2-36之间），返回NaN
   • parseInt('3', 2)：基数为2（二进制），但'3'不是有效的二进制数字，返回NaN

正确的写法

如果我们只想把字符串数组转换为数字数组，应该这样写：

javascript

['1', '2', '3'].map(Number)  // [1, 2, 3]

或者明确指定基数：

javascript

['1', '2', '3'].map(str => parseInt(str, 10))  // [1, 2, 3]

总结

• map 会自动传递三个参数给回调函数
• parseInt 接受两个参数，第二个参数是基数
• 当直接传递 parseInt 给 map 时，数组索引会成为 parseInt 的基数参数
• 要正确转换，应该明确指定基数或使用 Number 函数

理解这些细节可以帮助我们避免JavaScript中的这类常见陷阱。