一道阿里Web前端面試題看出你的JS基本功
- // 求出如下題目結(jié)果
- ({} + {}).length
- ([] + []).length
- (function() {}).length
這道題目乍一看可能會(huì)讓你有點(diǎn)懵,你可能會(huì)想:一個(gè)對(duì)象和一個(gè)對(duì)象相加能得到什么?還能求出其長(zhǎng)度?
其實(shí)這道題目相當(dāng)考驗(yàn)了作為一位web前端開(kāi)發(fā)工程師的基本功
在看到這個(gè)題目之后,我們首先分析一下情況:
1、({} + {}).length
兩個(gè)空對(duì)象相加,肯定不是數(shù)值運(yùn)算,那么只有可能是字符串連接了,那你可能會(huì)得到 “{}{}” 這樣的結(jié)果,其實(shí)不然,因?yàn)槟愫鲆暳俗址谶B接時(shí)默認(rèn)會(huì)調(diào)用相應(yīng)的toString()方法
一個(gè)空對(duì)象調(diào)用toString()方法會(huì)得到什么?
- ({}).toString()
- // "[object Object]"
得到是 “[object Object]” 這樣的字符串,長(zhǎng)度為15,那么兩個(gè)空對(duì)象相加之后,其長(zhǎng)度則為30
- ({} + {}).length
- // 相當(dāng)于 ({}.toString() + {}.toString()).length
- // 也就是 "[object Object][object Object]",求得這個(gè)字符串長(zhǎng)度為30
2、([] + []).length
有了第一道題的經(jīng)驗(yàn),那么你可能會(huì)這么想:兩個(gè)空數(shù)組相加,一定也是字符串連接,也會(huì)調(diào)用其toString()方法,最終相當(dāng)于求 “[object Array][object Array]” 這個(gè)字符串的長(zhǎng)度,從而得出最終結(jié)果28
但是,數(shù)組的toString()方法是被重寫(xiě)過(guò)的
- [1, 2, 3].toString()
- // 得到的是 "1,2,3" 這樣由逗號(hào)分割元素的字符串
如果一個(gè)空數(shù)組調(diào)用toString()方法,得到的只會(huì)是空字符串“”
所以,這道題的最終結(jié)果為0
3、(function() {}).length
有了前兩道題目的經(jīng)驗(yàn),那你可能會(huì)很自然的想到:這里的function也是會(huì)調(diào)用toString()方法的。如果你這樣想,那就是被前兩道題目誤導(dǎo)了:函數(shù)的長(zhǎng)度是其形參的個(gè)數(shù),所以最終結(jié)果是0
總結(jié):學(xué)習(xí)前端知識(shí)是一個(gè)漫長(zhǎng)且艱辛的過(guò)程,我們很多時(shí)候被眼前的高樓大廈蒙蔽了雙眼,卻忽視了作為基礎(chǔ)的鋼筋水泥。前端框架方興未艾,說(shuō)不定過(guò)幾年又會(huì)有新框架取代當(dāng)下熱門的三大框架(vue,react, angular),但是萬(wàn)變不離其宗,只有基礎(chǔ)打的牢固,無(wú)論這些東西將來(lái)怎么改變,你也只會(huì)淡然一笑,不過(guò)爾爾