parseInt面试知识讲解

在js面试中，parseInt 是一个经常让大家出错的考点，看了网上的很多讲解都偏官方不好理解，下面我将用自己的大白话让大家理解parseInt的相关用法

首先我们看一道题并思考一下结果

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

如果上面这种形式大家理解有困难的话，这道题可以转化为下面这种形式

["1", "2", "3"].map(function(item,idx){
    return parseInt(item,idx);
})

好，现在我们先给一下官方的文档

语法：

parseInt(string, radix)

参数：

string:必需。要被解析的字符串。

radix:可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

不知道各位能不能理解官方的解释，反正我理解起来有点困难

首先第一个参数 string

1. 这个很好理解，就是一个普通的字符串，什么字符串都行
2. 如果该参数不能被转化为数字，则函数返回NaN
3. 该参数前后可以加空格
4. 如果该参数以 “0x” 或 “0X” 开头,则以16为基数（基数的理解在第2个参数中会提到）

比如:

"111"
" aaa "
"undefined"

第二个参数我们需要注意几个点

1. 首先这个参数是可选的，如果没有改参数，它的值默认值为0。
2. 该参数的值结介于 2 ~ 36之间；如果小于2或者大于36，我们就直接返回NaN就好
3. 该参数代表的是一个基数，这里我们可以简单地理解为该参数是几，第一个string参数就是几进制的

可能看完我的描述还是有些不明白，我们举几个简单的例子

例子1：
parseInt("2");
返回值为2
当只有一个参数的时候并且该参数能被转化为数字，则基数为10，本题可以转化为
parseInt("2",10);

例子2：
parseInt("3",10); 
返回值为3
可以理解为：10进制的3是几，很明显结果是3

例子3：
parseInt(" 11 ",2);
返回值为3
可以理解为：2进制的11是几，结果是 2+1=3
（第一个参数前后加空格都是被允许的）

例子4：
parseInt("17",8); 
返回值为15
可以理解为：8进制的17是几，结果是 8+7=15 

例子5：
parseInt("1f",16);
返回值为31
可以理解为：16进制的1f是几，f代表15，1f就是 16+15=31

例子6：
parseInt("0xaf",16);
返回值为175
可以理解为：16进制的af是几，a代表10，f代表15，结果为10*16+15=175

例子7
parseInt(021,8);
返回值15
这道题有点特殊，第一个变量是021的数字不是字符串，所以我们首先要把它变成10进制也就是17，然后题目变成了
parseInt(17,8);
返回结果为：8+7=15

例子8
parseInt("hello",10);
返回值NaN
当第一个参数不能被转化为数字的时候，返回NaN

例子9
parseInt("4",3);
返回NaN
3进制不可能出现数字4，所以返回NaN

相信大家看到这已经对parseInt有了一定的理解了。
现在我们再回到本文最开始的题目

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

转化为

["1", "2", "3"].map(function(item,idx){
    return parseInt(item,idx);
})

走了3次parseInt函数，分别是

parseInt("1",0); //1
parseInt("2",1); //NaN（因为第2个参数小于2）
parseInt("3",2); //NaN（3不能是2进制）

所以本题结果为
[1, NaN, NaN]

参考资料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt