經過面試題學前端（一）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 方法的不熟悉，加上沒有仔細分析該面試題，致使本身答錯該題。

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