JavaScript之map与parseInt的陷阱

659 阅读3分钟
eg1

大厂前端面试都问些什么问题?入职爱奇艺年薪48万,面试经验总结

答案:1, NAN, 10

eg2

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

答案: 1, NAN, NAN

说明:

 注意到这个问题的原因是参考了这个国外某博客JavaScript可选参数危险。首先,我们了解一下map方法的定义

语法

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

参数

callback
      生成新数组元素的函数,使用三个参数:
currentValue:callback 数组中正在处理的当前元素。
index可选:callback 数组中正在处理的当前元素的索引。
array可选:map 方法调用的数组。
thisArg可选:执行 callback 函数时值被用作this

返回值

回调函数的结果组成了新数组的每一个元素。

其中的函数接收三个参数,一个必须,两个可选。问题就是出现在这里,函数接收三个参数。

parseInt的定义

语法

parseInt(string, radix);

参数

string
要被解析的值。如果参数不是一个字符串,则将其转换为字符串(使用 ToString 抽象操作)。字符串开头的空白符将会被忽略。
radix
一个介于2和36之间的整数(数学系统的基础),表示上述字符串的基数。比如参数 10 表示使用十进制数值系统。始终指定此参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当未指定基数时,不同的实现会产生不同的结果,通常认为其值默认为10,但是如果你的代码运行在过时的浏览器中,那么请在使用时总是显式地指定 radix

返回值

返回解析后的整数值。 如果被解析参数的第一个字符无法被转化成数值类型,则返回 NaN

注意:radix参数为n 将会把第一个参数看作是一个数的n进制表示,而返回的值则是十进制的。例如:

parseInt('123', 5) // 将'123'看作5进制数,返回十进制数38 => 1*5^2 + 2*5^1 + 3*5^0 = 38

描述

parseInt 函数将其第一个参数转换为字符串,解析它,并返回一个整数或NaN。如果不是NaN,返回的值将是作为指定基数(基数)中的数字的第一个参数的整数。

例如:radix参数为10 将会把第一个参数看作是一个数的十进制表示,8 对应八进制,16 对应十六进制,等等。基数大于 10 时,用字母表中的字母来表示大于 9 的数字。例如十六进制中,使用 A F


最终解释

JavaScript函数通常会忽略额外的参数,并且parseInt只需要两个参数,因此我们不必担心theArray这些调用中参数的影响。但是,第二个参数对parseInt影响很大。

在eg1中:

parseInt('1', '0'),0表示的是以十进制解析的值。

parseInt('2', '1') 1在parseInt中是无效的基数,返回‘NaN’值。

parseInt('3', 2) 3在二进制中是不合法的值。

parseInt('10', 2)  10在二进制中的含义,代表的是2



参考:www.cnblogs.com/cjvae/p/978…