JS数字格式化，map解析1,7,11得到[1,NaN,3]，如何理解？

JavaScript的世界里充满了令人惊讶的事情。现在让我们一起探索一个有趣的例子。当你使用map函数和parseInt()函数将字符串数组转换成整数数组时，可能会得到一个出乎意料的结果。让我们用一个控制台演示来证明这一点：

const stringArray = ['1', '7', '11'];
const result = stringArray.map(parseInt);
console.log(result);

如果我们期待的结果是 [1, 7, 11]，那么实际的结果可能会让你大吃一惊：

[1, NaN, 3]

相信你已经注意到了，我们并没有得到我们预期的整数数组。取而代之的是，我们得到的是一个包含数字1、NaN（代表“非数字”）和数字3的数组。这到底是怎么发生的？

让我们从map函数开始。map函数是一个用于对数组中的每个元素应用一个函数并返回一个新数组的内置函数。在我们的例子中，map函数对stringArray中的每个字符串元素调用parseInt()函数。

parseInt()函数用于将字符串解析为整数。如果字符串包含有效的整数，则parseInt()函数会返回该整数。然而，如果字符串包含任何非数字字符，则parseInt()函数会返回NaN。

在我们的例子中，stringArray中的第一个元素是'1'，这是一个有效的整数，所以parseInt()函数返回1。但是，stringArray中的第二个元素是'7a'，它包含了一个非数字字符'a'，所以parseInt()函数返回NaN。stringArray中的第三个元素是'11'，这是一个有效的整数，所以parseInt()函数返回11。

这就是为什么['1', '7', '11'].map(parseInt)返回[1, NaN, 3]的原因。map函数对stringArray中的每个字符串元素调用parseInt()函数，而parseInt()函数会根据字符串的内容返回整数或NaN。

那么，我们如何解决这个问题呢？一种方法是使用Number()函数来显式地将字符串转换为数字。Number()函数会尝试将字符串解析为数字，如果成功，则返回该数字。如果失败，则返回NaN。

const stringArray = ['1', '7', '11'];
const result = stringArray.map(Number);
console.log(result);

这次，我们得到了预期的结果：[1, 7, 11]。

当然，你也可以使用正则表达式来验证字符串是否包含非数字字符，如果包含，则使用Number()函数将字符串转换为数字。但是，这可能会让代码变得更加复杂。

希望本篇文章能够帮助你理解为什么['1', '7', '11'].map(parseInt)会返回[1, NaN, 3]。如果你有任何问题或建议，请随时留言。