JS面试题[‘1’, ‘7’, ‘11’].map(parseInt)怎么解决

在JavaScript的面试中，map和parseInt的组合常常被用来考察开发者对这两个方法的理解。具体来说，面试题可能会问：['1', '7', '11'].map(parseInt)的结果是什么？这个问题的答案并不像表面看起来那么简单，它涉及到map和parseInt的细节行为。本文将详细解释这个问题，并提供解决方案。

1. map方法的基本用法

map是JavaScript数组的一个高阶函数，它接受一个回调函数作为参数，并对数组中的每个元素执行这个回调函数。map会返回一个新的数组，新数组中的每个元素都是回调函数的返回值。

const arr = [1, 2, 3];
const newArr = arr.map(x => x * 2);
console.log(newArr); // [2, 4, 6]

在这个例子中，map对数组中的每个元素都执行了x => x * 2这个回调函数，最终返回了一个新的数组[2, 4, 6]。

2. parseInt函数的基本用法

parseInt是JavaScript中的一个全局函数，用于将字符串转换为整数。它接受两个参数：第一个参数是要转换的字符串，第二个参数是基数（即进制）。

const num = parseInt('10', 2);
console.log(num); // 2

在这个例子中，parseInt将字符串'10'按照二进制（基数为2）进行解析，最终返回了整数2。

3. map和parseInt的组合问题

现在回到面试题：['1', '7', '11'].map(parseInt)的结果是什么？

首先，我们需要理解map和parseInt的组合是如何工作的。map会将数组中的每个元素传递给parseInt，并期望parseInt返回一个值。然而，parseInt实际上接受两个参数：要解析的字符串和基数。

map在调用回调函数时，会传递三个参数给回调函数：当前元素、当前索引和数组本身。因此，parseInt实际上接收到的参数是：

• 第一个参数：当前元素（字符串）
• 第二个参数：当前索引（数字）
• 第三个参数：数组本身（通常被忽略）

因此，['1', '7', '11'].map(parseInt)实际上等同于：

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

3.1 解析第一个元素：'1'

parseInt('1', 0)：当基数为0时，parseInt会根据字符串的前缀来决定基数。由于'1'没有前缀，parseInt会默认使用十进制，因此返回1。

3.2 解析第二个元素：'7'

parseInt('7', 1)：基数为1时，parseInt无法解析，因为1进制只包含数字0，因此返回NaN。

3.3 解析第三个元素：'11'

parseInt('11', 2)：基数为2时，parseInt会将字符串'11'解析为二进制数，即3。

因此，['1', '7', '11'].map(parseInt)的结果是[1, NaN, 3]。

4. 如何解决这个问题

要解决这个问题，我们需要确保parseInt只接收一个参数（即要解析的字符串），而不接收基数参数。我们可以通过定义一个只接受一个参数的函数来包装parseInt：

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

在这个例子中，我们使用了一个箭头函数str => parseInt(str)，它只接受一个参数str，并将其传递给parseInt。这样，parseInt就不会接收到基数参数，从而避免了之前的问题。

5. 总结

['1', '7', '11'].map(parseInt)的结果是[1, NaN, 3]，这是因为map会将当前索引作为基数传递给parseInt，导致了一些意外的结果。要解决这个问题，我们可以使用一个只接受一个参数的函数来包装parseInt，从而确保parseInt只接收到要解析的字符串。

理解map和parseInt的行为细节对于避免类似的陷阱非常重要。希望本文能帮助你更好地理解这个问题，并在面试中表现出色。