为什么 parseInt 使用 Array#map 产生 NaN？

Question

来自Mozilla Developer Network：

[1,4,9].map(Math.sqrt)

将产生：

[1,2,3]

为什么要这样做：

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

输出这个：

[1, NaN, NaN]

我在 Firefox 3.0.1 和 Chrome 0.3 中进行了测试，作为免责声明，我知道这不是跨浏览器功能（没有 IE）。

我发现以下将达到预期的效果。但是，它仍然不能解释parseInt 的错误行为。

['1','2','3'].map(function(i){return +i;}) // returns [1,2,3]

Answer 1

你可以这样解决这个问题：

array.map(x => parseInt(x))

例子：

var arr = ["3", "5", "7"];

console.log(
  arr.map(x => parseInt(x))
);

Answer 2

Array.map中的回调函数有三个参数：

来自您链接到的同一 Mozilla page：

使用三个参数调用回调：元素的值、元素的索引和被遍历的 Array 对象。"

所以如果你调用一个函数parseInt，它实际上需要两个参数，第二个参数将是元素的索引。

在这种情况下，您最终使用基数 0、1 和 2 依次调用 parseInt。第一个与不提供参数相同，因此它默认基于输入（在本例中以 10 为底）。基数 1 是不可能的数基数，而 3 不是基数 2 中的有效数：

parseInt('1', 0); // OK - gives 1
parseInt('2', 1); // FAIL - 1 isn't a legal radix
parseInt('3', 2); // FAIL - 3 isn't legal in base 2 

所以在这种情况下，你需要包装函数：

['1','2','3'].map(function(num) { return parseInt(num, 10); });

或使用 ES2015+ 语法：

['1','2','3'].map(num => parseInt(num, 10));

（在这两种情况下，最好显式向parseInt 提供一个基数，如图所示，否则它会根据输入猜测基数。在一些较旧的浏览器中，前导 0 会导致它猜测八进制，这往往是有问题的。如果字符串以0x开头，它仍然会猜测十六进制。）

Answer 3

parseInt 恕我直言，出于这个原因，应该避免。您可以将其包装以使其在这些上下文中更安全，如下所示：

const safe = {
  parseInt: (s, opt) => {
    const { radix = 10 } = opt ? opt : {};
    return parseInt(s, radix);
  }
}

console.log( ['1','2','3'].map(safe.parseInt) );
console.log(
  ['1', '10', '11'].map(e => safe.parseInt(e, { radix: 2 }))
);

lodash/fp 默认将 iteratee 参数设置为 1 以避免这些陷阱。就我个人而言，我发现这些解决方法可以创建尽可能多的错误，因为它们可以避免。我认为将parseInt 列入黑名单以支持更安全的实施是一种更好的方法。

Answer 4

您可以使用Number 作为迭代函数来解决这个问题：

var a = ['0', '1', '2', '10', '15', '57'].map(Number);

console.log(a);

没有new操作符，Number可以用来进行类型转换。但是，它与 parseInt 不同：它不解析字符串，如果数字无法转换，则返回 NaN。例如：

console.log(parseInt("19asdf"));
console.log(Number("19asf"));

Answer 5

您可以使用箭头函数 ES2015/ES6 并将数字传递给 parseInt。基数的默认值为 10

[10, 20, 30].map(x => parseInt(x))

或者您可以显式指定基数以提高代码的可读性。

[10, 20, 30].map(x => parseInt(x, 10))

在上面的示例中，基数明确设置为 10

Answer 6

另一个（工作）快速修复：

var parseInt10 = function(x){return parseInt(x, 10);}

['0', '1', '2', '10', '15', '57'].map(parseInt10);
//[0, 1, 2, 10, 15, 57]

Answer 7

map 传递了第二个参数，这（在许多情况下）弄乱了parseInt 的基数参数。

如果你使用下划线，你可以这样做：

['10','1','100'].map(_.partial(parseInt, _, 10))

或不带下划线：

['10','1','100'].map(function(x) { return parseInt(x, 10); });

Answer 8

我敢打赌，parseInt 的第二个参数 radix 会很奇怪。我不知道为什么使用 Array.map 而不是直接调用它会破坏它。

//  Works fine
parseInt( 4 );
parseInt( 9 );

//  Breaks!  Why?
[1,4,9].map( parseInt );

//  Fixes the problem
[1,4,9].map( function( num ){ return parseInt( num, 10 ) } );