JS面試題['1',?'7',?'11'].map(parseInt)怎么解決

這篇文章主要介紹“JS面試題['1', '7', '11'].map(parseInt)怎么解決”，在日常操作中，相信很多人在JS面試題['1', '7', '11'].map(parseInt)怎么解決問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JS面試題['1', '7', '11'].map(parseInt)怎么解決”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

輸出結(jié)果

['1', '7', '11'].map(parseInt)  //  結(jié)果輸出 -> [1, NaN, 3]

為什么輸出會(huì)有 NaN ? 為什么把 11 轉(zhuǎn)成整數(shù)會(huì)是 3 ？

想把數(shù)組里的字符串?dāng)?shù)字轉(zhuǎn)換成整數(shù)，于是使用 map函數(shù)來(lái)對(duì)數(shù)組的每一項(xiàng)作用，作用的函數(shù)是 parseInt函數(shù)，所以預(yù)期的結(jié)果應(yīng)該是[1,7,11] ，然而最終瀏覽器的 JavaScript 引擎給出的答案是 [1, NaN, 3] 。

從結(jié)果可以看到 1 是正常進(jìn)行轉(zhuǎn)化的，后面兩個(gè)數(shù)則不是我們預(yù)期的結(jié)果。

map函數(shù)有問(wèn)題？

現(xiàn)在我們把 parseInt 換掉，功能改為給每一個(gè)數(shù)乘 2

['1', '7', '11'].map(function(x){
	return x * 2;     // 結(jié)果 -> [2, 14, 22]
});

發(fā)現(xiàn)結(jié)果是正常的，x代表從數(shù)組里拿到的每一個(gè)值，在依次去乘以2 ，沒(méi)問(wèn)題。

可是問(wèn)題來(lái)了，除了x，會(huì)不會(huì)有其它參數(shù)，存不存在其它可以使用的參數(shù)。于是我們?cè)囼?yàn)下：

['1', '7', '11'].map(function(x, i, j, k){
	console.log(x +' ' + i + ' ' + j + ' ' + k);
});

在 Chrome 的控制臺(tái)執(zhí)行后發(fā)現(xiàn)結(jié)果出乎意料

也就是說(shuō)，map 接受的這個(gè)函數(shù)，它存在三個(gè)參數(shù)，第一個(gè)是數(shù)組當(dāng)前的值，第二個(gè)是當(dāng)前值的索引，第三個(gè)數(shù)是當(dāng)前傳入的數(shù)組

會(huì)不會(huì)是傳入的 parseInt 出現(xiàn)問(wèn)題 ？

當(dāng)我們傳入 parseInt 時(shí)，map 函數(shù)會(huì)把三個(gè)參數(shù)（數(shù)組當(dāng)前元素，當(dāng)前元素的索引，當(dāng)前傳入的數(shù)組）一并打包給 parseInt 。

那么現(xiàn)在問(wèn)題就集中在 parseInt 函數(shù)上面。

從 MDN 文檔查詢后可以知道，parseInt(string, radix) 函數(shù)接受兩個(gè)參數(shù)，第一個(gè)是需要轉(zhuǎn)換的字符串，第二個(gè)是進(jìn)制。

于是結(jié)果呼之欲出，我把這個(gè)過(guò)程畫(huà)成了圖，方便看圖理解，

首先，parseInt 接受兩個(gè)參數(shù)，因此第三個(gè)參數(shù)會(huì)被忽略。

第一次執(zhí)行， parseInt('1', 0) 會(huì)輸出 1 ，因?yàn)?0 會(huì)轉(zhuǎn)換成 false，而 false 會(huì)使它執(zhí)行默認(rèn)的進(jìn)制 10 ，就是 parseInt 默認(rèn)都是轉(zhuǎn)換十進(jìn)制；

第二次執(zhí)行，parseInt('7', 1) 因?yàn)闆](méi)有所謂的 1 進(jìn)制，所以無(wú)法轉(zhuǎn)換，輸出 NaN;

第三次執(zhí)行parseInt('11', 2) 答案為 3 ，因?yàn)橐?2 為進(jìn)制轉(zhuǎn)換，3 的二進(jìn)制是 11 , 非常的巧妙。

所以最終的輸出的結(jié)果就是 [1, NaN, 3]

到此，關(guān)于“JS面試題['1', '7', '11'].map(parseInt)怎么解決”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！