7個(gè)簡(jiǎn)單但棘手的JavaScript面試問題
如果您符合高級(jí)開發(fā)人員的資格，其工作涉及JavaScript，那么在編碼面試中很有可能會(huì)被問到棘手的問題。
遵循這個(gè)建議:“熟能生巧”。深入有規(guī)律地學(xué)習(xí)JavaScript將提高您的編碼能力，并且可以提高您的面試技巧。
在這篇文章中，你會(huì)發(fā)現(xiàn)7個(gè)乍一看很簡(jiǎn)單但很棘手的JavaScript面試問題。
雖然一開始這些問題看起來是隨意的，但是它們?cè)噲D與JavaScript的重要概念掛鉤。所以你最好在下次面試前練習(xí)一下！
1. 意外全局變量
Question
以下代碼段中用于運(yùn)算 typeof a 和 typeof b 的內(nèi)容：
- function foo() {
- let a = b = 0;
- a++;
- return a;
- }
- foo();
- typeof a; // => ???
- typeof b; // => ???
Answer
讓我們看一下第2行：let a = b = 0，該語(yǔ)句聲明一個(gè)局部變量a，然兒，它也聲明了全局變量b。
在 foo() 范圍或全局范圍中都沒有聲明變量b。因此JavaScript將 b = 0 表達(dá)式解釋為 window.b = 0。換句話說，b是意外創(chuàng)建的全局變量。
在瀏覽器中，以上代碼片段等效于：
- function foo() {
- let a;
- window.b = 0;
- a = window.b;
- a++;
- return a;
- }
- foo();
- typeof a; // => 'undefined'
- typeof window.b; // => 'number'
typeof a 等于 'undefined'，變量 a 存在于 foo() 范圍內(nèi)，而在外部范圍內(nèi)不使用。
因?yàn)閎是一個(gè)值為0的全局變量，所以b的類型的值為 'number'。
2.數(shù)組的length屬性
Question
clothes[0] 的值是什么?
- const clothes = ['jacket', 't-shirt'];
- clothes.length = 0;
- clothes[0]; // => ???
Answer
數(shù)組對(duì)象的 length 屬性具有特殊的行為：減少length屬性的值的副作用是刪除自己的數(shù)組元素。因此，當(dāng)JavaScript執(zhí)行 clothes.length = 0 的時(shí)候?qū)h除所有元素。
clothes [0] 等于 undefined 的，因?yàn)?clothes 數(shù)組已被清空。
3.鷹眼測(cè)試
Question
numbers 數(shù)組的內(nèi)容是什么？
- const length = 4;
- const numbers = [];
- for (var i = 0; i < length; i++);{
- numbers.push(i + 1);
- }
- numbers; // => ???
讓我們仔細(xì)看一下分號(hào) ； 出現(xiàn)在左大括號(hào) {：
這個(gè)分號(hào)很容易被忽略，它創(chuàng)建了一個(gè)空語(yǔ)句?？照Z(yǔ)句是不做任何事情的空語(yǔ)句。
for() 在空語(yǔ)句上進(jìn)行4次迭代（不執(zhí)行任何操作），而忽略實(shí)際將項(xiàng)目推入數(shù)組的塊：{number.push（i + 1）;}。上面的代碼等效于以下代碼：
- const length = 4;
- const numbers = [];
- var i;
- for (i = 0; i < length; i++) {
- // does nothing
- }
- {
- // a simple block
- numbers.push(i + 1);
- }
- numbers; // => [5]
for() 將 i 變量遞增到4，然后JavaScript一次進(jìn)入塊 {number.push（i + 1）;}，將 4 +1 推入數(shù)字?jǐn)?shù)組。
因此，numbers 數(shù)組的內(nèi)容為 [5]。
4.自動(dòng)分號(hào)插入
Question
- arrayFromValue() 返回什么值？
- function arrayFromValue(item) {
- return
- [item];
- }
- arrayFromValue(10); // => ???
Answer
很容易錯(cuò)過 return 關(guān)鍵字和 [item] 表達(dá)式之間的換行符。此換行符使JavaScript自動(dòng)在 return 和 [item] 表達(dá)式之間插入分號(hào)。
這是等效的代碼，在返回后插入了分號(hào)：
- function arrayFromValue(item) {
- return;
- [item];
- }
- arrayFromValue(10); // => undefined
return; 函數(shù)內(nèi)部使其返回 undefined。因此 arrayFromValue(10) 的值為 undefined。
5.經(jīng)典問題：棘手的閉包
Question
以下代碼將輸出什么到控制臺(tái)？
- let i;
- for (i = 0; i < 3; i++) {
- const log = () => {
- console.log(i);
- }
- setTimeout(log, 100);
- }
Answer
如果您以前從未聽說過這個(gè)棘手的問題，則很可能您的答案是 0、1 和 2：這是錯(cuò)誤的。當(dāng)我第一次嘗試解決它時(shí)，這也是我的答案！
執(zhí)行此代碼段有兩個(gè)階段。
Phase 1
- for() 重復(fù)3次，在每次迭代過程中，都會(huì)創(chuàng)建一個(gè)新的函數(shù) log() 來捕獲變量 i。然后 setTimout() 計(jì)劃執(zhí)行l(wèi)og()。
- 當(dāng) for() 循環(huán)完成時(shí)，i 變量的值為 3。
log() 是一個(gè)捕獲變量 i 的閉包，該變量在 for() 循環(huán)的外部范圍中定義。請(qǐng)務(wù)必注意，閉包可以詞法捕獲 i 變量。
Phase 2
第二階段發(fā)生在100ms之后：setTimeout() 調(diào)用了3次計(jì)劃的 log() 。log() 讀取變量i的當(dāng)前值為3，并記錄到控制臺(tái)3。這就是為什么控制臺(tái)輸出為3、3 和 3 的原因。
如果您難以理解閉包，建議閱讀“ JavaScript閉包的簡(jiǎn)單說明”。
您知道如何將代碼段記錄為0、1和2嗎？請(qǐng)?jiān)谙旅娴脑u(píng)論中寫下您的解決方案！
6.浮點(diǎn)數(shù)計(jì)算
Question
這個(gè)等式的結(jié)果是什么？
- 0.1 + 0.2 === 0.3 // => ???
Answer
首先，讓我們看一下 0.1 + 0.2 的值：
- 0.1 + 0.2; // => 0.30000000000000004
0.1 和 0.2 的總和不完全是 0.3，而是略高于 0.3。
由于以二進(jìn)制方式對(duì)浮點(diǎn)數(shù)進(jìn)行編碼，因此像浮點(diǎn)數(shù)相加之類的操作會(huì)產(chǎn)生舍入誤差。
簡(jiǎn)而言之，直接比較浮點(diǎn)數(shù)并不精確。
因此 0.1 + 0.2 === 0.3 的結(jié)果是 false。
點(diǎn)擊 0.30000000000000004.com 了解更多信息。
7.變量提升
Question
如果在聲明前訪問 myVar 和 myConst，會(huì)發(fā)生什么情況？
- myVar; // => ???
- myConst; // => ???
- var myVar = 'value';
- const myConst = 3.14;
Answer
提升和臨時(shí)死區(qū)是影響JavaScript變量生命周期的兩個(gè)重要概念。
在聲明之前訪問 myVar 的結(jié)果為 undefined。在初始化之前，提升的 var 變量具有 undefined 的值。
然兒，在聲明行之前訪問 myConst 會(huì)引發(fā) ReferenceError。const 變量處于臨時(shí)死區(qū)，直到聲明行 const myConst = 3.14。
8.最后...
您可以認(rèn)為某些問題對(duì)面試毫無(wú)用處。我有同樣的感覺，特別是關(guān)于鷹眼測(cè)試。盡管如此，他們可能會(huì)被問到。
無(wú)論如何，其中許多問題都可以真正評(píng)估您是否精通JavaScript，例如棘手的閉包。如果您在閱讀帖子時(shí)遇到一些困難，這很好地表明了您接下來必須學(xué)習(xí)什么！
