为何 ['1', '7', '11'].map(parseInt) 的结果是 [1, NaN, 3]？

时间 2019-11-06

标签为何 map parseint 结果 nan 繁體版

原文原文链接

原文：https://pantao.parcmg.com/press/parseint-mystery.htmlhtml

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 永远都会被忽略掉，这是个很容易理解的示例，下面咱们来看看另外一个例子：code

if ("hello world") {
  // 这里会被执行吗？
  console.log("条件判断为真");
} else {
  // 或者会执行这里吗？
  console.log("条件判断为假");
}

打开你的开发者工具 console 面板，执行上面的代码，你会获得看到会打印出 条件判断为真，也就是说 "hello world" 这一个字符串被认为是真值。htm

在 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 10ip

当咱们从 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, 2

`map()`

快要有结果了。

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));