面試題-['1', '2', '3'].map(parseInt)

[‘1’, ‘2’, ‘3’].map(parseInt)

錯誤答案

[1, 2, 3]

正確答案

[1, NaN, NaN]

解析

• 首先我們來看看這裏面的兩個方法

1. map

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

   參數

   ​ callback

   ​ 生成新數組元素的函數，使用三個參數：

   ​ currentValue

   ​ callback 數組中正在處理的當前元素。

   ​ index |可選

   ​ callback 數組中正在處理的當前元素的索引

   ​ array |可選

   ​ map 方法調用的數組

   ​ thisArg |可選

   ​ 執行 callback 函數時值被用作 this

   語法

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

​ 返回值

回調函數的結果組成了新數組的每一個元素。並返回這個新數組

​ 描述

map 方法會給原數組中的每個元素都按順序調用一次 callback。callback 每次執行後的返回值（包括 undefined）組合起來形成一個新數組。callback 函數只會在有值的索引上被調用。

callback 函數會被自動傳入三個參數：數組元素，元素索引，原數組本身

map 不修改調用它的原數組本身

2. parseInt

   parseInt(string, radix) 將一個字符串 string 轉換爲 radix 進制的整數，radix 介於 2~36之間的數。

   那我們一般使用 parseInt 的時候，就只輸入了一個 string 字符串，所以在這裏會忽略其實它還會接受第二個參數 radix ，但是在本例中，index 值會被自動傳入到 parseint 的第二個參數的地方，故這裏就有：

   ['1', '2', '3'].map(parseInt);
   
   // parseInt('1', 0);   // 在規範裏有很明確的說，如果基數爲0，且字符串以其他（‘0x’,'0X','0'以外）任何值開頭，則基數是10（十進制），所以這裏是 1
   // parseInt('2', 1);   // radix 的範圍是 2~36 所以這裏返回 NaN
   // parseInt('3', 2);   // 3 也不是二進制，故而返回也是 NaN
   // [1, NaN, NaN]
   

   如果要實現返回值是三個整數，可以這樣寫：

   // 1. 規定死 radix 
   ['1', '2', '3'].map(n => parseInt(n, 10))
   
   // 或者直接不傳
   ['1', '2', '3'].map(n => parseInt(n))