经过面试题学前端（一）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 方法的不熟悉，加上没有仔细分析该面试题，致使本身答错该题。

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