陷阱揭秘：map与parseInt的参数混淆

引言

在JavaScript中，[].map() 是数组的一个内置方法，它会创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。让我们分别解析 [].map(parseInt), [].map(parseFloat), 和 [].map(Number) 这三个表达式的含义和预期行为。

`[].map(parseInt)`

parseInt 是一个全局函数，用于将字符串转换成整数。它接受两个参数：要解析的字符串和一个可选的基数（表示字符串中数字的进制）。在 [].map(parseInt) 中，parseInt 作为 map 的回调函数被传递。

然而，这里存在一个常见的陷阱：map 会在回调函数内部向其传递三个参数：当前元素、元素的索引以及原数组本身。当 parseInt 作为回调函数时，它会接收到这些额外的参数。由于 parseInt 只期望接收一个字符串参数和一个可选的基数参数，它会错误地将 map 传递的索引当作基数来解析字符串。

例如，对于空数组 []，虽然没有实际元素执行 parseInt，但如果有一个非空数组如 ['1', '2', '3']，那么 map 会按如下方式调用 parseInt：

parseInt('1', 0); // 第一个元素，索引为0，基数错误地取为0
parseInt('2', 1); // 第二个元素，索引为1，基数错误地取为1
parseInt('3', 2); // 第三个元素，索引为2，基数错误地取为2

由于基数通常应该是2到36之间的整数，这些非标准基数会导致 parseInt 返回 NaN 或意外的结果。因此，['1', '2', '3'].map(parseInt) 通常不会得到预期的 [1, 2, 3]，而是 [1, NaN, NaN]（或者类似依赖于不同字符串和基数组合的意外结果）。

正确的做法是提供一个自定义的回调函数，确保只传递给 parseInt 字符串参数，并且基数是明确设定的（通常为10，即十进制）：

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

`[].map(parseFloat)`

parseFloat 是另一个全局函数，用于将字符串转换成浮点数。与 parseInt 类似，它也只有一个必需参数：要解析的字符串。不过，parseFloat 不关心基数，因为它只处理十进制和指数形式的浮点数。

尽管 parseFloat 不涉及基数问题，但使用 [].map(parseFloat) 仍然可能导致意外结果，因为 map 会传递额外的索引和原数组参数。幸运的是，parseFloat 在忽略多余参数方面表现得更宽容，它只关心第一个参数——要解析的字符串。因此，即使传递了多余的参数，parseFloat 通常仍能正确解析字符串为浮点数。

['1.1', '2.2', '3.3'].map(parseFloat); // [1.1, 2.2, 3.3]

在这个例子中，尽管 map 传递了索引和原数组，但由于 parseFloat 只使用第一个参数，所以它可以正常工作，返回 [1.1, 2.2, 3.3]。

`[].map(Number)`

Number 是一个构造函数，但也可以作为一个函数来使用，它将任何值转换为等效的数字类型。当作为函数调用时，它只接受一个参数，并尝试将其转换为数字。与 parseInt 和 parseFloat 不同，Number 不需要额外的基数参数，且对多种类型的输入值（如字符串、布尔值、null、undefined等）都有明确的转换规则。

使用 [].map(Number) 时，由于 Number 函数只期望一个参数，它可以很好地与 map 的回调函数接口配合，无需担心多余参数的问题。它会将数组中的每个元素尝试转换为数字：

['1', '2', '3'].map(Number); // [1, 2, 3]
['1.1', '2.2', '3.3'].map(Number); // [1.1, 2.2, 3.3]

在这两个例子中，Number 函数成功将字符串数组元素转换为相应的数字，结果分别为 [1, 2, 3] 和 [1.1, 2.2, 3.3]。

总结

[].map(parseInt) 通常导致意外结果，因为 parseInt 误将 map 传递的索引当作基数。需要提供一个自定义回调函数以正确设置基数。
[].map(parseFloat) 虽然不涉及基数问题，但由于 map 传递了多余的参数，其行为可能不易预料。幸运的是，parseFloat 通常能正确处理这种情况。
[].map(Number) 是最简洁且无陷阱的选择，因为它仅期望一个参数，与 map 回调函数接口完美匹配，且能有效地将各种可转换为数字的值转换为数字。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~