高頻網紅面試題['1','2','3'].map(parseInt) 原理解析

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

權威原文參考 A JavaScript Optional Argument Hazard

• 答案：[1,NaN,NaN]

• 解析：這個題，答主我是知道答案的，由於這個題是 網紅題 要解析他 咱們先來看看

map這個方法他或回調函數的參數 ，和他的使用

//這是MDN
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
複製代碼

• 語法

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

• 參數

• callback

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

• currentValue

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

• **index可選 ** 看到這裏先注意起來這個參數，思考一下

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

• array可選

  callback map 方法被調用的數組。

thisArg可選

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

• map 也是常有用的一個array的prototype方法，你們並不陌生，好如今咱們來看一看 parseInt，這個方法

他們會擦出什麼火花

緣由

• 注意到上面這2個傢伙，接下來就好解釋了
• 緣由： 其實就是 map的callback的第二個參數 index 也就是當前元素的索引 被當作parseInt 的第二個參數radix 的來使用了

仔細想一下，咱們本來覺得咱們的的三次調用時這樣的

parseInt('1')
parseInt('2')
parseInt('3')
複製代碼

其實是這樣被調用的

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

好，那麼重點來了，index 是如何影響 radix的呢？

• 第一次，當我咱們第一次調用的時候 是這樣的：parseInt('1',0) 這個是沒問題的 轉十進制的 看我紅框的圖片

  • 返回 1

• 第二次，調用第二個index參數是1,也是說1做爲數值的基礎。規範裏說的很清楚了，若是基礎是非0或者小於2，函數都不會查詢字符串直接返回NaN。

• 第三次，2做爲基數。這就意味着字符串將被解析成字節數，也就是僅僅包含數值0和1。parseInt的規範第十一步指出，它僅嘗試分析第一個字符的左側，這個字符還不是要求基數的有效數字。這個字符串的第一個字符是「3」，它並非基礎基數2的一個有效數字。因此這個子字符串將被解析爲空。第十二步說了：若是子字符串被解析成空了，函數將返回爲NaN。

  • 因此這裏的結果就應該是[1,NaN,NaN].

解決

這裏問題所在就是容易忽視parseInt是須要兩個參數的。map中有三個參數。因此這裏結合起來，就致使了上面問題。 換個方式寫：

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

這樣就不會出錯。

固然，咱們也能夠寫：

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

---

到此告一段落,後面會持續更新