面试:[“1”, “2”, “3”].map(parseInt) 答案是多少？

@[TOC](面试:[“1”, “2”, “3”].map(parseInt) 答案是多少？)

['1', '2', '3'].map(parseInt)是一个经典的 JavaScript 面试题，它的结果可能与你预期的不同。让我们逐步分析它的执行过程。

1.map 方法的工作原理

map是数组的一个方法，它会遍历数组中的每个元素，并对每个元素调用提供的回调函数，最后将回调函数的返回值组成一个新数组返回。

array.map(callback(currentValue, index, array));

• currentValue：当前处理的元素。
• index：当前元素的索引。
• array：原数组。

2.parseInt函数的工作原理

parseInt 是一个将字符串转换为整数的函数。它接受两个参数：

• string：要解析的字符串。
• radix：进制基数（2 到 36 之间的整数）。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN;当没有指定基数（radix）时，它会根据字符串的开头来决定解析的进制。如果字符串以“0x”开头，则解析为十六进制；如果以“0”开头但不是“0x”，则解析为八进制；如果以其他数字开头，则解析为十进制。如果字符串中包含非数字字符，parseInt会停止解析并返回之前的值。

parseInt(string, radix);

3.map 和 parseInt 的结合

当 map 调用 parseInt 时，map 会将以下参数传递给 parseInt：

• 当前元素（currentValue）。
• 当前索引（index）。

因此，['1', '2', '3'].map(parseInt)的实际执行过程如下：

parseInt('1', 0); // 1
parseInt('2', 1); // NaN
parseInt('3', 2); // NaN

• 第一次调用：parseInt(‘1’, 0)
  radix 为 0，默认按十进制解析，结果为 1。
• 第二次调用：parseInt(‘2’, 1)
  radix 为 1，不在 2 到 36 之间，无法解析，结果为 NaN。
• 第三次调用：parseInt(‘3’, 2)
  radix 为 2，表示二进制，但 3 不是有效的二进制数字，结果为 NaN。

可能有人对第三次调用有点疑惑。下面来看一个例子:

  console.log(parseInt("13", 8)); //11
      console.log(parseInt("28", 8)); //2,8识别不出来，只能截取到1
      console.log(parseInt("17", 7)); //1,7识别不出来，只能截取到1
      console.log(parseInt("16", 7)); //13
      console.log(parseInt("2", 2)); //NaN,2不是有效的二进制数，识别不出来
      console.log(parseInt("11", 2)); //3
      console.log(parseInt("3", 2)); //NaN,3不是有效的二进制数，识别不出来

4.结果

5. 如何避免这个问题？

如果希望将数组中的字符串转换为数字，可以使用 Number 函数或箭头函数来明确指定参数：
方法 1：使用 Number

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

方法 2：使用箭头函数

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