经典问题 parseInt 解析

114 阅读2分钟

执行['10', '10', '10', '10', '10'].map(parseInt)时结果可能会很意外。这是因为parseInt函数在接收到两个参数时的行为与预期不符。

Array.map方法中,每次迭代都会将数组的当前元素作为第一个参数传递给回调函数,并且还会传递当前索引作为第二个参数(可选),以及原始数组作为第三个参数(可选)。然而,parseInt函数接受两个参数,第一个参数是要转换的字符串,第二个参数是基数(表示要解析的字符串的进制,默认为 10)。

['10', '10', '10', '10', '10'].map(parseInt)中,map将依次进行迭代,对每个元素调用parseInt函数。但是,问题在于parseInt的第二个参数被错误地解释为基数。由于parseInt是一个全局函数,它没有上下文来正确解析第二个参数。实际上,parseInt('10', 0)parseInt('10', 1)parseInt('10', 2)等调用将返回不同的结果。

以下是解释每次迭代后的结果:

  1. parseInt('10', 0):使用基数为 0(自动判断基数)解析字符串 '10',返回结果 10。
  2. parseInt('10', 1):使用基数为 1 解析字符串 '10',由于无效的数字字符,返回结果 NaN。
  3. parseInt('10', 2):使用基数为 2 解析字符串 '10',返回结果 2。
  4. parseInt('10', 3):使用基数为 3 解析字符串 '10',返回结果 3。
  5. parseInt('10', 4):使用基数为 4 解析字符串 '10',返回结果 4。

因此最终的结果数组将是 [10, NaN, 2, 3, 4]

如果希望得到预期的结果 [10, 10, 10, 10, 10],可以使用其他方法来解决这个问题。 例如改用箭头函数或使用Number()函数来转换字符串为数字:

['10', '10', '10', '10', '10'].map(str => parseInt(str))  // 使用箭头函数
['10', '10', '10', '10', '10'].map(Number)  // 使用 Number 函数

这些方法都会正确地将每个字符串转换为相应的数字生成预期结果