陷阱揭秘: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

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 是一个构造函数,但也可以作为一个函数来使用,它将任何值转换为等效的数字类型。当作为函数调用时,它只接受一个参数,并尝试将其转换为数字。与 parseIntparseFloat 不同,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 ,感谢您的关注~

相关推荐
爱吃羊的老虎10 分钟前
【WEB开发.js】getElementById :通过元素id属性获取HTML元素
前端·javascript·html
GISer_Jing1 小时前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
yangqii1 小时前
工作中可以用到的前端小知识(不定时更新)
javascript
bpmf_fff1 小时前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
悦涵仙子2 小时前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
蒙特网站3 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
蒜蓉大猩猩4 小时前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
Clockwiseee4 小时前
JS原型、原型链以及原型链污染学习
javascript·学习·原型模式
遇到困难睡大觉哈哈4 小时前
JavaScript面向对象
开发语言·javascript·ecmascript
我是Superman丶4 小时前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript