【學習筆記】['1','2','3'].map(parseInt)的返回值是什麼？

前言

這是一道前端面試題，看到這個問題第一反應結果是否是 [1,2,3]，可是真正的結果是[1, NaN, NaN]，爲何呢？首先看下 Array.map() 函數在 MDN中的定義前端

Array.map()

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

var arr = [1, 2, 3];
var arr1 = arr.map(x => x * 1);
console.log(arr1); // 1,2,3
複製代碼

能夠看出 map 方法中接受一個函數 function，用來處理遍歷數組中的每個元素數組

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

這個 callback 一共能夠接收三個參數，第一個參數 currentValue 是數組中正在處理的當前元素，第二個參數 index 是數組中正在處理的當前元素的索引，第三個參數 array 是map方法被調用的數組markdown

thisArg 可選，執行 callback 函數時使用的 this 的值函數

parseInt(string, radix)

radix 解析字符串的基數，基數規則以下：ui

區間範圍介於 2~36 之間

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

當參數爲 0，parseInt() 會根據十進制來解析
若是忽略該參數，默認的基數規則：
- 若是 string 以 "0x" 開頭，parseInt() 會把 string 的其他部分解析爲十六進制的整數
```
parseInt("0xf")  // 15 
複製代碼
```
- 若是 string 以 0 開頭，其後的字符解析爲八進制或十六進制的數字
```
parseInt("08")   // 0 * 8 的 1 次方 + 8 * 8 的 0 次方 = 8
複製代碼
```
- 若是 string 以 1 ~ 9 的數字開頭，parseInt() 將把它解析爲十進制的整數
```
parseInt("88.99f")   // 88
複製代碼
```
- 只有字符串中的第一個數字會被返回
```
parseInt("10.33") // 10
複製代碼
```
- 開頭和結尾的空格是容許的
```
parseInt(" 69 10 ")  // 69
複製代碼
```
- 若是字符串的第一個字符不能被轉換爲數字，返回 NaN
```
parseInt("f")  // NaN 
parseInt("f", 16)  // 15
複製代碼
```

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

['1', '2', '3'].map(parseInt) 至關於this

['1', '2', '3'].map(function(cur,index){
  return parseInt(cur, index)
})
複製代碼

那麼代碼執行的是spa

parseInt('1', 0); // radix 爲 0 時，使用默認的 10 進制 -> 1
parseInt('2', 1); // radix 值範圍在 2-36，沒法解析，超出區間範圍 -> NaN
parseInt('3', 2); // radix 爲 2，用 2 進制來解析，應以 0 和 1 開頭，最大值小於 3，沒法解析 -> NaN
複製代碼

所以最終結果是：[1, NaN, NaN]code