muxin-4/muxin-note

blog 🚲

Learning notes

muxin-note's Issues

Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript 5min read

启动控制台（Chrome F12 ），粘贴下面的代码，点击回车（或者运行下面的代码）。
['1', '7', '11'].map(parseInt);
我们得到的不是一个整数数组[1,7,11]，而是[1,nan, 3]。什么?要了解到底发生了什么，我们首先要讨论一些Javascript概念。如果你想要一个TLDR，我已经在这个故事的结尾做了一个简短的总结。

map()

总算到了这！
Map 是数组原型的方法，map返回了一个新的数组，该数组是将原始数组的每个元素调用函数处理后的结果。例如，下列代码将数组中的每一个元素都乘以3。

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

我应该能够将console.log作为参数传递给map（）…对吗？
[1, 2, 3, 4, 5].map(console.log);

发生了一些非常奇怪的事儿。不只是记录了值，每一个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和整个数组。这就是为什么每次迭代记录三个记录的原因。

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