理解JavaScript中map和parseInt的陷阱：一个常见的面试题解析

前言

在JavaScript面试中，map和parseInt的组合常常被用作考察候选人对这两个方法理解深度的题目。让我们通过一个简单的例子来深入探讨其中的原理。

问题现象

['1', '2', '3'].map(parseInt) // 输出结果是什么？

很多人可能会预期输出[1, 2, 3]，但实际结果是[1, NaN, NaN]。为什么会这样？

理解map方法

首先，我们需要明确map方法的工作原理。根据文档：

array es6 新增的方法，返回一个全新数组

map方法会对数组中的每个元素调用提供的回调函数，并基于回调函数的返回值构建一个新数组。回调函数接收三个参数：

1. 当前元素
2. 当前元素的索引
3. 原数组

parseInt函数

parseInt函数用于将字符串转换为整数。它接收两个参数：

1. 要解析的字符串
2. 基数（进制），表示要解析的数字是几进制的

问题分析

当我们执行['1', '2', '3'].map(parseInt)时，实际上相当于：

['1', '2', '3'].map((num, index, arr) => parseInt(num, index, arr))

即每次调用时：

1. 第一次：parseInt('1', 0, ['1', '2', '3'])

   • 基数为0时，JavaScript会尝试自动判断进制：

     • 以"0x"或"0X"开头的字符串会被解释为十六进制
     • 其他情况被解释为十进制

   • 所以结果为1

2. 第二次：parseInt('2', 1, ['1', '2', '3'])

   • 基数为1是无效的（必须在2-36之间）
   • 返回NaN

3. 第三次：parseInt('3', 2, ['1', '2', '3'])

   • 基数为2表示二进制，但’3’不是有效的二进制数字
   • 返回NaN

解决方案

如果确实需要将字符串数组转换为数字数组，应该明确指定parseInt的基数为10：

['1', '2', '3'].map(num => parseInt(num, 10))

或者直接不传第二个参数，这样他会默认这个数是十进制的：

['1', '2', '3'].map(num => parseInt(num))

或者更简洁地使用Number构造函数：

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

面试要点

这个题目考察了几个关键点：

1. 对map方法参数的理解
2. 对parseInt函数参数的理解
3. 函数作为参数传递时的行为

理解这些JavaScript基础概念对于写出健壮的代码至关重要。在面试中遇到类似问题时，应该逐步分析每个方法的参数传递和行为，而不是仅凭直觉猜测结果。

总结

JavaScript中的隐式行为常常会导致意料之外的结果。作为开发者，我们应该：

• 明确函数的参数和返回值
• 避免依赖隐式行为
• 在不确定时查阅文档或进行测试

这种深入理解语言特性的能力，正是区分初级和高级JavaScript开发者的关键所在。