前言

最近無意中發現了一道前端面試題：

[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 方法的不熟悉，加上沒有仔細分析該面試題，導致自己答錯該題。

這只是前端題目中的一題，以後我還會總結更多的前端面試題的相關知識點，來學習前端的相關知識！