前端

为什么在JavaScript中['1', '5', '11'].map(parseInt) 返回 [1, NaN, 3]

在 JavaScript 中，['1', '5', '11'].map(parseInt) 返回 [1, NaN, 3] 是因为 map 方法和 parseInt 函数的参数传递方式导致的。

map 方法

map 方法会对数组中的每个元素执行一次提供的函数，并返回一个新数组，其中包含每次函数调用的结果。map 方法的回调函数接收三个参数：

  1. 当前处理的元素。
  2. 当前元素的索引。
  3. 原数组。

parseInt 函数

parseInt 函数用于将字符串解析为整数。它接受两个参数：

  1. 要解析的字符串。
  2. 可选的基数（即进制数）。

具体解释

当 ['1', '5', '11'].map(parseInt) 执行时，map 方法会对数组中的每个元素调用 parseInt 函数。具体来说，parseInt 函数的调用顺序如下：

  1. parseInt('1', 0)：基数 0 被视为十进制。
  2. parseInt('5', 1)：基数 1 是无效的，parseInt 无法解析基数小于 2 或大于 36 的字符串。
  3. parseInt('11', 2)：基数 2 表示二进制，11 在二进制中是 3。

因此，map 方法返回的结果是 [1, NaN, 3]。

修正方法

如果你希望将字符串数组中的每个元素转换为整数，可以使用箭头函数和 Number 函数，如下所示：

1
["1", "5", "11"].map(Number); // 返回 [1, 5, 11]

或者，如果你确实需要使用 map 和 parseInt，可以显式地传递索引参数，并确保不传递无效的基数：

1
["1", "5", "11"].map((item, index) => parseInt(item, 10)); // 返回 [1, 5, 11]

这样，parseInt 函数将始终以十进制解析字符串。

在 JavaScript 中，parseInt 函数的第二个参数是基数（也称为进制数），用于指定要解析的字符串的基数。基数的有效范围是 2 到 36。如果省略了基数，parseInt 会默认使用 10 进制。

基数为 0

当基数为 0 时，parseInt 会根据字符串的内容自动选择合适的基数。具体规则如下：

  • 如果字符串以 “0x” 或 “0X” 开头，则基数被设置为 16（十六进制）。
  • 如果字符串以 “0” 开头，则基数被设置为 8（八进制）。
  • 如果字符串以其他任何字符开头，则基数被设置为 10（十进制）。

例如：

1
2
3
parseInt("0x10", 0); // 返回 16，因为字符串以 "0x" 开头，基数被设置为16
parseInt("010", 0); // 返回 8，因为字符串以 "0" 开头，基数被设置为8
parseInt("10", 0); // 返回 10，因为字符串以其他字符开头，基数被设置为10

基数为 1

当基数为 1 时，parseInt 会尝试解析一个无效的字符串，因为 1 不是有效的进制数。在这种情况下，parseInt 会返回 NaN（Not-a-Number）。

例如：

1
parseInt("5", 1); // 返回 NaN，因为基数1是无效的

因此，在使用 parseInt 时，应该始终显式地指定一个有效的基数，以避免意外的结果。