['1', '2', '3'].map(parseInt) 輸出什麼？爲什麼？（深度解析）

['1', '2', '3'].map(parseInt) 輸出什麼？爲什麼？

輸出： [1, NaN, NaN]

爲什麼：

1.map函數和parseInt函數說明：

Array.prototype.map()說明，參考mdn

var arr=[]
var new_array = arr.map(function callback(currentValue, index, array) {
 // Return element for new_array
})

map 函數接受一個callback生成新數組元素的函數

callback 函數會被自動傳入三個參數：

數組元素(currentValue | 必選)，

元素索引(index | 可選)，

原數組本身(array | 可選)

---

parseInt(string, radix)說明，參考mdn

string

要被解析的值。如果參數不是一個字符串，則將其轉換爲字符串(使用 ToString 抽象操作)。字符串開頭的空白符將會被忽略。

radix

一個介於2和36之間的整數(數學系統的基礎)，表示上述字符串的基數。比如參數"10"表示使用我們通常使用的十進制數值系統。始終指定此參數可以消除閱讀該代碼時的困惑並且保證轉換結果可預測。當未指定基數時，不同的實現會產生不同的結果，通常認爲其值默認爲10，但是請在使用時總是顯示的指定它。

則上面的代碼就變成這樣

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

即返回的值分別爲：

parseInt('1', 0) // 1
parseInt('2', 1) // NaN, 第二個參數不在2-36之間
parseInt('3', 2) // NaN, 3 不是二進制

2.深度解析：parseInt(string, radix)

// radix參數
// 默認爲10（十進制）
// radix爲0時，且string參數不以“0x”和“0”開頭時，按照10爲基數處理  

// 如果第一個參數string不能被轉換成數字，parseInt返回NaN。

parseInt("Hello", 2); // NaN
parseInt(10)          // 10
parseInt(10,  10)     // 10
parseInt(10, 0);      // 10


// radix 取值範圍爲 2-36。  超過36返回NaN。 小於2不等於0即只能是1時返回NaN。爲0時，且string參數不以“0x”和“0”開頭時，按照10爲基數處理  

parseInt(10, 0)  // 10
parseInt(10, 1)  // NaN
parseInt(10, 3)  // 3
parseInt(10, 37) // NaN

// 如何計算最終輸出？

parseInt(10, 3)
// 首先參數string中, 每一位都小於3（1 < 3 && 0 < 3），並且 radix參數在2到36之間 ，所以這時候我們應該是有個正確的輸出的 。
// 計算： 現在是3進制，則輸出結果爲：0 * (3^0) + 1 * (3^1) = 3 ==>輸出 3

parseInt(101, 2) // 5
// 同理, 101每一位都小於2（1 < 2 && 0 < 2），並且 radix在2到36之間
// 計算： 現在是2進制，則輸出結果爲：1 * (2^0) + 0 * (2^1) + 1 * (2^2) = 5 ==>輸出 5

parseInt(102, 2) // 2
// 在102中 ，第三位2 >= 2 (radix = 2) ，並且 radix在2到36之間
// 這個時候忽略大於等於radix位及其之後的所有數值 。則現在 102 ==> 10
// 計算： 現在是2進制，則輸出結果爲：0 * (2^0) + 1 * (2^1) = 2 ==>輸出 2

parseInt(1061, 3) // 3
// 在1061中 ，第三位 6 >= 3 (radix = 3) ，並且 radix在2到36之間
// 這個時候忽略大於等於radix位及其之後的所有數值 。則現在 1061 ==> 10
// 計算： 現在是3進制，則輸出結果爲：0 * (3^0) + 1 * (3^1) = 3 ==>輸出 3

parseInt(3061, 3) // NaN
// 第一位大於等於radix時，NaN

3.實際代碼應該怎麼寫？

['1','2','3'].map(n=>parseInt(n,10))
// [1, 2, 3]

如果數組每項都是數字字符串的話，可以這樣

['1','2','3'].map(Number)
// [1, 2, 3]

參考鏈接：

1.mdn Array.prototype.map

2.mdn parseInt

3.https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/4