引言
在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
:
javascript
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,即十进制):
javascript
['1', '2', '3'].map(str => parseInt(str, 10));
[].map(parseFloat)
parseFloat
是另一个全局函数,用于将字符串转换成浮点数。与 parseInt
类似,它也只有一个必需参数:要解析的字符串。不过,parseFloat
不关心基数,因为它只处理十进制和指数形式的浮点数。
尽管 parseFloat
不涉及基数问题,但使用 [].map(parseFloat)
仍然可能导致意外结果,因为 map
会传递额外的索引和原数组参数。幸运的是,parseFloat
在忽略多余参数方面表现得更宽容,它只关心第一个参数------要解析的字符串。因此,即使传递了多余的参数,parseFloat
通常仍能正确解析字符串为浮点数。
javascript
['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
的回调函数接口配合,无需担心多余参数的问题。它会将数组中的每个元素尝试转换为数字:
javascript
['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
,感谢您的关注~