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

薛定喵的諤發表於2019-02-22
面試題

1、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，這個方法

他們會擦出什麼火花

高頻網紅面試題['1','2','3'].map(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)

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

相關文章