JS一次前端面試經(jīng)歷記錄
本文實(shí)例講述了JS一次前端面試經(jīng)歷。分享給大家供大家參考，具體如下：
最近公司在做一些戰(zhàn)略調(diào)整，部門(mén)有不少老員工前輩們都陸陸續(xù)續(xù)的離職或者被離職了。而我所在的團(tuán)隊(duì)——網(wǎng)易菠蘿，也被歸并到游戲運(yùn)營(yíng)中心了。因?yàn)楫a(chǎn)品策劃還沒(méi)有出來(lái)、暫時(shí)沒(méi)什么需求做，閑得有點(diǎn)e-g-g疼的，每天從早到晚都是待在公司看看書(shū)、刷刷知乎等。我真是命途多舛啊，還沒(méi)有真正步入社會(huì)，就見(jiàn)證了一個(gè)上百人的事業(yè)部說(shuō)沒(méi)落就沒(méi)落。甚至已看破紅塵，連參加省公務(wù)員考試的計(jì)劃都做好了。這可不是開(kāi)玩笑的哈，已經(jīng)在報(bào)名費(fèi)和復(fù)習(xí)資料上花了兩三百塊啦，只是因?yàn)樗枷胗X(jué)悟比較低，始終還是對(duì)政治沒(méi)有興趣，那幾本復(fù)習(xí)資料到現(xiàn)在還沒(méi)翻過(guò)一頁(yè)。幾天前，一哥們兒說(shuō)他們公司（CVTE）有個(gè)春季校園招聘，叫我可以去試試。這里先補(bǔ)腦一下CVTE是個(gè)怎么樣的公司哈，它在廣東這邊也算是小有名氣的，主要原因是它的薪酬比BAT還要高出不少，傳說(shuō)畢業(yè)生月薪已經(jīng)15K左右，而且一年還有16-17薪。加上它的校招宣傳非常給力，廣東高校計(jì)算機(jī)專(zhuān)業(yè)的同學(xué)應(yīng)該對(duì)它都有耳聞過(guò)，其他省份的同學(xué)可能就比較陌生，不過(guò)外界對(duì)這個(gè)公司的評(píng)價(jià)并不怎么好，有興趣的可以自行到知乎看。因?yàn)镃VTE的薪酬確實(shí)很吸引人，所以我也有點(diǎn)兒心動(dòng)哈。不過(guò)當(dāng)時(shí)已經(jīng)過(guò)了筆試時(shí)間，而且還不能霸面。幸好我那哥們兒和HR姐姐還算熟，而且我的簡(jiǎn)歷寫(xiě)著有NAT實(shí)習(xí)經(jīng)歷，也就順利的獲得了面試機(jī)會(huì)。
昨天（2月8號(hào)），我還是按照平時(shí)的時(shí)間8：00起床（因?yàn)楣?：30上班）。一打開(kāi)手機(jī)，就看到了推薦我去CVTE的哥們兒在微信發(fā)了好多條信息，他說(shuō)已經(jīng)和HR說(shuō)好了，讓我8：30之前趕到黃村地鐵站坐CVTE面試班車(chē)過(guò)去面試。我的天吶，我本來(lái)只是開(kāi)玩笑啊，想不到這哥們兒是認(rèn)真的。畢竟他也是好不容易才幫我爭(zhēng)取到了面試機(jī)會(huì)，放他飛機(jī)可不太好啊啊。所以，七手八腳的穿上衣服、鞋子，沒(méi)來(lái)得及刷牙洗臉就騎上ofo直奔地鐵站去了。這幾天的廣州下著冷冷的春雨，早/上的氣溫也就10度左右。我當(dāng)時(shí)只穿件襯衣，真是冷得發(fā)抖啊。還好，8：25就到了黃村地鐵站，然后從C出口一出去就看到了白色的CVTE班車(chē)。當(dāng)時(shí)車(chē)上已經(jīng)有10來(lái)個(gè)人。但是，后來(lái)因?yàn)橐纫粋€(gè)睡過(guò)頭的家伙，到了8：50老司機(jī)才開(kāi)車(chē)。CVTE給我的感覺(jué)是挺人性化的，竟然愿意為了一個(gè)遲到的考生等待了20分鐘。大概坐了40分鐘的車(chē)程，就到了廣州羅崗CVTE園區(qū)了。一下車(chē)，眼前就是金碧輝煌的傳說(shuō) 中的CVTE大廈。不知道是因?yàn)檫@里的緯度比學(xué)校高、還是因?yàn)檫@里山比較多，反正氣溫真的比學(xué)校要低了好多，我全身都在顫抖。下車(chē)大概等待2分鐘，HR姐姐就下來(lái)帶我們到樓上去面試了。等候區(qū)和面試區(qū)是同一個(gè)會(huì)議室。當(dāng)時(shí)有2位HR姐姐、6位面試官（4個(gè)一面的、2個(gè)是二面的）。剛剛坐下來(lái)，HR姐姐就說(shuō)先上4個(gè)同學(xué)到前面來(lái)面試。我當(dāng)時(shí)第一個(gè)上去的。尷尬的事情這時(shí)候發(fā)生的，面試官哥哥問(wèn)了我手機(jī)尾號(hào)4位數(shù)字，然后他輸入了幾遍都找不到我資料。于是叫來(lái)了HR姐姐問(wèn)是怎么回事，這時(shí)候HR姐姐才恍然想起來(lái)我是沒(méi)有筆試、直接來(lái)面試的，趕緊把我拉到一個(gè)角落，叫了另外一個(gè)同學(xué)上去面試。她問(wèn)我?guī)Ш?jiǎn)歷了沒(méi)有，我說(shuō)沒(méi)有。然后面對(duì)面加了微信，并把很久以前做的一份電子簡(jiǎn)歷發(fā)給了她。然后就叫我回到座位去等待。
一面大約過(guò)了30分鐘，HR姐姐叫我上去第一輪面試。這時(shí)候因?yàn)樘?，我全身都在發(fā)抖啊。面試官好像看到我在發(fā)抖，然后就說(shuō)不用緊張哈、放松點(diǎn)兒。大哥啊，我這是冷啊不是緊張 啊、沒(méi)有看到我才穿一件襯衫嗎。然后，他先讓我做了簡(jiǎn)短的自我介紹。然后就開(kāi)始進(jìn)入正題了，下面是當(dāng)時(shí)被問(wèn)到的一些問(wèn)題：
JS有哪些手段可以實(shí)現(xiàn)繼承？ 說(shuō)說(shuō)JS的閉包？ 用純JS實(shí)現(xiàn)，點(diǎn)擊一個(gè)列表時(shí)，輸出對(duì)應(yīng)的索引（不能用JQuery哦） CSS實(shí)現(xiàn)矩形按鈕右邊緣的中間有個(gè)往里凹的小半圓，如圖：
為什么用vue而不用NG或者React？ 第1題，這可簡(jiǎn)單啦，JS主要有借用構(gòu)造函繼承和原型繼承以及兩者的組合。不懂的可以看看《JS高教》 第2題，不懂的自行補(bǔ)腦去 第3題，可能面試官的意圖也是想考察我們能否熟練掌握閉包吧。如果有刷過(guò)面試題的同學(xué)可能一下子就會(huì)做出來(lái)，但是，如果經(jīng)驗(yàn)不足的同學(xué)可能會(huì)寫(xiě)出如下的代碼：<body> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> <li>test6</li> <li>test7</li> <li>test8</li> <li>test9</li> <li>test10</li> </ul> <script> var lis = document.querySelectorAll(’ul li’); for(var i = 0, len = lis.length; i < len; i++) { lis[i].addEventListener(’click’, function () {console.log(i); }, false); } </script></body>
你運(yùn)行一下代碼會(huì)發(fā)現(xiàn)，無(wú)論你點(diǎn)擊哪個(gè)列表，控制臺(tái)都是輸出10。這是因?yàn)関ar聲明的變量是函數(shù)作用域的，而不是塊級(jí)作用域的。也就是說(shuō)，for循環(huán)10次，每次都是改變同一個(gè)i，所以它的值會(huì)從0一直加到10。還有個(gè)問(wèn)題是閉包導(dǎo)致的，閉包保存的是外部變量的引用，而不是值。也就是說(shuō)，循環(huán)10次監(jiān)聽(tīng)器創(chuàng)建了10 個(gè)閉包，它們里面的i引用的是同一個(gè)啊。所以全部都指向了10.要解決這個(gè)問(wèn)題有兩種方法。一種是使用ES6的let來(lái)替代 var i = 0 里面的var， 因?yàn)閘et支持塊級(jí)作用域。改成如下就正常了。
for(let i = 0, len = lis.length; i < len; i++) { lis[i].addEventListener(’click’, function () {console.log(i); }, false); }
還有一種方法，就是很多經(jīng)典書(shū)本都提到的，使用立即執(zhí)行函數(shù)來(lái)切斷閉包對(duì)外部變量i的引用：
for(var i = 0, len = lis.length; i < len; i++) { (function (i) {lis[i].addEventListener(’click’, function () { console.log(i);}, false); })(i) }
當(dāng)然啦，如果對(duì)閉包不是很熟練，還可以通過(guò)事件委托來(lái)避開(kāi)這個(gè)陷阱哈，代碼如下：
var ul = document.querySelector(’ul’); var lis = document.querySelectorAll(’ul li’); ul.addEventListener(’click’, function (e) { var target = e.target; if(target.nodeName.toLowerCase() === ’li’) {console.log([].indexOf.call(lis, target)); } }, false);
使用了事件委托，減少了監(jiān)聽(tīng)器的綁定（只對(duì)列表的父親元素監(jiān)聽(tīng)），這種方法說(shuō)不定還會(huì)加分呢。哈哈，我當(dāng)時(shí)就是用這種方法來(lái)實(shí)現(xiàn)的，面試官可能覺(jué)得我的解法有點(diǎn)不尋常、頓時(shí)一臉蒙B，甚至還一度懷疑 console.log([].indexOf.call(lis, target)) 這段代碼是不是有問(wèn)題。直到后來(lái)我直接在他的筆記本跑了一遍，他才相信是正確的。
第4題，因?yàn)槊嬖嚬僬f(shuō)要通過(guò)偽元素來(lái)實(shí)現(xiàn)，我的CSS本身就不咋滴，只知道好像用到了CSS3的border-radius，但是要使用偽未元素我還真心不會(huì)哇。所以當(dāng)時(shí)就直接說(shuō)不會(huì)做，現(xiàn)在也不會(huì)。請(qǐng)CSS大神在評(píng)論區(qū)發(fā)一下代碼哈~
第5題，主要談框架相關(guān)的。因?yàn)槟壳暗那闆r是，React才是主流，很多團(tuán)隊(duì)都在用React，CVTE也不例外。他似乎很關(guān)心我為什么要使用vue。我當(dāng)時(shí)給出的理由是：NG1臟值檢測(cè)性能太低并且相對(duì)過(guò)時(shí)，NG2目前又不夠成熟，React的JSX語(yǔ)法個(gè)人不太喜歡，而vue比較輕量級(jí)、并且支持jade模板（ 我們舊項(xiàng)目是使用jade模板寫(xiě)的，遷移會(huì)相對(duì)容易）。然而，接下來(lái)便遭到了面試官的連續(xù)挑釁，說(shuō)我用vue不會(huì)是因?yàn)樗闹形奈臋n比較齊全吧（鄙視我英文差？？？）。還說(shuō)vue是不適合做大型項(xiàng)目。最后一句更狠：你們使用vue真是最愚蠢的選擇。（我當(dāng)時(shí)心里真的有一萬(wàn)只草泥馬在奔騰） 其實(shí)，我個(gè)人覺(jué)得，框架并沒(méi)有好壞之分的，每個(gè)框架必然有它存在的理由。React也好，NG也行，Vue也罷，蘿卜、荷蘭豆各有所愛(ài)嘛。反正，面試官說(shuō)的那些話(huà)我真的聽(tīng)得挺反感的。 話(huà)又說(shuō)回來(lái)。問(wèn)完了第5個(gè)問(wèn)題之后 ，面試官說(shuō)面試就此結(jié)束，讓我回到座位休息。 CVTE對(duì)于考生的招待真的挺周到的，桌面上有水果、零食、飲料等等。因?yàn)楫?dāng)時(shí)手機(jī)快沒(méi)有電了，所以，就坐在那里邊吃水果邊看其他人面試。
二面然后，等待了一個(gè)多小時(shí)，輪到了二面。面試官大概三十多歲，可能是前端組長(zhǎng)或者技術(shù)總監(jiān)之類(lèi)的職位吧。他主要是問(wèn)到了下面的這些問(wèn)題：
說(shuō)說(shuō)JS的內(nèi)存機(jī)制及垃圾回收機(jī)制 下面的代碼有內(nèi)存泄漏嗎var user = {name: ’tom’, age: 20, gender: ’male’}var test = document.getElementByid(’test’)test.onclick = function() { test.innerHTML = user.name;}// ...后面還有很多其他操作，最后把user對(duì)象釋放掉user = null; // 釋放對(duì)象 實(shí)現(xiàn)一個(gè)算法，尋找字符串中出現(xiàn)次數(shù)最少的、并且首次出現(xiàn)位置最前的字符 如'cbaacfdeaebb'，符合要求的是'f'，因?yàn)樗怀霈F(xiàn)了一次（次數(shù)最少）。并且比其他只出現(xiàn)一次的字符（如'd'）首次出現(xiàn)的位置最靠前。 http和tpc的關(guān)系，以及什么是https Node的特點(diǎn)（優(yōu)點(diǎn)和缺點(diǎn)） 你在騰訊和網(wǎng)易實(shí)習(xí)期間學(xué)到的東西？ 未來(lái)三年的職業(yè)規(guī)劃
至于二面的問(wèn)題都不是很難，下面簡(jiǎn)單的來(lái)看一下：
第1題，基本類(lèi)型（number, string, boolean, null, undefined, symbol）是在棧的，而其他的引用類(lèi)型都是在堆的。垃圾回收是采用了計(jì)數(shù)引用法（如果兩個(gè)對(duì)象之間存在循環(huán)引用時(shí)，會(huì)有內(nèi)存泄漏，因?yàn)橛?jì)數(shù)無(wú)法變?yōu)? ）這里寫(xiě)錯(cuò)了，誤導(dǎo)了大家，不好意思哈。JS使用的是標(biāo)記清除法。原理可以看看《JS高教》第三版的78頁(yè)。
第2題，有內(nèi)存泄漏，這是閉包本身的問(wèn)題。完全消除閉包的內(nèi)存泄漏是不現(xiàn)實(shí)的，但是，如果采用下面的方法可以減少內(nèi)存泄漏：var user = {name: ’tom’, age: 20, gender: ’male’}var test = document.getElementByid(’test’)(function (name) { test.onclick = function() { test.innerHTML = name; }})(user.name);user = null;
第3題算法題，也不很難，大家可以自己試試去實(shí)現(xiàn) ，如果做不出來(lái)的再到評(píng)論求助啦，這里就不貼出代碼了。
第4題，考察了計(jì)算機(jī)網(wǎng)絡(luò)的tcp三次握手以及http的請(qǐng)求頭等。https是使用安全套接字進(jìn)行加密的，可以說(shuō)HTTPS = SSL + HTTP。
第5題，Node的特點(diǎn)是異步非IO阻塞、適合高并發(fā)，但不適合密集型計(jì)算
第6、7題都是主觀(guān)題，可以隨便吹一下水便好。
因?yàn)楫?dāng)時(shí)已經(jīng)是飯點(diǎn)時(shí)間，面試官也有點(diǎn)急著去吃飯，就沒(méi)有再問(wèn)我問(wèn)題了。
二面面完，已經(jīng)是中午12點(diǎn)多了。我那哥們兒鵬哥已經(jīng)在門(mén)口等著我一起去飯?zhí)?。CVTE的飯菜不錯(cuò)，自助餐，但是，那個(gè)碗有點(diǎn)小，沒(méi)打多少就裝滿(mǎn)了。飯?zhí)美?，公司的人挺熱情的，因?yàn)楸持鴷?shū)包大家都知道我是來(lái)面試的，就會(huì)問(wèn)我一些問(wèn)題，或曰“你來(lái)面試什么崗位啦”，或曰“你是本科生還是研究生啦”。。。反正就是挺熱情的嘛。打好飯菜剛剛坐下來(lái)，還沒(méi)有吃幾口飯，鵬哥說(shuō)剛剛接到HR消息，班車(chē)馬上就要開(kāi)走了，要我快點(diǎn)吃。我下午還要回來(lái)公司上班，在這鳥(niǎo)不拉屎的地方如果錯(cuò)過(guò)了班車(chē)，后果有多嚴(yán)重可想而知的。于是我就干脆不吃了，直接把飯菜倒掉，直跑樓下坐班車(chē)。剛剛上車(chē)，司機(jī)就開(kāi)車(chē)了，駛向香雪地鐵站。再見(jiàn)了，CVTE！
后記首先說(shuō)一下這次面試的水平吧，其實(shí)，從去年9月到現(xiàn)在，我已經(jīng)有大半年沒(méi)有參加過(guò)任何面試了，很多基礎(chǔ)和面經(jīng)寶典也忘記得差不多了。另外，本來(lái)并沒(méi)有打算來(lái)面試的，只是和鵬哥開(kāi)了個(gè)玩笑而已，結(jié)果弄假成真，他都已經(jīng)幫我去找HR安排好了。所以也不好放人飛機(jī)嘛！如果不去這不是在搞人家嗎？這是第一次面試CVTE，以前聽(tīng)人說(shuō)CVTE對(duì)算法要求比較高、面試相對(duì)是比較難的。這次自己反而沒(méi)有怎么被問(wèn)到算法題目。面試題目還算正常、難度還可以接受。關(guān)于對(duì)CVTE的評(píng)價(jià)，就不好下結(jié)論，因?yàn)楫吘咕椭皇侨ッ媪艘粋€(gè)上午試而已，不夠了解這是個(gè)什么樣的公司。不過(guò)，總的來(lái)說(shuō)，從有班車(chē)接送、到面試時(shí)有水果飲料、再到面完試帶考生去飯?zhí)贸燥?，我覺(jué)得CVTE是個(gè)還不錯(cuò)的公司呢！至于面試結(jié)果，現(xiàn)在還沒(méi)有出來(lái)哈。也許過(guò)了，也許掛了，誰(shuí)又知道呢？
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. 詳解Python模塊化編程與裝飾器2. python web框架的總結(jié)3. Python使用shutil模塊實(shí)現(xiàn)文件拷貝4. Python實(shí)現(xiàn)迪杰斯特拉算法過(guò)程解析5. python使用ctypes庫(kù)調(diào)用DLL動(dòng)態(tài)鏈接庫(kù)6. Python字符串函數(shù)strip()原理及用法詳解7. Python基于pyjnius庫(kù)實(shí)現(xiàn)訪(fǎng)問(wèn)java類(lèi)8. html小技巧之td,div標(biāo)簽里內(nèi)容不換行9. Python如何進(jìn)行時(shí)間處理10. python裝飾器三種裝飾模式的簡(jiǎn)單分析
網(wǎng)公網(wǎng)安備