parseInt()方法理解

parseInt()方法理解

通过下面几个题来深刻理解一下parseInt方法：

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

['1', '2', '3'].filter(parseInt)

['1', '2', '3'].reduce(parseInt)

'1 2 3'.replace(/\d/g, parseInt)

['1', '2', '3'].map(parseFloat)

parseInt(string, radix)方法用于解析字符串，并返回一个整数。

• 接收两个参数：string和radix，string为需要解析的字符串，radix为进制数，也就是将字符串按照几进制进行解析，当radix为2，表示将字符串按照二进制解析，依次类推；
• radix是可选参数，取值范围为2 ~ 36；
• 当radix为0或者不存在时，js会按照如下规则对字符串进行解析：<1>、当字符串以1-9开头时，会按照十进制解析；<2>、当字符串以0x开头时，会按照十六进制进行解析；<3>、当字符串以0开头时，会按照八进制或十六进制解析；

上述题目解析：

['1', '2', '3'].map(parseInt)
// map方法接收一个函数作为参数，数组中的每个元素都会执行传入的函数，数组中的元素及对应的索引会作为函数的参数
// 执行过程：
parseInt('1', 0) // 1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN

['1', '2', '3'].filter(parseInt)
// filter方法接收一个函数作为参数，数组中每个元素都会执行传入的函数，它会将所有元素在函数执行后结果为true的返回值重新组成一个新数组返回。
parseInt('1', 0) // 1
parseInt('2', 1) // NaN
parseInt('3', 2) // NaN
// Boolean(NaN)为false，最终返回的新数组为[1]

['1', '2', '3'].reduce(parseInt)
// reduce(function(accumulator, currentVal, currentValIndex, array){}, initVal)
// 上面是reduce的用法，从上面可以看出reduce方法有两个参数，第一个参数是函数，我们称它为累积器；第二个参数为初始值，是个可选参数，当没有传时，取数组的第一个元素；
// 数组中的每个元素都会执行累积器函数，该函数有四个参数，第一个参数是上一个元素执行后的返回值，第二个参数为当前元素的值，第三个参数为当前元素的索引，第四个参数为整个数组值；
// 下面就是上述执行过程：初始值为空，所以第一轮时：accumulator是‘1’，currentVal是'2'，第二轮时，accumulator是上一轮返回值1，currentVal是'3'，最终返回1；
parseInt('1', '2') // 1
parseInt(1, '3') // 1
// 最终返回值为1

'1 2 3'.replace(/\d/g, parseInt)
// replace()方法第二个参数可以接收一个函数，会传三个参数，第一个参数是匹配规则匹配到的值，第二个参数是匹配到的值在字符串中的位置，第三个参数为字符串本身；
parseInt('1', 0) // 1
parseInt('2', 2) // NaN
parseInt('3', 4) // 3
// 最后返回'1 NaN 3'

['1', '2', '3'].map(parseFloat)
// parseFloat方法用于解析字符串并返回一个浮点数，当字符串以数字开头时，parseFloat会从头解析到非数字地方停止，以数值的形式返回解析的数字；如果字符串开头非数字，则返回NaN；
parseFloat('1') //1
parseFloat('2') // 2
parseFloat('3') // 3
// 最后返回[1, 2, 3]

参考文献：

[1] 一道网红面试题（腾讯、百度面试中都出现过）
[2] Array.prototype.reduce()
[3] replace()