原文---JavaScript之map与parseInt的陷阱
问题来源
这个问题的来源是学习廖雪峰老师JS教程。问题如下:小明希望利用map()
把字符串变成整数,他写的代码很简洁:
'use strict';
var arr = ['1', '2', '3'];
var r;
r = arr.map(parseInt);
console.log(r);
// [1, NaN, NaN]
为什么不是[1, 2, 3]?这是因为两个两个函数的定义有冲突。下面详解:
map的定义
注意到这个问题的原因是参考了这个国外某博客JavaScript可选参数危险。首先,我们了解一下map方法的定义,如下:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
其中参数有一个函数callback
,这个函数需要三个参数:currentValue
(必须):处理的数组中的当前元素;index
(可选):当前处理的元素在数组中的索引值;array
(可选):调用map的数组。thisArg
(可选):对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"。
所以,map函数接收的是两个参数,一个函数,另一个是thisArg
。这里我们主要关注的是其中的函数接收三个参数,一个必须,两个可选。问题就是出现在这里,函数接收三个参数。
parseInt的定义
这个函数用于解析一个字符串,并返回一个整数。定义如下:
parseInt(string, radix)
参数string
(必须):表示的是要被解析的字符串。radix
(可选):表示表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。第二个可选参数,就是问题的另一来源了。
问题详解
了解完两个函数的定义后,我们就知道小明代码的问题了:
var arr = ['1', '2', '3'];
var r;
r = arr.map(parseInt);
我们通常以为上述代码中 arr.map(parseInt);
表示的是
parseInt("1")
parseInt("2")
parseInt("3")
实际上应该是:
parseInt("1", 0, arr)
parseInt("2", 1, arr)
parseInt("3", 2, arr)
其中的arr
是['1', '2', '3']
。我们知道,JavaScript函数通常会忽略额外的参数,并且parseInt
只需要两个参数,因此我们不必担心theArray
这些调用中参数的影响。但是,第二个参数对parseInt
影响很大。parseInt("1", 0)
没有问题,0表示的是以二进制为基数解析‘1’
。但是后面的parseInt("2", 1)
以及parseInt("3", 2)
就有问题了。1
在parseInt
中是无效的基数,返回‘NaN’
值;2
虽然是有意义的基数,但是因为‘3’
不是合法的二进制数,所以也返回的是NaN
。至此,问题错误已经明了。下面是解决方案。
解决方案
解决的方法很简单,就是修饰一些parseInt
函数。代码如下:
'use strict';
var arr = ['1', '2', '3'];
var r;
r = arr.map(function parseInt2(x) {
return parseInt(x);
});
console.log(r);
或者我们使用Number()
方法,这样也会把字符串参数解析成十进制数,并且只需要一个参数。代码如下:
'use strict';
var arr = ['1', '2', '3'];
var r;
r = arr.map(Number);
console.log(r);
当然,也可以从map
下手解决问题。一个可能的方法如下:
Function.prototype.only = function(numberOfArgs) {
var self = this; //the original function
return function() {
return self.apply(this,[].slice.call(arguments,0,numberOfArgs))
}
};
arr.map(parseInt.only(1));
以上,就是JavaScript中map与parseInt冲突的问题的来源、解析、解决了。