小伙伴们面试好像经常会遇到这种问题,我们来一步步拆解它吧😲😲😲!!
一起来分解一下结构:前面是map方法,后面是parseInt方法。 下面来分别分析下他们的语法:
map方法
map()方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法分析([]都表示条件是可选的):
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
参数讲解:
callback:回调函数,接受三个参数:
currentValue:正在处理的当前数组元素,
index(可选):正在处理的当前元素的索引,
array(可选):调用map方法的数组。
thisArg(可选):callback函数中this的指向
其中的回调函数会被自动传入三个参数:数组元素(当前元素)、元素索引、原始数组本身,回调函数每次把返回值组合起来形成一个新的数组,不修改原数组。
thisArg的指向问题:
- 如果指定有值(除了null和undefined),则this的指向就是这个值;
- 如果省略了这个值或者值为null或者undefined,则this指向全局对象。
⚠️它的新处理后的值是要返回的,否则会得到undefined(不指定的话每个函数默认返回undefined)
parseInt方法
语法分析:
parseInt(string, radix)
参数讲解:
string:将要被解析的值。如果不是一个字符串则把它转换成一个字符串(默认调用toString),字符串开头的空白符将会被忽略
radix:介于2和36之间的整数,表示上述字符串的基数。当未指定基数时,不同的实现会产生不同的结果,通常将值默认为10(但是强烈建议指定该参数,保证阅读性跟可预测性)。
返回值解析:
返回解析后的整数值(十进制表示)。radix值为n时将会把第一个参数看作是某个数的n进制表示,返回值就是这个某个数。
当我们指定radix的值可能会遇到下面几种情况:
1.如果 parseInt 遇到了不属于radix参数所指定的基数中的字符那么该字符和其后的字符都将被忽略。接着返回已经解析的整数部分。parseInt将截取整数部分。开头和结尾的空白符允许存在,会被忽略。
parseInt('123',3) // 会忽略后面的'3',以3为基数去解析 => 5
2.如果第一个字符不能被转换成数字,parseInt返回NaN。
parseInt('321',3) // 第一个字符不能被转换成数字 => NaN
3.当radix不在2和36之间时,直接返回NaN。
4.当radix的值为undefined,0或者没有指定的情况下,会做如下处理:
| string | radix |
|---|---|
| 以'0x'或者'0X'开头 | 16 |
| 以'0'开头 | 8或者10,那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10,但是并不是所有的浏览器都遵循这个规定。因此,永远都要明确给出radix参数的值。 |
| 其他 | 10 |
另外说一下Number.prototype.toString()的toString方法
语法分析:
numObj.toString([radix])
参数讲解:
radix:这里的radix指定要用于数字到字符串的转换的基数(从2到36)。规则跟上述第四条一致。
举个例子🌰:
parseInt("17", 8); // =>15
parseInt(021, 8); // => 15 021被toString()得到"17"
由上面我们推出,实际上['1','2','3'].map(parseInt)的结果是:
parseInt('1',0,['1','2','3']) // 1被解析成某个数的10进制表示 => 1
parseInt('2',1,['1','2','3']) // radix取值范围不对 => NaN
parseInt('3',2,['1','2','3']) // 3不是有效的二进制数字 => NaN
这三个值组合成的新数组。 所以得出结果[1,NaN,NaN]