媒介

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

[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 要领的不熟悉，加上没有仔细分析该面试题，致使本身答错该题。

这只是前端题目中的一题，今后我还会总结更多的前端面试题的相干学问点，来进修前端的相干学问！