在js數組的map方法中使用parseInt詳解

1.咱們先看一下這個經典題目

從代碼量上看是很是的簡潔，可是知識點但是一點都很多，下面我就這道題作一個簡單的解析本人水平有限，僅供各位掘友參考，若有錯誤，歡迎你們給我指正

let arr = [1, 2, 3, 4];
arr = arr.map(parseInt);
console.log(arr);//=> 1,NAN,NAN,NAN
複製代碼

2.解題前置知識瞭解

我第一次看到答案的時候也是一臉懵逼，左思右想而不得其解，後來通過多方查找資料才得以理解，首先咱們須要瞭解一些前置知識，才能理解這一道題目的重點

2.1數組中的map函數理解

• map是數組原型上的一個方法

//全部的數組實例均可以調用它
Array.prototype.map === [].map;
複製代碼

• map函數語法

/*
*params:
*   callback生成新數組元素的函數，使用三個參數：
*       currentValue：callback 中正在處理的當前元素。
*       index：callback 數組中正在處理的當前元素的索引。(可選)
*       array: map 方法調用的數組。（可選）
*   return 返回值是回調函數的結果組成了新數組的每個元素
*/
var new_array = arr.map(function callback(currentValue, index, array) {
 // Return element for new_array 
})
複製代碼

• map() 方法的做用是遍歷調用它數組的每個元素，根據每一個元素都調用一次提供的函數後的返回值組成一個新的數組。下面給出一個簡單的實例代碼

const 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]
複製代碼

2.2 window下的parseInt（）函數理解

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

• parseInt是window下的一個方法，因此再js中能夠直接調用
• parseInt的語法

/*
*params :
*   string：要被解析的值。若是參數不是一個字符串，則將其轉換爲字符串(使用  ToString 抽象操做)。字符串開頭的空白符將會被忽略。
*   radix(可選)：從 2 到 36，表明該進位系統的數字。例如說指定 10 就等於指定十進位。請注意，一般預設值不是 10 進位！
*/
parseInt(string, radix);
複製代碼

• radix參數詳解

radix存在如下特殊狀況

• 若是 radix 是 undefined、0或未指定的，JavaScript會假定如下狀況：
  • 若是輸入的 string以"0x"或"0x"（一個0，後面是小寫或大寫的X）開頭，那麼radix被假定爲16，字符串的其他部分被解析爲十六進制數。
  • 若是輸入的 string以"0"（0）開頭，radix被假定爲8（八進制）或10（十進制）。具體選擇哪個radix取決於實現。ECMAScript5澄清了應該使用10(十進制)，但不是全部的瀏覽器都支持。所以，在使用 parseInt 時，必定要指定一個 radix。
  • 若是輸入的 string以任何其餘值開頭，radix是10(十進制)。若是第一個字符不能轉換爲數字，parseInt會返回 NaN。
• radix 小於 2 或大於 36（0除外） ，或第一個非空格字符不能轉換爲數字。

3.解題

掌握了以上只是，再看這道題就沒那麼不容易理解了

arr = arr.map(parseInt);//
//這句話實際的執行過程以下：
parseInt('1',0);//=>radix爲特殊值'0',按十進制轉換==>1
parseInt('2',1);//=>radix爲1，不知足2-36的範圍==>NAN
parseInt('3',2);//=>radix爲2，按二進制來解析字符串3，3不符合二進制數字規範，==>NAN
parseInt('4',3);//=>radix爲3，按三進制來解析字符串4,4不符合二進制數字規範，==>NAN
複製代碼

如今是否是以爲這道題so easy ，媽媽不再用擔憂個人編程 啊哈哈..(手動滑稽)

4.拓展題

如今是否是以爲本身有之後遇到這種題不再怕啦，那我們再來試一試

var xs = ['10', '10', '10'];

xs = xs.map(parseInt);

console.log(xs);  // 輸出結果爲保密，先本身想想，而後在試一試，但願你能獲得正確的答案！
複製代碼

5.留一個拓展，進制的轉換（有時間在總結）