資訊專欄INFORMATION COLUMN
摘要：前言最近無意中發(fā)現(xiàn)了一道前端面試題一想，答案不是嘛。這只是前端題目中的一題，以后我還會(huì)總結(jié)更多的前端面試題的相關(guān)知識(shí)點(diǎn)，來學(xué)習(xí)前端的相關(guān)知識(shí)
前言
最近無意中發(fā)現(xiàn)了一道前端面試題：
[1, 2, 3].map(parseInt)
一想，答案不是 [1, 2, 3] 嘛。但在 chrome 控制臺(tái)下運(yùn)行一下，返回的卻是 [1, NaN, NaN]。
這是怎么回事呢？讓我們來看看 map() 和 parseInt() 方法的詳細(xì)用法。
mapmap(callback, [thisArg]) 方法：
接受一個(gè)回調(diào)函數(shù) callback，返回一個(gè) 新的數(shù)組
返回的數(shù)組的元素的值為調(diào)用 callback 函數(shù)所返回的值（原數(shù)組有幾個(gè)元素，就調(diào)用幾次 callback）
callback 接受 3 個(gè)參數(shù)：
currentValue：當(dāng)前正在處理的數(shù)組元素的值
index：當(dāng)前正在處理的數(shù)組元素的索引
arr：調(diào)用 map 方法的數(shù)組
map 方法一般用于對(duì)現(xiàn)有數(shù)組每一個(gè)元素進(jìn)行相同邏輯的運(yùn)算處理的場(chǎng)景。
例如平時(shí)我工作的時(shí)候，該方法用的最多的場(chǎng)景是 在 react 中通過 this.state 對(duì)象中的某個(gè)數(shù)組類型的屬性來渲染具有相同 html 結(jié)構(gòu)的 jsx：
class example extends React.component {
state = {
personList: [
{
name: "張三",
age: 18
},
{
name: "李四",
age: 19
},
{
name: "王五",
age: 20
}
]
}
render() {
return (
{this.state.personList.map(person => {
return
姓名：{person.name}
年齡：{person.age}
})}
)
}
}
parseInt
parseInt(string, [radix])：解析一個(gè) 字符串（第一個(gè)參數(shù)），返回一個(gè) 10 進(jìn)制的整數(shù)
string：被解析的字符串（前后空格會(huì)被忽略，若不是字符串，則轉(zhuǎn)換成字符串）
radix：指定 string（第一個(gè)參數(shù)）的基數(shù)（2~36，即 2 進(jìn)制 ~ 36進(jìn)制），若不傳或傳 0，則 string（第一個(gè)參數(shù)）以 10 進(jìn)制 來解析
再來看 [1, 2, 3].map(parseInt)parseInt 回調(diào)函數(shù)會(huì)被調(diào)用三次：
// arr 表示數(shù)組 [1, 2, 3] // 第一次調(diào)用 parseInt(1, 0, arr) // 1 // 第二次調(diào)用 parseInt(2, 1, arr) // NaN // 第三次調(diào)用 parseInt(3, 2, arr) // NaN
首先，每一次調(diào)用 parseInt 回調(diào)函數(shù)，都會(huì)將 數(shù)字類型 轉(zhuǎn)換為 字符串類型。
即 1 -> "1"，2 -> "2"，3 -> "3"
第一次調(diào)用時(shí)，因?yàn)?radix 為 0 ，所以 string 按照 10 進(jìn)制 處理，返回 10 進(jìn)制數(shù) 1
第二次調(diào)用時(shí)，因?yàn)?radix 為 1，不在 2~36 范圍，直接返回 NaN
第三次調(diào)用時(shí)，因?yàn)?radix 為 2（二進(jìn)制），但 string 為 "3"，不屬于 二進(jìn)制范圍，所以返回 NaN
所以：[1, 2, 3].map(parseInt) 返回的是 [1, NaN, NaN]
更多：parseFloat[1, 2, 3].map(parseFloat) 返回的是 [1, 2, 3]，因?yàn)?parseFloat(string) 只接受一個(gè)參數(shù) string
map() 文檔
parseInt() 文檔
parseFloat() 文檔
由于自己對(duì) parseInt 方法的不熟悉，加上沒有仔細(xì)分析該面試題，導(dǎo)致自己答錯(cuò)該題。
這只是前端題目中的一題，以后我還會(huì)總結(jié)更多的前端面試題的相關(guān)知識(shí)點(diǎn)，來學(xué)習(xí)前端的相關(guān)知識(shí)！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96624.html
摘要：變量聲明提升在中，函數(shù)聲明與變量聲明經(jīng)常被引擎隱式地提升到當(dāng)前作用域的頂部。對(duì)象的方法和屬性是在全局范圍內(nèi)有效的。未形成標(biāo)準(zhǔn)，實(shí)現(xiàn)混亂。 前端面試題JavaScript（一） JavaScript的組成 JavaScript 由以下三部分組成： ECMAScript（核心）：JavaScript 語言基礎(chǔ) DOM（文檔對(duì)象模型）：規(guī)定了訪問HTML和XML的接口 BOM（瀏覽器對(duì)...
摘要：變量聲明提升在中，函數(shù)聲明與變量聲明經(jīng)常被引擎隱式地提升到當(dāng)前作用域的頂部。對(duì)象的方法和屬性是在全局范圍內(nèi)有效的。未形成標(biāo)準(zhǔn)，實(shí)現(xiàn)混亂。 前端面試題JavaScript（一） JavaScript的組成 JavaScript 由以下三部分組成： ECMAScript（核心）：JavaScript 語言基礎(chǔ) DOM（文檔對(duì)象模型）：規(guī)定了訪問HTML和XML的接口 BOM（瀏覽器對(duì)...
摘要：變量聲明提升在中，函數(shù)聲明與變量聲明經(jīng)常被引擎隱式地提升到當(dāng)前作用域的頂部。對(duì)象的方法和屬性是在全局范圍內(nèi)有效的。未形成標(biāo)準(zhǔn)，實(shí)現(xiàn)混亂。 前端面試題JavaScript（一） JavaScript的組成 JavaScript 由以下三部分組成： ECMAScript（核心）：JavaScript 語言基礎(chǔ) DOM（文檔對(duì)象模型）：規(guī)定了訪問HTML和XML的接口 BOM（瀏覽器對(duì)...
摘要：又到一年春招季，們又要奔波于一場(chǎng)又一場(chǎng)的面試。今天就先來小小總結(jié)一下方面的知識(shí)點(diǎn)，方便你我他。在發(fā)送請(qǐng)求前加上。在后面加上時(shí)間搓。這樣頁面的所有都會(huì)執(zhí)行這條語句就是不需要保存緩存記錄。如何解決跨域問題服務(wù)器上設(shè)置代理頁面 又到一年春招季，coder們又要奔波于一場(chǎng)又一場(chǎng)的面試。今天就先來小小總結(jié)一下javascript方面的知識(shí)點(diǎn)，方便你我他。隨時(shí)補(bǔ)充 js基本數(shù)據(jù)類型 Undef...
摘要：服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。服務(wù)器端暫時(shí)無法處理請(qǐng)求可能是過載或維護(hù)。 為什么要使用css預(yù)編譯 1、css無法遞歸式定義2、解決復(fù)用性不夠3、可以緩解瀏覽器兼容造成的冗余 cookie,sessionStorage和localStorage的區(qū)別 cookie用來在瀏覽器和服務(wù)器中傳遞并且總量很小sessionStorage和localSto...
閱讀 1439·2021-11-11 16:54
閱讀 9322·2021-11-02 14:44
閱讀 2371·2021-10-22 09:53
閱讀 3259·2019-08-30 11:18
閱讀 1951·2019-08-29 13:29
閱讀 2003·2019-08-27 10:58
閱讀 1623·2019-08-26 11:38
閱讀 3518·2019-08-26 10:31
