前端基礎知識備忘——parseInt

先來看一道經常會看到的前端面試題:

[1,2,3,4,5,6,7,8,9].map(parseInt) 

輸出的結果是什麼?

很多第一次看到這道題或者是js基礎不太牢靠的前端朋友可能會順口就來,so easy,結果就是:[1,2,3,4,5,6,7,8,9]。

如果你直接這麼提交答案,嘿嘿,老鐵,等待你的就是一個零蛋喲!我們先來看看正確答案,然後再來分析是爲什麼。

正確答案:

[1, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]

那麼,我們來看看,爲什麼輸出的是這樣一個“奇葩” 的答案吧。

首先,我們先來看一下parseInt方法的參數都有哪些:

parseInt(string, radix)

參數說明:

注:如果parseInt的字符不是指定基數中的數字,則忽略該字符和所有後續字符,並返回解析到該點的整數值。parseInt將數字截斷爲整數值。允許使用前導空格和尾隨空格。 

string 必需。要被解析的字符串。
radix

可選。表示要解析的數字的基數。該值介於 2 ~ 36 之間。

如果省略該參數或其值爲 0,則數字將以 10 爲基礎來解析。如果它以 “0x” 或 “0X” 開頭,將以 16 爲基數。

如果該參數小於 2 或者大於 36,則 parseInt() 將返回 NaN。 

 從上面可以看出,parseInt的參數實際上是可以傳兩個的,第一個參數代表待轉換的字符串,第二個參數則代表帶解析的字符串的基數(也就是我們俗稱的進制,如我們最常聽說的:二進制(0101011)、十進制(1,2,3,4,5,6)、十六進制(如顏色值:#FFFFFF中的FFFFFF就是十六進制的表示形式))。

瞭解了parseInt的參數之後,我們再回過頭來看看上面那道題是怎麼計算出來的吧。

首先,數組[1,2,3,4,5,6,7,8,9]通過map方法進行循環,其實在循環體內部可以接收如下三個參數化:item、index、arr,即:

// 完整寫法
[1,2,3,4,5,6,7,8,9].map((item,index,arr)=>{

});

然後,將parseInt放入到循環裏面:

[1,2,3,4,5,6,7,8,9].map((item,index,arr)=>{
    //parseInt(1,0);// 但第二個參數爲0或者不傳時,默認是十進制因此結果是:1
    //parseInt(2,1);// 1進制數的合法數只有0,因此,2是非法的,因此結果是:NaN
    //parseInt(3,2);// 2進制數的合法數只有0,1,因此,3是非法的,因此結果是:NaN
    //parseInt(4,3);// ...
    //parseInt(5,4);// ...
    //parseInt(6,5);// ...
    //parseInt(7,6);// ...
    //parseInt(8,7);// ...
    //parseInt(9,8);// ...
    return parseInt(item,index);
});

從上面的代碼我們就可以看出除了數組第一個元素因爲索引是0默認代表10進制而輸出1之外,其他的元素都因爲所給數字超出了對應的基數範圍而返回結果NaN。

好了,終於知道輸出上面結果的原因了。老鐵,是不是信心滿滿,覺得自己完全掌握了呢,來試一下這道題看看:

parseInt("1",3);//輸出結果爲:1
parseInt("3",3);//輸出結果爲:NaN
parseInt("12",3);//輸出結果爲:5
parseInt("14",3);//輸出結果爲:1

上面4個輸出中,前兩個很容易理解,剛剛都講過了,不再贅述,我們重點來講一下最後兩個爲什麼輸出這樣一個結果:

// parseInt會將字符串"12"拆分成兩個部分,分別是"1"和"2",因爲"1"不在最後一位上,
// 因此,此處的"1"可不是代表數字1,而是代表有一個基數,基數是什麼呢?
// 就是我們傳的第二個參數3,也就是說,這裏的"1"我們可以等價爲3,
// 後面的"2",因爲是最後一位,只要他是在合法範圍內的數字,那麼他是多少就是多少,也就是說"2"=2;
// 然後,我們在講兩個數字相加:3+2=5;所以最後輸出的結果便是5啦
parseInt("12",3);//輸出結果爲:5
// 同理,可將"14"拆分成"1"和"4",這裏有一個比較特殊的地方,因爲"4"是不合法的數字,
// 因爲以3爲基數的只能由0,1,2者三個數字組成,在parseInt中,如果遇到不合法的數字,
// 會被直接忽略,只看那些合法的數字。那麼,把"4"忽略掉之後,就只剩下一個"1"了,
// 因爲"1"是最後一位,所以數字是多少就是多少,因此,最終輸出結果爲:1
parseInt("14",3);// 輸出結果爲:1

以上便是本人對parseInt的一些粗淺的看法與理解,記錄下來一是爲了備忘,二也是爲了給以後踩坑的小夥伴們一些參考。

發佈了24 篇原創文章 · 獲贊 12 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章