大家好，我是一碗周，一個不想被喝(內卷)的前端。如果寫的文章有幸可以得到你的青睞，萬分有幸~

面試官：['1', '2', '3'].map(parseInt)的結果是什么？為甚？

我：[1, 2, 3]。

面試官：你不用來了。

寫在前面

今天看到一道題，['1', '2', '3'].map(parseInt)的結果是什么？看到這個題下意識的覺得答案就是[1, 2, 3]，但實際上，答案是[1, NaN, NaN]，這是為什么呢？我們來一探究竟。

parseInt函數

首先我們來看一下parseInt()函數，關于parseInt()函數，MDN中是這樣介紹的：parseInt(string, radix)將一個字符串string轉換為radix進制的整數， radix為介于2-36之間的數。返回解析后的整數值。 如果被解析參數的第一個字符無法被轉化成數值類型，則返回NaN。

到這為止，我們對parseInt()函數有了一個基礎的了解，根據上面的描述，也就是說我們為parseInt()的第二個參數傳遞一個非2-36之間的數，返回結果是NaN，我們來測試一下：

console.log(parseInt(10, 0)) // 10
console.log(parseInt(10, 1)) // NaN
console.log(parseInt(10, 37)) // NaN

按照我們的思路，這里的結果應該是3個NaN，但實際并不是，關于radix參數，在MDN中有明確的解釋：

如果 radix 是 undefined、0或未指定的，JavaScript會假定以下情況：

1. 如果輸入的 string以 "0x" 或 "0x"（一個0，后面是小寫或大寫的X）開頭，那么radix被假定為16，字符串的其余部分被當做十六進制數去解析。
2. 如果輸入的 string 以 "0"（0）開頭， radix 被假定為8（八進制）或10（十進制）。具體選擇哪一個radix取決于實現。ECMAScript 5 澄清了應該使用 10 (十進制)，但不是所有的瀏覽器都支持。因此，在使用parseInt時，一定要指定一個 radix。
3. 如果輸入的 string 以任何其他值開頭， radix 是 10 (十進制)。

這就解釋了我們的parseInt(10, 0)的結果是10了。

Array.prototype.map方法

現在我們來了解一下map方法的作用，該方法接受兩個參數，第一個是一個回調函數，數組中的每一項都會執行該函數，這個回調函數接受三個參數，第一個是正在處理的元素，第二個是正在處理的索引，第三個是當前數組；第二個參數是調用回調函數的this。

下面代碼中展示了Array.prototype.map方法的基礎用法：

function doubleNum(n, i) {
  let doubleN = 2 * n
  console.log(`第{i+1}個元素的的二倍是${doubleN}`)
  return doubleN
}
let newArr = [1, 2, 3].map(doubleNum)
console.log(newArr)
/* 執行結果如下：
第{i+1}個元素的的二倍是2
第{i+1}個元素的的二倍是4
第{i+1}個元素的的二倍是6
[ 2, 4, 6 ]
 */

如果上面的寫法看不懂，我們可以將函數移動一下位置，代碼如下：

let newArr = [1, 2, 3].map(function (n, i) {
  let doubleN = 2 * n
  console.log(`第{i+1}個元素的的二倍是${doubleN}`)
  return doubleN
})

解題

經過上面的介紹，現在我們應該已經知道的這個題的結果了，它的運行情況如下：

• parseInt('1', 0)，直接按照10進制解析，結果為1；
• parseInt('2', 1)，傳入了非2~36的值，結果為NaN；
• parseInt('3', 2)，按照2進制進行解析，2進制可以解析的數字只有1和0，所以返回NaN。

知道了這一題的答案，我們來看一下下面這個代碼片段，它的運行結果又是什么：

['10','10','10','10','10'].map(parseInt);

• 首先parseInt('10', 0)的結果是10，不用解釋；
• 然后parseInt('10', 1)的結果是NaN，我們前面也解釋過了；
• parseInt('10', 2)的結果是2，這是因為10被轉換為二進制就是2；
• parseInt('10', 3)的結果是3，10被轉換為三進制就是3；
• parseInt('10', 4)以此類推。

最終結果是[10, NaN, 2, 3, 4]。