奇怪的JavaScript：map和parseInt的反常应用

['1', '7', '11'].map(parseInt);

要想了解到底发生了什么，我们首先要讨论一些 JavaScript 的概念。如果你想要一个 TLDR（Too Long; Didn’t Read：太长了，不想读），我在本文的末尾提供了一个快速总结。

if (true) {
    // 此处总会运行
} else {
    // 此处不会运行到
}

if ("hello world") {
    // 这将会运行吗？
    console.log("Condition is truthy");
} else {
    // 还是运行这里？
    console.log("Condition is falsy");
}

尝试在开发人员的控制台（在 Chrome 上按 F12）中运行此代码。我们会发现 if 块运行了。这是因为字符串对象“hello world”是真。

每个 JavaScript 对象要么是真，要么是假。当将它们放到布尔上下文中时，如放在 if-else 语句中，对象将根据其真实性被视为 true 或 false。那么哪些对象是真，哪些是假呢？这里有一个简单的规则：

除了 false、0、“”（空字符串）、null、undefined、及 NaN 以外， 所有值都是真。

令人困惑的是，这意味着字符串 “false” 、字符串 “0” 、空对象 {} 和空数组 [] 都是真。我们可以通过将一个对象传递到布尔函数中（例如 Boolean("0"); 中），来对其进行双重检查。

就我们的目的而言，只要记住 0 是假就足够了。

    基数    

0 1 2 3 4 5 6 7 8 9 10

当我们从 0 数到 9 时，每个数字（0-9）都有不同的符号。然而，一旦达到 10，我们需要两个不同的符号（1 和 0）来表示这个数字。这是因为我们的十进制计数系统的基数（或基础）是 10。

基数是一个最小的数字，它只能由多个符号来表示。不同的计数系统有不同的基数，因此，相同的数字在不同的计数系统中，可以表示不同的数字。

十进制   二进制    十六进制
基数 =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

例如，观察上表，我们可以看到在不同的计数系统中，相同的数字 11 可以表示不同的数字。如果基数是 2，那么它指的是数字 3。如果基数是 16，那么它指的是数字 17。

你可能已经注意到了，在我们的示例中，当输入为 11 时，parseInt 返回 3，这对应于上表中的二进制列。

function foo(x, y) {
    console.log(x);
    console.log(y);
}
foo(1, 2); // log 输出 1, 2
foo(1); // log 输出 1, undefined
foo(1, 2, 3); // log 输出 1, 2

到了我们要讲的部分了！

function multiplyBy3(x) {
    return x * 3;
}
const result = [1, 2, 3, 4, 5].map(multiplyBy3);
console.log(result); // log 输出 [3, 6, 9, 12, 15];

[1, 2, 3, 4, 5].map(console.log);

[1, 2, 3, 4, 5].map(console.log);
// 上面语句等价于
[1, 2, 3, 4, 5].map(
    (val, index, array) => console.log(val, index, array)
);
// 不等价于
[1, 2, 3, 4, 5].map(
    val => console.log(val)
);

当一个函数被传递到 map() 中时，对于每个迭代，都会向函数中传递三个参数：currentValue 、currentIndex 和整个 array。这就是为什么每次迭代都要记录三个条目的原因。

我们现在有了解开这个谜团所需要的所有线索。

parseInt('11');                => 11
parseInt('11', 2);             => 3
parseInt('11', 16);            => 17
parseInt('11', undefined);     => 11 (基数为假)
parseInt('11', 0);             => 11 (基数为假)

['1', '7', '11'].map(parseInt); => [1, NaN, 3]
第一次第一次迭代 index = 0, array = ['1', '7', '11']
parseInt('1', 0, ['1', '7', '11']); => 1

// 第二次迭代 index = 1, array = ['1', '7', '11']
parseInt('7', 1, ['1', '7', '11']); => NaN

// 第三次迭代, index = 2, array = ['1', '7', '11']
parseInt('11', 2, ['1', '7', '11']); => 3

在基数为 2（二进制）的系统中，符号 '11' 表示数字 3。最后一个参数被忽略。

['1', '7', '11'].map(parseInt) 不能按预期工作，是因为 map 在每次迭代时都会将三个参数传递到 parseInt() 中。第二个参数 index 作为 radix 参数传递给 parseInt。因此，数组中的每个字符串都使用不同的基数进行解析。'7' 按照基数 1 进行解析，即 NaN；'11' 按照基数 2 进行解析，即 3。'1' 按照默认基数 10 进行解析，因为它的索引 0 是假。

['1', '7', '11'].map(numStr => parseInt(numStr));

英文原文: https://medium.com/dailyjs/parseint-mystery-7c4368ef7b21