一、前言
最近有小伙伴咨询了胡哥这道面试题,窃以为是比较有意思的一道面试题,于此分享给各位小伙伴。先把答案给了各位,和你理解的一样吗?!
[1, 2, 3].map(parseInt) // [1, NaN, NaN]
如果你答案你都明白,请出门左转:React源码/原理了解一下。
二、剖析
这道面试题,本身并不复杂。不能正确回答问题的小伙伴,大多数集中于对parseInt这个函数的不了解或者了解的不全面,下面就由胡哥为大家抽丝剥茧一一讲述。
1. map函数
map()方法创建一个新数组,其结果是该数组中每个元素都调用一个提供的函数后返回的结果。
语法
let newArray = arr.map(function calback(currentValue[, index[, array]]) {
// Return element for newArray
}[, thisArg])
callback回调函数
参数名 | 含义 | 可选 |
---|---|---|
currentValue | callback 数组中正在处理的当前元素 | 必选 |
index | calback 数组中正在处理的当前元素的索引 | 可选 |
array | map方法调用的数组 | 可选 |
thisArg
thisArg,可选参数,支持callback函数时值被用作this
[1, 2, 3].map((v) => {
return v * v
})
// [1, 4, 9]
2. parseInt函数
parseInt(string, radix)将一个字符串string转为radix进制的整数,radix为介于2-36之间的数。返回值:返回解析后的整数值,如果被无法被转化成数值则返回NaN
参数名 | 含义 | 可选 | 默认值 |
---|---|---|---|
string | 要被解析的值。如果参数不是一个字符串,则将其转为字符串 | 必选 | |
radix | 基数,介于2-36之间 | 可选 | 10 |
parseInt(10) // 10 ---- 10进制的字符串'10'转成10
parseInt(10, 2) // 2 ---- 2进制的字符串’10‘转成2
parseInt(3, 2) // NaN --- 在2进制中不存在3
额外补充:
在基数为 undefined,或者基数为 0 或者没有指定的情况下,JavaScript 作如下处理:
如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制).
如果字符串 string 以"0"开头, 基数是8(八进制)或者10(十进制),那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10,但是并不是所有的浏览器都遵循这个规定。因此,永远都要明确给出radix参数的值。
如果字符串 string 以其它任何值开头,则基数是10 (十进制)。
三、见证奇迹的时刻
在完整了解了map和parseInt函数后,我们再来看这道面试题[1, 2, 3].map(parseInt)
,相当于将数组中元素1, 2, 3依次传入到parseInt中,同时不要忘记了同时传入的参数数组索引index
。
[1, 2, 3].map(parseInt) 可看做写法为:
[1, 2, 3].map((v, index) => {
return parseInt(v, index)
})
结果为:[parseInt(1, 0), parseInt(2, 1), parseInt(3, 2)] ===> [1, NaN, NaN]
注意此处的写法为一种方便理解的写法,实际上parseInt就充当了callback。
四、结语
以上就是胡哥关于面试题:[1, 2, 3].map(parseInt)的讲述,欢迎大家关注、留言、分享。
后记
以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得**收藏
、转发
、点击右下角按钮在看
**,推荐给更多小伙伴呦,欢迎多多留言交流…
胡哥有话说,一个有技术,有情怀的胡哥!京东开放平台首席前端攻城狮。与你一起聊聊大前端,分享前端系统架构,框架实现原理,最新最高效的技术实践!