共计 3596 个字符，预计需要花费 9 分钟才能阅读完成。
原文：https://pantao.parcmg.com/press/parseint-mystery.html
Javascript 总是以超自然的方式执行我们的代码，这是一件很神奇的事情，如果不信的话，思考一下 ['1', '7', '11'].map(parseInt) 的结果是什么？你以为会是 [1, 7, 11] 吗？我都这么问了，那肯定不是：
['1', '7', '11'].map(parseInt)
// 输出：(3) [1, NaN, 3]要理解为什么为会这里，首先需要了解一些 Javascript 概念，如果你是一个不太喜欢阅读长文的人，那直接跳到最后看结论吧
真值与假值
请看下面示例：
if (true) {// 这里将启动都会被执行} else {// 这里永远都不会被执行}在上面的示例中，if-else 声明为 true，所以 if-block 会一直都执行，而 else-block 永远都会被忽略掉，这是个很容易理解的示例，下面我们来看看另一个例子：
if ("hello world") {
// 这里会被执行吗？console.log("条件判断为真");
} else {
// 或者会执行这里吗？console.log("条件判断为假");
}打开你的开发者工具 console 面板，执行上面的代码，你会得到看到会打印出 条件判断为真 ，也就是说 "hello world" 这一个字符串被认为是 真值。
在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、””、null、undefined 和 NaN 以外皆为真值）。
引用自：Mozilla Developer: Truthy（真值）
这里一定要划重点：在布尔上下文中，除 false、0、""（空字符串）、null、undefined 以及 NaN 外，其它所有值都为真值
基数
0 1 2 3 4 5 6 7 8 9 10
当我们从 0 数到 9，每一个数字的表示符号都是不一样的（0-9），但是当我们数到 10 的时候，我们就需要两个不同的符号 1 与 0 来表示这个值，这是因为，我们的数学计数系统是一个十进制的。
基数，是一个进制系统下，能使用仅仅超过一个符号表示的数字的最小值，不同的计数进制有不同的基数，所以，同一个数字在不同的计数体系下，表示的真实数据可能并不一样，我们来看一下下面这张在十进制、二进制以及十六进制不同值在具体表示方法：
| 十进制（基数：10） | 二进制（基数：2） | 十六进制（基数：16） |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 1 | 1 |
| 2 | 10 | 2 |
| 3 | 11 | 3 |
| 4 | 100 | 4 |
| 5 | 101 | 5 |
| 6 | 110 | 6 |
| 7 | 111 | 7 |
| 8 | 1000 | 8 |
| 9 | 1001 | 9 |
| 10 | 1010 | A |
| 11 | 1011 | B |
| 12 | 1100 | C |
| 13 | 1101 | D |
| 14 | 1110 | E |
| 15 | 1111 | F |
| 16 | 10000 | 10 |
| 17 | 10001 | 11 |
| 18 | 10002 | 12 |
你应该已经注意到了，11 在上表中，总共出现了三次。
函数的参数
在 Javascript 中，一个函数可以传递任何多个数量的参数，即使调用时传递的数量与定义时的数量不一致。缺失的参数会以 undefined 作为实际值传递给函数体，然后多余的参数会直接被忽略掉（但是你还是可以在函数体内通过一个类数组对象 arguments 访问到）。
function sum(a, b) {console.log(a);
console.log(b);
}
sum(1, 2); // 输出：1, 2
sum(1); // 输出：1, undefined
sum(1, 2, 3); // 输出：1, 2map()
快要有结果了。
map() 是一个存在于数组原型链上的方法，它将其数组实例中的每一个元素，传递给它的第一个参数（在本文最开始的例子中就是 parseInt），然后将每一个返回值都保存到同一个新的数组中，遍历完所有元素之后，将新的包含了所有结果的数组返回。
function multiplyBy3 (number) {return number * 3;}
const result = [1, 2, 3, 4, 5].map(multiplyBy3);
console.log(result); // 输出：[3, 6, 9, 12, 15]现在，假想一下，我们想使用 map() 将一个数组中的每一个元素都打印到控制台，我可以直接将 console.log 函数传递给 map() 方法：
[1, 2, 3, 4, 5].map(console.log);输出：
1 0 (5) [1, 2, 3, 4, 5]
2 1 (5) [1, 2, 3, 4, 5]
3 2 (5) [1, 2, 3, 4, 5]
4 3 (5) [1, 2, 3, 4, 5]
5 4 (5) [1, 2, 3, 4, 5]是不是感觉有点神奇了？为什么会这样？来分析一下上面输出的内容都有些什么？
- 第一列：这个看上去跟我们想要的输出是一致的
- 第二列：这个是一个从
0开始递增的数字 - 第三列：总是
(5) [1, 2, 3, 4, 5]
再来看看下面这段代码：
[1, 2, 3, 4, 5].map((value, index, array) => console.log(value, index, array));在控制台上试试执行上面这行代码，你会发现，它与 [1, 2, 3, 4, 5].map(console.log); 输出的结果是完全一致的，** 总是会被我们忽略的一点是，map() 方法会将三个参数传递传递给它的函数，分别是 currentValue（当前值）、currentIndex（当前索引）以及 array 本身，这就是，上面为什么结果有三列的原因，如果我们只是想将每一个值打印，那么需要像下面这样写：
[1, 2, 3, 4, 5].map((value) => console.log(value));回到最开始的问题
现在让我们来回顾一下本文最开始的问题：
为什么 ['1', '7', '11'].map(parseInt) 的结果是 [1, NaN, 3]？
来看看 parseInt() 是一个什么样的函数：
parseInt(string, radix)将一个字符串string转换为radix进制的整数，radix为介于2-36之间的数。详情：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt
这里还有一条需要注意的是，虽然我们一般都是使用 parseInt('11') 这样的调用方式，认为是将 11 按十进制转换成数字，但是，请在使用的时候，永远都添加 radix 参数，因为，radix 为 10 并不保证永远有效（这并不是规范的一部分）。
那么看看下面这些的输出：
parseInt('11'); // 输出：11
parseInt('11', 2); // 输出：3
parseInt('11', 16); // 输出：17
parseInt('11', undefined); // 输出：11（radix 是假值）parseInt('11', 0); // 输出：11（radix 是假值）现在，让我们一步一步来看 ['1', '7', '11'].map(parseInt) 的整个执行过程，首先，我们可以将这一行代码，转换为完整的版本：
['1', '7', '11'].map((value, index, array) => parseInt(value, index, array))根据前面的知识，我们应该知道，parseInt(value, index, array) 中的 array 会被忽略（并放入 arguments 对象中。
那么，完整的代码就是下面这样的：
['1', '7', '11'].map((value, index, array) => parseInt(value, index))-
遍历到第一个元素时：
parseInt('1', 0);radix为0，是一个假值，在我们的控制台中，一般将使用10进制，所有，得到结果1 -
遍历到第二个元素时：
parseInt('7', 1)在一个
1进制系统中，7是不存在的，所以得到结果NaN（不是一个数字） -
遍历到第三个元素时：
parseInt('11', 2)在一个
2进制系统中，11就是进十制的3
总结
['1', '7', '11'].map(parseInt) 的结果是 [1, NaN, 3] 的原因是因为，map() 方法是向传递给他的函数中传递三个参数，分别为当前值，当前索引以及整个数组，而 parseInt 函数接收两个参数：需要转换的字符串，以及进制基数，所以，整个语句可以写作：['1', '7', '11'].map((value, index, array) => parseInt(value, index, array))，array 被 parseInt 舍弃之后，得到的结果分别是：parseInt('1', 0)、parseInt('7', 1) 以及 parseInt('11', 2)，也就是上面看到的 [1, NaN, 3]。
正确的写法应该是：
['1', '7', '11'.map(numStr => parseInt(numStr, 10));
