引言：一个看似简单的陷阱
在 JavaScript 的日常开发中，我们常常会遇到这样一段“经典”代码：
console.log([1, 2, 3].map(parseInt)); // 输出：[1, NaN, NaN]
乍看之下，这段代码似乎应该将字符串数组或数字数组转换为整数数组。然而，结果却出人意料——除了第一个元素外，其余全部变成了 NaN。这背后隐藏着 JavaScript 中三个核心概念的交织：Array.prototype.map() 的回调机制、parseInt 的参数行为，以及 NaN 的语义本质。
本文将从这三个维度出发，层层剖析这一常见陷阱，并深入探讨它们在实际开发中的正确使用方式，帮助开发者避开“看似合理实则错误”的编程误区。
一、map 方法：不只是遍历，更是映射
1.1 map 的设计哲学
Array.prototype.map() 是 ES6 引入的重要高阶函数之一，其核心思想是函数式编程中的“映射”（mapping） ：对原数组的每个元素应用一个函数，并返回一个由结果组成的新数组，而不修改原数组。
const arr = [1, 2, 3];
const squares = arr.map(item => item ** 2); // [1, 4, 9]
这段代码简洁而优雅，体现了 map 的典型用途：一对一转换。
1.2 map 的回调函数签名
关键在于，map 的回调函数实际上接收三个参数：
arr.map((element, index, array) => { ... })
-
element：当前元素 -
index：当前索引 -
array：原数组本身
虽然我们通常只使用第一个参数，但当我们将一个多参数函数（如 parseInt）直接作为回调传入时，问题就出现了。
二、parseInt 的隐秘规则：基数决定一切
2.1 parseInt 的正确用法
parseInt(string, radix) 用于将字符串解析为指定基数的整数。其中：
-
string：要解析的字符串 -
radix（可选）：进制基数，范围 2–36
console.log(parseInt("ff", 16)); // 255（十六进制）
console.log(parseInt("10", 2)); // 2（二进制）
console.log(parseInt("123")); // 123（默认十进制）
当省略 radix 时，JavaScript 会尝试自动推断，但这种行为不可靠（例如 "08" 在旧引擎中会被视为八进制）。因此，始终显式指定 radix=10 是最佳实践。
2.2 当 map 遇上 parseInt：参数错位的灾难
现在回到那行“陷阱代码”：
[1, 2, 3].map(parseInt)
等价于：
[1, 2, 3].map((item, index, array) => parseInt(item, index, array))
由于 parseInt 只使用前两个参数，第三个被忽略。于是实际调用变为：
-
parseInt("1", 0)→ 基数为 0，按十进制处理 → 1 -
parseInt("2", 1)→ 基数为 1（非法！有效范围是 2–36）→ NaN -
parseInt("3", 2)→ 基数为 2（二进制），但 "3" 不是合法二进制数字 → NaN
这就是
[1, NaN, NaN]的真正来源——map 传递的索引被误当作 radix 使用。
2.3 正确的解决方案
要安全地将数组转为整数，应显式封装 parseInt：
// 方案一：箭头函数限定参数
["1", "2", "3"].map(str => parseInt(str, 10));
// 方案二：使用 Number 构造函数（更简洁）
["1", "2", "3"].map(Number); // [1, 2, 3]
// 方案三：定义专用函数
const toInt = str => parseInt(str, 10);
["1", "2", "3"].map(toInt);
其中，Number() 更适合纯数字字符串转换，而 parseInt(str, 10) 在处理带非数字后缀的字符串时更有优势：
console.log(parseInt("123abc", 10)); // 123
console.log(Number("123abc")); // NaN
三、NaN：JavaScript 中最特殊的“数字”
3.1 NaN 的本质
NaN（Not-a-Number）是 JavaScript 中一个表示无效数值计算结果的特殊值。尽管它的类型是 "number"，但它代表的是“无法表示的数字”。
常见产生 NaN 的场景包括：
-
0 / 0 -
Math.sqrt(-1) -
"abc" - 10 -
undefined + 10 -
parseInt("Hello")
值得注意的是：
-
6 / 0返回Infinity（正无穷），而非 NaN -
-6 / 0返回-Infinity
3.2 NaN 的诡异特性：不等于自己
console.log(NaN === NaN); // false
这是 IEEE 754 浮点标准的规定。因此，不能用相等运算符判断 NaN。
3.3 正确检测 NaN 的方法
ES6 引入了 Number.isNaN()，专门用于检测 NaN：
if (Number.isNaN(parseInt("hello"))) {
console.log("hello 不是一个数字");
}
相比全局的 isNaN()，Number.isNaN() 更安全，因为它不会先进行类型转换：
isNaN("hello"); // true（先转为 NaN）
isNaN(undefined); // true（先转为 NaN）
Number.isNaN("hello"); // false（类型不是 number）
Number.isNaN(NaN); // true
结语：理解机制，方能驾驭语言
[1, 2, 3].map(parseInt) 这个看似微不足道的例子，实则揭示了 JavaScript 设计中的深层逻辑：函数是一等公民，参数传递是灵活的，但灵活性也带来了责任。
只有当我们真正理解：
-
map如何传递参数， -
parseInt如何解析基数， -
NaN如何表示无效数值，
才能写出既简洁又健壮的代码。
“在 JavaScript 中，最危险的 bug 往往藏在‘看起来没问题’的代码里。”
—— 而破解它们的钥匙，正是对语言机制的深刻理解。
掌握这些细节，不仅是技术的提升，更是编程思维的成熟。
