快速理解["1", "2", "3"].map(parseInt)

這道很經典的面試題已通過去不少年了,可是如今依然被不少人 傳頌 着。之前研究過這道題,以爲弄懂了。可是今天被別人問起這道題時回答的又有點 模棱兩可。

咱們先看一下輸出結果

考察點：

1. Array.map()
2. parseInt()
3. 進制(進制之間轉換)

那咱們分別研究一下這三個要點。

Array.map()

這個應該是咱們最經常使用的Array方法之一。早在ES6就有了。
map() 方法建立一個新數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。

var new_array = arr.map(function callback(currentValue,index,array) {
 // Return element for new_array 
},thisArg)
複製代碼

• Array.map()參數

callback 生成新數組元素執行的函數(三個參數)
    currentValue callback 數組中正在處理的當前元素。
    index callback 數組中正在處理的當前元素的索引。
    array map 方法被調用的數組。

thisArg 執行 callback 函數時使用的this 值。

返回值 一個新數組，每一個元素都是回調函數的結果。

• Array.map()示例

let arr = ["1","2","3"].map(function callback(currentValue,index,array) {
    console.log(`${currentValue}+${index} [${array}]`)
    return currentValue*2
});
console.log(arr);

output:
// 1+0 [1,2,3]
// 2+1 [1,2,3]
// 3+2 [1,2,3]
// [2, 4, 6]


var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值爲[1, 2, 3], numbers的值仍爲[1, 4, 9]
複製代碼

parseInt()

parseInt(string, radix);
複製代碼

• parseInt()參數

string 要被解析的值。若是參數不是一個字符串，則將其轉換爲字符串。
radix 一個介於2和36之間的整數(數學系統的基礎)，表示上述字符串的基數。當未指定基數時，不一樣的實現會產生不一樣的結果，一般認爲其值默認爲10，可是請在使用時老是顯示的指定它。

注意 radix參數爲n 將會把第一個參數看做是一個數的n進製表示，而返回的值則是十進制的。
這是MDN上的解釋 parseInt(string, radix) 將一個字符串 string 轉換爲 radix 進制的整數， radix 爲介於2-36之間的數。
對於上面兩句話我理解的時候老是有點怪。我以爲能夠這樣理解parseInt(string, radix), 把radix進制的string轉成10進制的值,並返回
例如：

parseInt('123', 5) // 將'123'看做5進制數，返回十進制數38 => 1*5^2 + 2*5^1 + 3*5^0 = 38
複製代碼

這裏將5進制的123轉成10進製爲38

• parseInt()示例

parseInt("20"); //返回20  radix默認爲10,也就是10進制的20轉成10進制,那麼也是20
parseInt("10",2);//返回2  radix爲2,也就是2進制的10轉成10進制,1*2^1+1*2^0 = 2
parseInt("103",2);//返回2 radix爲2,也就是2進制的103轉成10進制,由於2進制只包括0,1,因此3不是2進制的數字(只計算3以前的值也就是10),1*2^1+1*2^0 = 2
parseInt("213",4);//返回39 radix爲4,也就是4進制的213轉成10進制,2*4^2+1*4^1+3*4^0 = 32+4+3 = 39
...
複製代碼

這裏進制是怎樣轉換的呢,好比4進制的213轉成10進制

2*4^2+1*4^1+3*4^0 = 32+4+3 = 39

拿第一個數*進制的第一個數的位數的次方+第二個數*進制的第二個數的位數的次方+···直到加上最後一位數*進制的0次方(位數從右向左數0,1,2...)
複製代碼

看下面的介紹：

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

若是字符串 string 以"0x"或者"0X"開頭, 則基數是16 (16進制).
若是字符串 string 以"0"開頭, 基數是8（八進制）或者10（十進制），那麼具體是哪一個基數由實現環境決定。ECMAScript 5 規定使用10，可是並非全部的瀏覽器都遵循這個規定。所以，永遠都要明確給出radix參數的值。
若是字符串 string 以其它任何值開頭，則基數是10 (十進制)。
若是第一個字符不能被轉換成數字，parseInt返回NaN。

算術上， NaN 不是任何一個進制下的數。 你能夠調用isNaN 來判斷 parseInt 是否返回 NaN。NaN 參與的數學運算其結果老是 NaN。

複製代碼

那咱們來看這幾個例子怎麼返回

parseInt("1",0); //radix爲10也就是10進制的1轉10進制,也就是 1
parseInt("2",1);//radix 介於2和36之間的整數,當radix不在這個範圍內的解析全都返回 NaN
parseInt("3",2);// 3不是2進制的數字,3前面也沒有其餘數字,因此這裏返回 NaN
複製代碼

咱們知道parseInt爲一個函數,其源代碼應該是這個樣子的:

function parseInt(string, radix){
    return xxx;
}
複製代碼

當寫成這樣Arrar.map(parseInt)的形式時 callback === parseInt
parseInt(string, radix)的兩個參數分別對應currentValue index
這個時候parseInt就變成了

function parseInt(currentValue,index) {
    return xxx;
};
複製代碼

["1", "2", "3"].map(parseInt)
            ||
["1", "2", "3"].map(function parseInt(currentValue,index) {
    return xxx;
})
            ||
["1", "2", "3"].map(function callback(currentValue,index) {
    return parseInt(currentValue,index);
})           
複製代碼

當currentValue爲1時 return parseInt(1,0)
當currentValue爲2時 return parseInt(2,1)
當currentValue爲3時 return parseInt(3,2)

在上面咱們就分析了

parseInt("1",0);//返回 1
parseInt("2",1);//返回 NaN
parseInt("3",2);//返回 NaN
複製代碼

so 綜上所述：["1", "2", "3"].map(parseInt) = [1, NaN, NaN]