通过面试题学前端（一）parseInt

前言

最近无意中发现了一道前端面试题：

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

一想，答案不是 [1, 2, 3] 嘛。但在 chrome 控制台下运行一下，返回的却是 [1, NaN, NaN]。

这是怎么回事呢？让我们来看看 map() 和 parseInt() 方法的详细用法。

map

map(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 (
      <React.Fragment>
        {this.state.personList.map(person => {
          return <div className="person-info">
            <span>姓名：{person.name}</span>
            <span>年龄：{person.age}</span>
          </div>
        })}
      </React.Fragment>
    )
  }
}

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 方法的不熟悉，加上没有仔细分析该面试题，导致自己答错该题。

这只是前端题目中的一题，以后我还会总结更多的前端面试题的相关知识点，来学习前端的相关知识！