摘要：前言最近无意中发现了一道前端面试题一想，答案不是嘛。这只是前端题目中的一题，以后我还会总结更多的前端面试题的相关知识点，来学习前端的相关知识
前言
最近无意中发现了一道前端面试题：
[1, 2, 3].map(parseInt)
一想，答案不是 [1, 2, 3] 嘛。但在 chrome 控制台下运行一下，返回的却是 [1, NaN, NaN]。
这是怎么回事呢？让我们来看看 map() 和 parseInt() 方法的详细用法。
mapmap(callback, [thisArg]) 方法：
接受一个回调函数 callback，返回一个 新的数组
返回的数组的元素的值为调用 callback 函数所返回的值（原数组有几个元素，就调用几次 callback）
callback 接受 3 个参数：
currentValue：当前正在处理的数组元素的值
index：当前正在处理的数组元素的索引
arr：调用 map 方法的数组
map 方法一般用于对现有数组每一个元素进行相同逻辑的运算处理的场景。
例如平时我工作的时候，该方法用的最多的场景是 在 react 中通过 this.state 对象中的某个数组类型的属性来渲染具有相同 html 结构的 jsx：
class example extends React.component {
state = {
personList: [
{
name: "张三",
age: 18
},
{
name: "李四",
age: 19
},
{
name: "王五",
age: 20
}
]
}
render() {
return (
{this.state.personList.map(person => {
return
姓名：{person.name}
年龄：{person.age}
})}
)
}
}
parseInt
parseInt(string, [radix])：解析一个 字符串（第一个参数），返回一个 10 进制的整数
string：被解析的字符串（前后空格会被忽略，若不是字符串，则转换成字符串）
radix：指定 string（第一个参数）的基数（2~36，即 2 进制 ~ 36进制），若不传或传 0，则 string（第一个参数）以 10 进制 来解析
再来看 [1, 2, 3].map(parseInt)parseInt 回调函数会被调用三次：
// arr 表示数组 [1, 2, 3] // 第一次调用 parseInt(1, 0, arr) // 1 // 第二次调用 parseInt(2, 1, arr) // NaN // 第三次调用 parseInt(3, 2, arr) // NaN
首先，每一次调用 parseInt 回调函数，都会将 数字类型 转换为 字符串类型。
即 1 -> "1"，2 -> "2"，3 -> "3"
第一次调用时，因为 radix 为 0 ，所以 string 按照 10 进制 处理，返回 10 进制数 1
第二次调用时，因为 radix 为 1，不在 2~36 范围，直接返回 NaN
第三次调用时，因为 radix 为 2（二进制），但 string 为 "3"，不属于 二进制范围，所以返回 NaN
所以：[1, 2, 3].map(parseInt) 返回的是 [1, NaN, NaN]
更多：parseFloat[1, 2, 3].map(parseFloat) 返回的是 [1, 2, 3]，因为 parseFloat(string) 只接受一个参数 string
map() 文档
parseInt() 文档
parseFloat() 文档
由于自己对 parseInt 方法的不熟悉，加上没有仔细分析该面试题，导致自己答错该题。
这只是前端题目中的一题，以后我还会总结更多的前端面试题的相关知识点，来学习前端的相关知识！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96624.html
摘要：变量声明提升在中，函数声明与变量声明经常被引擎隐式地提升到当前作用域的顶部。对象的方法和属性是在全局范围内有效的。未形成标准，实现混乱。 前端面试题JavaScript（一） JavaScript的组成 JavaScript 由以下三部分组成： ECMAScript（核心）：JavaScript 语言基础 DOM（文档对象模型）：规定了访问HTML和XML的接口 BOM（浏览器对...
摘要：变量声明提升在中，函数声明与变量声明经常被引擎隐式地提升到当前作用域的顶部。对象的方法和属性是在全局范围内有效的。未形成标准，实现混乱。 前端面试题JavaScript（一） JavaScript的组成 JavaScript 由以下三部分组成： ECMAScript（核心）：JavaScript 语言基础 DOM（文档对象模型）：规定了访问HTML和XML的接口 BOM（浏览器对...
摘要：变量声明提升在中，函数声明与变量声明经常被引擎隐式地提升到当前作用域的顶部。对象的方法和属性是在全局范围内有效的。未形成标准，实现混乱。 前端面试题JavaScript（一） JavaScript的组成 JavaScript 由以下三部分组成： ECMAScript（核心）：JavaScript 语言基础 DOM（文档对象模型）：规定了访问HTML和XML的接口 BOM（浏览器对...
摘要：又到一年春招季，们又要奔波于一场又一场的面试。今天就先来小小总结一下方面的知识点，方便你我他。在发送请求前加上。在后面加上时间搓。这样页面的所有都会执行这条语句就是不需要保存缓存记录。如何解决跨域问题服务器上设置代理页面 又到一年春招季，coder们又要奔波于一场又一场的面试。今天就先来小小总结一下javascript方面的知识点，方便你我他。随时补充 js基本数据类型 Undef...
阅读 1180·2021-11-11 16:54
阅读 7942·2021-11-02 14:44
阅读 2193·2021-10-22 09:53
阅读 3120·2019-08-30 11:18
阅读 1739·2019-08-29 13:29
阅读 1868·2019-08-27 10:58
阅读 1507·2019-08-26 11:38
阅读 3303·2019-08-26 10:31
