一道網紅面試題（騰訊、百度面試中都出現過）

在騰訊和百度的面試中，出現了這樣一道面試題，，被你們親切的稱呼爲網紅面試題，這道面試題就是。['1', '2', '3'].map(parseInt)的輸出結果是什麼？['1', '2', '3'].fliter(parseInt)的輸出結果是什麼？ 這個面試題，面試官可能不單單須要你說出他的結果，還須要你知道爲何會出現這樣的結果。

1、關鍵語法

一、parseInt

二、parseFloat

先看看parseInt和parseFloat的語法和使用，以便後續在實際例子中解釋。

2、Map

一、['1', '2', '3'].map(parseInt)

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

其實在使用map時，map的callback的第二個參數index引索值就成爲parseeInt的radix值。['1', '2', '3'].map(parseInt)在遍歷的過程。實際上是經歷了下面的過程。

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);
複製代碼

• parseInt('1', 0)：radix的值爲0，判斷字符串發現介於1~9，用10進制轉換，結果爲1.
• parseInt('2', 1)：radix的值爲1，若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN。
• parseInt('3', 2): radix的值爲2，這就意味着字符串將被解析成字節數，也就是僅僅包含數值0和1。parseInt的規範指出，它僅嘗試分析第一個字符的左側。這個字符串的第一個字符是「3」，它並非基礎基數2的一個有效數字。因此這個子字符串將被解析爲空。若是子字符串被解析成空了，函數將返回爲NaN。

二、['1', '2', '3'].map(parseFloat)

['1', '2', '3'].map(parseFloat)
// [1, 2, 3]
複製代碼

parseFloat相對於parseInt比較簡單，不用考慮第二個參數，只須要看第一個參數是否能正常轉換爲數字就行。

parseFloat('1');  // 1
parseFloat('2');  // 2
parseFloat('3');  // 3
複製代碼

一個小的知識點：如何快速將一個字符串數組轉化爲數字類型的數組

['1', '2', '3'].map(parseFloat)
['1', '2', '3'].map(Number)
複製代碼

3、filter

一、['1', '2', '3'].filter(parseInt)

['1', '2', '3'].filter(parseInt)
// ["1"]
複製代碼

filter 爲數組中的每一個元素調用一次 callback 函數，並利用全部使得 callback 返回 true 或等價於 true 的值的元素建立一個新數組。

parseInt('1', 0);
parseInt('2', 1);
parseInt('3', 2);
複製代碼

• parseInt('1', 0)：radix的值爲0，判斷字符串發現介於1~9，用10進制轉換，結果爲1，因此callback的結果等價於true，返回元素'1'。
• parseInt('2', 1)：radix的值爲1，若是該參數小於 2 或者大於 36，則 parseInt() 將返回 NaN，結果不等價於true，不返回。
• parseInt('3', 2): radix的值爲2，這就意味着字符串將被解析成字節數，也就是僅僅包含數值0和1。parseInt的規範指出，它僅嘗試分析第一個字符的左側。這個字符串的第一個字符是「3」，它並非基礎基數2的一個有效數字。因此這個子字符串將被解析爲空。若是子字符串被解析成空了，函數將返回爲NaN。

二、['1', '2', '3'].filter(parseFloat)

['1', '2', '3'].filter(parseFloat)
// ["1", "2", "3"]
複製代碼

使用parseFloat時，遍歷以後結果的每一項都是結果等價於true，因此所有返回。

4、反思

經過上述的map、filter，咱們聯想到數組其餘方法，當使用parseInt或者是parseFloat來替代callback使用，你只須要理解到parseInt和parseFloat工做原理，那麼針對這類問題，其實結果都是能很快輸出的，也能套用上面的解析過來，來回答面試官。這類面試題也不是什麼難題了。