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

Question

来自Mozilla开发者网络:

[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有三个参数:

从您链接到的相同Mozilla页面:

使用三个参数调用回调:元素的值,元素的索引和遍历的Array对象."

因此,如果调用parseInt实际需要两个参数的函数,则第二个参数将是元素的索引.

在这种情况下,您最终parseInt依次使用基数0,1和2进行调用.第一个与不提供参数相同,因此基于输入(在这种情况下为基数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 2

map正在传递第二个参数,这是(在许多情况下)弄乱了parseIntradix参数.

如果您使用下划线,您可以:

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

或者没有下划线:

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

Answer 3

您可以使用Number作为iteratee函数来解决此问题:

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 4

我要打赌,这是parseInt的第二个参数,即基数,这是一个时髦的事情.为什么打破使用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 ) } );