JavaScript 中的 map、parseInt 与 NaN：一场关于类型转换与函数调用的深度解析

引言：一个看似简单的陷阱

在 JavaScript 的日常开发中，我们常常会遇到这样一段"经典"代码：

arduino 复制代码

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） ：对原数组的每个元素应用一个函数，并返回一个由结果组成的新数组，而不修改原数组。

ini 复制代码

const arr = [1, 2, 3];
const squares = arr.map(item => item ** 2); // [1, 4, 9]

这段代码简洁而优雅，体现了 map 的典型用途：一对一转换。

1.2 map 的回调函数签名

关键在于，map 的回调函数实际上接收三个参数：

c 复制代码

arr.map((element, index, array) => { ... })

element：当前元素
index：当前索引
array：原数组本身

虽然我们通常只使用第一个参数，但当我们将一个多参数函数 （如 parseInt）直接作为回调传入时，问题就出现了。

二、parseInt 的隐秘规则：基数决定一切

2.1 parseInt 的正确用法

parseInt(string, radix) 用于将字符串解析为指定基数的整数。其中：

string：要解析的字符串
radix（可选）：进制基数，范围 2--36

javascript 复制代码

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：参数错位的灾难

现在回到那行"陷阱代码"：

scss 复制代码

[1, 2, 3].map(parseInt)

等价于：

scss 复制代码

[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：

scss 复制代码

// 方案一：箭头函数限定参数
["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) 在处理带非数字后缀的字符串时更有优势：

javascript 复制代码

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 的诡异特性：不等于自己

ini 复制代码

console.log(NaN === NaN); // false

这是 IEEE 754 浮点标准的规定。因此，不能用相等运算符判断 NaN。

3.3 正确检测 NaN 的方法

ES6 引入了 Number.isNaN()，专门用于检测 NaN：

javascript 复制代码

if (Number.isNaN(parseInt("hello"))) {
    console.log("hello 不是一个数字");
}

相比全局的 isNaN()，Number.isNaN() 更安全，因为它不会先进行类型转换：

javascript 复制代码

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 往往藏在'看起来没问题'的代码里。"

------ 而破解它们的钥匙，正是对语言机制的深刻理解。

掌握这些细节，不仅是技术的提升，更是编程思维的成熟。