80%應(yīng)聘者都不及格的JS面試題
寫在前面，筆者在做面試官這 2 年多的時間內(nèi)，面試了數(shù)百個前端工程師，驚訝的發(fā)現(xiàn)，超過 80% 的候選人對下面這道題的回答情況連及格都達不到。這究竟是怎樣神奇的一道面試題?他考察了候選人的哪些能力?對正在讀本文的你有什么啟示?且聽我慢慢道來
不起眼的開始
招聘前端工程師，尤其是中高級前端工程師，扎實的 JS 基礎(chǔ)絕對是必要條件，基礎(chǔ)不扎實的工程師在面對前端開發(fā)中的各種問題時大概率會束手無策。在考察候選人 JS 基礎(chǔ)的時候，我經(jīng)常會提供下面這段代碼，然后讓候選人分析它實際運行的結(jié)果：
- for (var i = 0; i < 5; i++) {
- setTimeout(function() {
- console.log(new Date, i);
- }, 1000);
- }
- console.log(new Date, i);
這段代碼很短，只有 7 行，我想，能讀到這里的同學(xué)應(yīng)該不需要我逐行解釋這段代碼在做什么吧。候選人面對這段代碼時給出的結(jié)果也不盡相同，以下是典型的答案：
- A. 20% 的人會快速掃描代碼，然后給出結(jié)果：0,1,2,3,4,5;
- B. 30% 的人會拿著代碼逐行看，然后給出結(jié)果：5,0,1,2,3,4;
- C. 50% 的人會拿著代碼仔細琢磨，然后給出結(jié)果：5,5,5,5,5,5;
只要你對 JS 中同步和異步代碼的區(qū)別、變量作用域、閉包等概念有正確的理解，就知道正確答案是 C，代碼的實際輸出是：
- 2017-03-18T00:43:45.873Z 5
- 2017-03-18T00:43:46.866Z 5
- 2017-03-18T00:43:46.868Z 5
- 2017-03-18T00:43:46.868Z 5
- 2017-03-18T00:43:46.868Z 5
- 2017-03-18T00:43:46.868Z 5
接下來我會追問：如果我們約定，用箭頭表示其前后的兩次輸出之間有 1 秒的時間間隔，而逗號表示其前后的兩次輸出之間的時間間隔可以忽略，代碼實際運行的結(jié)果該如何描述?會有下面兩種答案：
- A. 60% 的人會描述為：5 -> 5 -> 5 -> 5 -> 5，即每個 5 之間都有 1 秒的時間間隔;
- B. 40% 的人會描述為：5 -> 5,5,5,5,5，即第 1 個 5 直接輸出，1 秒之后，輸出 5 個 5;
這就要求候選人對 JS 中的定時器工作機制非常熟悉，循環(huán)執(zhí)行過程中，幾乎同時設(shè)置了 5 個定時器，一般情況下，這些定時器都會在 1 秒之后觸發(fā)，而循環(huán)完的輸出是立即執(zhí)行的，顯而易見，正確的描述是 B。
如果到這里算是及格的話，100 個人參加面試只有 20 人能及格，讀到這里的同學(xué)可以仔細思考，你及格了么?
追問 1：閉包
如果這道題僅僅是考察候選人對 JS 異步代碼、變量作用域的理解，局限性未免太大，接下來我會追問，如果期望代碼的輸出變成：5 -> 0,1,2,3,4，該怎么改造代碼?熟悉閉包的同學(xué)很快能給出下面的解決辦法：
- for (var i = 0; i < 5; i++) {
- (function(j) { // j = i
- setTimeout(function() {
- console.log(new Date, j);
- }, 1000);
- })(i);
- }
- console.log(new Date, i);
巧妙的利用 IIFE(Immediately Invoked Function Expression：聲明即執(zhí)行的函數(shù)表達式)來解決閉包造成的問題，確實是不錯的思路，但是初學(xué)者可能并不覺得這樣的代碼很好懂，至少筆者初入門的時候這里琢磨了一會兒才真正理解。
有沒有更符合直覺的做法?答案是有，我們只需要對循環(huán)體稍做手腳，讓負責(zé)輸出的那段代碼能拿到每次循環(huán)的 i 值即可。該怎么做呢?利用 JS 中基本類型(Primitive Type)的參數(shù)傳遞是按值傳遞(Pass by Value)的特征，不難改造出下面的代碼：
- var output = function (i) {
- setTimeout(function() {
- console.log(new Date, i);
- }, 1000);
- };
- for (var i = 0; i < 5; i++) {
- output(i); // 這里傳過去的 i 值被復(fù)制了
- }
- console.log(new Date, i);
能給出上述 2 種解決方案的候選人可以認為對 JS 基礎(chǔ)的理解和運用是不錯的，可以各加 10 分。當(dāng)然實際面試中還有候選人給出如下的代碼：
- for (let i = 0; i < 5; i++) {
- setTimeout(function() {
- console.log(new Date, i);
- }, 1000);
- }
- console.log(new Date, i);
細心的同學(xué)會發(fā)現(xiàn)，這里只有個非常細微的變動，即使用 ES6 塊級作用域(Block Scope)中的 let 替代了 var，但是代碼在實際運行時會報錯，因為***那個輸出使用的 i 在其所在的作用域中并不存在，i 只存在于循環(huán)內(nèi)部。
能想到 ES6 特性的同學(xué)雖然沒有答對，但是展示了自己對 ES6 的了解，可以加 5 分，繼續(xù)進行下面的追問。
追問 2：ES6
有經(jīng)驗的前端同學(xué)讀到這里可能有些不耐煩了，扯了這么多，都是他知道的內(nèi)容，先別著急，挑戰(zhàn)的難度會繼續(xù)增加。
接著上文繼續(xù)追問：如果期望代碼的輸出變成 0 -> 1 -> 2 -> 3 -> 4 -> 5，并且要求原有的代碼塊中的循環(huán)和兩處 console.log 不變，該怎么改造代碼?新的需求可以精確的描述為：代碼執(zhí)行時，立即輸出 0，之后每隔 1 秒依次輸出 1,2,3,4，循環(huán)結(jié)束后在大概第 5 秒的時候輸出 5(這里使用大概，是為了避免鉆牛角尖的同學(xué)陷進去，因為 JS 中的定時器觸發(fā)時機有可能是不確定的，具體可參見 How Javascript Timers Work)。
看到這里，部分同學(xué)會給出下面的可行解：
- for (var i = 0; i < 5; i++) {
- (function(j) {
- setTimeout(function() {
- console.log(new Date, j);
- }, 1000 * j)); // 這里修改 0~4 的定時器時間
- })(i);
- }
- setTimeout(function() { // 這里增加定時器，超時設(shè)置為 5 秒
- console.log(new Date, i);
- }, 1000 * i);
不得不承認，這種做法雖粗暴有效，但是不算是能額外加分的方案。如果把這次的需求抽象為：在系列異步操作完成(每次循環(huán)都產(chǎn)生了 1 個異步操作)之后，再做其他的事情，代碼該怎么組織?聰明的你是不是想起了什么?對，就是 Promise。
可能有的同學(xué)會問，不就是在控制臺輸出幾個數(shù)字么?至于這樣殺雞用牛刀?你要知道，面試官真正想考察的是候選人是否具備某種能力和素質(zhì)，因為在現(xiàn)代的前端開發(fā)中，處理異步的代碼隨處可見，熟悉和掌握異步操作的流程控制是成為合格開發(fā)者的基本功。
順著下來，不難給出基于 Promise 的解決方案(既然 Promise 是 ES6 中的新特性，我們的新代碼使用 ES6 編寫是不是會更好?如果你這么寫了，大概率會讓面試官心生好感)：
- const tasks = [];
- for (var i = 0; i < 5; i++) { // 這里 i 的聲明不能改成 let，如果要改該怎么做？
- ((j) => {
- tasks.push(new Promise((resolve) => {
- setTimeout(() => {
- console.log(new Date, j);
- resolve(); // 這里一定要 resolve，否則代碼不會按預(yù)期 work
- }, 1000 * j); // 定時器的超時時間逐步增加
- }));
- })(i);
- }
- Promise.all(tasks).then(() => {
- setTimeout(() => {
- console.log(new Date, i);
- }, 1000); // 注意這里只需要把超時設(shè)置為 1 秒
- });
相比而言，筆者更傾向于下面這樣看起來更簡潔的代碼，要知道編程風(fēng)格也是很多面試官重點考察的點，代碼閱讀時的顆粒度更小，模塊化更好，無疑會是加分點。
- const tasks = []; // 這里存放異步操作的 Promise
- const output = (i) => new Promise((resolve) => {
- setTimeout(() => {
- console.log(new Date, i);
- resolve();
- }, 1000 * i);
- });
- // 生成全部的異步操作
- for (var i = 0; i < 5; i++) {
- tasks.push(output(i));
- }
- // 異步操作完成之后，輸出***的 i
- Promise.all(tasks).then(() => {
- setTimeout(() => {
- console.log(new Date, i);
- }, 1000);
- });
讀到這里的同學(xué)，恭喜你，你下次面試遇到類似的問題，至少能拿到 80 分。
我們都知道使用 Promise 處理異步代碼比回調(diào)機制讓代碼可讀性更高，但是使用 Promise 的問題也很明顯，即如果沒有處理 Promise 的 reject，會導(dǎo)致錯誤被丟進黑洞，好在新版的 Chrome 和 Node 7.x 能對未處理的異常給出 Unhandled Rejection Warning，而排查這些錯誤還需要一些特別的技巧(瀏覽器、Node.js)。
追問 3：ES7
既然你都看到這里了，那就再堅持 2 分鐘，接下來的內(nèi)容會讓你明白你的堅持是值得的。
多數(shù)面試官在決定聘用某個候選人之前還需要考察另外一項重要能力，即技術(shù)自驅(qū)力，直白的說就是候選人像有內(nèi)部的馬達在驅(qū)動他，用漂亮的方式解決工程領(lǐng)域的問題，不斷的跟隨業(yè)務(wù)和技術(shù)變得越來越牛逼，究竟什么是牛逼?建議閱讀程序人生的這篇剖析。
回到正題，既然 Promise 已經(jīng)被拿下，如何使用 ES7 中的 async await 特性來讓這段代碼變的更簡潔?你是否能夠根據(jù)自己目前掌握的知識給出答案?請在這里暫停 1 分鐘，思考下。
下面是筆者給出的參考代碼：
- // 模擬其他語言中的 sleep，實際上可以是任何異步操作
- const sleep = (timeountMS) => new Promise((resolve) => {
- setTimeout(resolve, timeountMS);
- });
- (async () => { // 聲明即執(zhí)行的 async 函數(shù)表達式
- for (var i = 0; i < 5; i++) {
- await sleep(1000);
- console.log(new Date, i);
- }
- await sleep(1000);
- console.log(new Date, i);
- })();
總結(jié)
感謝你花時間讀到這里，相信你收獲的不僅僅是用 JS 精確控制代碼輸出的各種技巧，更是對于前端工程師的成長期許：扎實的語言基礎(chǔ)、與時俱進的能力、強大技術(shù)自驅(qū)力。
