關於面試題：[1, 2, 3].map(parseInt)問題的剖析

1、前言

最近有小夥伴在公號中諮詢了胡哥這道面試題，竊覺得是比較有意思的一道面試題，於此分享給各位小夥伴。先把答案給了各位，和你理解的同樣嗎？！

[1, 2, 3].map(parseInt) // [1, NaN, NaN]複製代碼

若是你答案你都明白，請出門左轉：React源碼/原理了解一下。

2、剖析

這道面試題，自己並不複雜。不能正確回答問題的小夥伴，大多數集中於對parseInt這個函數的不瞭解或者瞭解的不全面，下面就由胡哥爲你們抽絲剝繭一一講述。

1. map函數

map()方法建立一個新數組，其結果是該數組中每一個元素都調用一個提供的函數後返回的結果。

語法

let newArray = arr.map(function calback(currentValue[, index[, array]]) {
    // Return element for newArray
}[, thisArg])複製代碼

callback回調函數

參數名	含義	可選
currentValue	callback 數組中正在處理的當前元素	必選
index	calback 數組中正在處理的當前元素的索引	可選
array	map方法調用的數組	可選

thisArg

thisArg，可選參數，支持callback函數時值被用做this

[1, 2, 3].map((v) => {
    return v * v
})
// [1, 4, 9]複製代碼

2. parseInt函數

parseInt(string, radix)將一個字符串string轉爲radix進制的整數，radix爲介於2-36之間的數。返回值：返回解析後的整數值，若是被沒法被轉化成數值則返回NaN

parseInt(10) // 10 ---- 10進制的字符串'10'轉成10
parseInt(10, 2) // 2 ---- 2進制的字符串’10‘轉成2
parseInt(3, 2) // NaN --- 在2進制中不存在3複製代碼

額外補充：

在基數爲 undefined，或者基數爲 0 或者沒有指定的狀況下，JavaScript 做以下處理：

若是字符串 string 以"0x"或者"0X"開頭, 則基數是16 (16進制).

若是字符串 string 以"0"開頭, 基數是8（八進制）或者10（十進制），那麼具體是哪一個基數由實現環境決定。ECMAScript 5 規定使用10，可是並非全部的瀏覽器都遵循這個規定。所以，永遠都要明確給出radix參數的值。

若是字符串 string 以其它任何值開頭，則基數是10 (十進制)。

3、見證奇蹟的時刻

在完整了解了map和parseInt函數後，咱們再來看這道面試題[1, 2, 3].map(parseInt)，至關於將數組中元素1, 2, 3依次傳入到parseInt中，同時不要忘記了同時傳入的參數數組索引index。

[1, 2, 3].map(parseInt) 可看作寫法爲：

[1, 2, 3].map((v, index) => {
    return parseInt(v, index)
})

結果爲：[parseInt(1, 0), parseInt(2, 1), parseInt(3, 2)] ===> [1, NaN, NaN]複製代碼

注意此處的寫法爲一種方便理解的寫法，實際上parseInt就充當了callback。

4、結語

以上就是胡哥關於面試題：[1, 2, 3].map(parseInt)的講述，歡迎你們關注、留言、分享。

後記

以上就是胡哥今天給你們分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一塊兒聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公衆號，可與胡哥繼續深刻交流呦！