對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，找工作最難的莫過(guò)于技術(shù)面試。Fredrik Strand Oseberg在freeCodeCamp上發(fā)表了一篇文章，介紹了自己學(xué)習(xí)編程6個(gè)月后找工作獲得5個(gè)offer的經(jīng)歷。

我先給大家介紹一下我的工作背景。

在過(guò)去的6個(gè)月里，我一直在孜孜不倦地研究我的投資組合和個(gè)人項(xiàng)目。最值得注意的是，我創(chuàng)建了CryptoDasher，這是一種能夠?qū)崟r(shí)跟蹤加密貨幣和投資組合價(jià)值的工具。我還參加了一家名為L(zhǎng)oopring的中國(guó)區(qū)塊鏈公司舉辦的設(shè)計(jì)競(jìng)賽。

我覺(jué)得已經(jīng)準(zhǔn)備好了。我向挪威一家大型咨詢(xún)公司投了簡(jiǎn)歷，應(yīng)聘其前端開(kāi)發(fā)人員的工作，并引起了他們的注意——至少我是這么認(rèn)為的。

通過(guò)筆試和第一輪面試后，我被邀請(qǐng)參加技術(shù)面試。這是最重要的一個(gè)環(huán)節(jié)。

我很緊張。

“你應(yīng)該怎們準(zhǔn)備這個(gè)技術(shù)面試呢?”我問(wèn)自己。我四處詢(xún)問(wèn)，瘋狂地在互聯(lián)網(wǎng)上搜索相關(guān)資料。并在YouTube上看了一些模擬面試。以下是我使用的一些資源：

拆解前端面試(freeCodeCamp上的文章)

David Shariff 的2017年為Web前端開(kāi)發(fā)面試做準(zhǔn)備

每個(gè)JavaScript開(kāi)發(fā)者都應(yīng)該知道的10個(gè)面試問(wèn)題

Toptal的JavaScript面試問(wèn)題列表

Mozilla開(kāi)發(fā)者網(wǎng)絡(luò)(MDN)

Pramp - 與其他人進(jìn)行模擬面試的工具

Github前端開(kāi)發(fā)者問(wèn)題合集

YouTube JS模擬面試1

YouTube JS模擬面試2

我在這些材料上花了好幾個(gè)小時(shí)的時(shí)間，盡力為即將到來(lái)的面試做好準(zhǔn)備。如果我在面試前沒(méi)有盡最大的努力，我會(huì)感到很不舒服，我相信你明白那種感受。

面試的那天到了。我早上4點(diǎn)就醒了。

很害怕，很好奇，也很興奮。

我在公司的大廳里遇到了面試官，和他一起去了他們的辦公室。

我們之間的交談很愉快，并相互交換了聯(lián)系方式。我比較擅長(zhǎng)軟技能，所以我希望能早點(diǎn)展示這種能力。很快，我又見(jiàn)到了另一位面試官，然后去了會(huì)議室。

面試剛開(kāi)始很順利。我們每個(gè)人都進(jìn)行了自我介紹，他們開(kāi)始問(wèn)我一些關(guān)于我的背景的問(wèn)題。

他們問(wèn)我，開(kāi)始學(xué)習(xí)編程時(shí)，最困難的部分是什么，我想學(xué)習(xí)什么樣的技術(shù)，我想要教別人什么技術(shù)，以及我覺(jué)得令人興奮的東西。

在這一點(diǎn)上，我覺(jué)得面試很順利。我很想知道更多關(guān)于這家公司的信息，我覺(jué)得已經(jīng)與面試官在某些方面有了共鳴。

然后技術(shù)部分開(kāi)始了。

首先，我被要求解釋我在筆試中的代碼。是一個(gè)為數(shù)據(jù)集創(chuàng)建分頁(yè)，并將其顯示在列表中的任務(wù)。我用React編寫(xiě)了它，然后我開(kāi)始檢查代碼。當(dāng)我們?yōu)g覽這些代碼時(shí)，我的面試官會(huì)問(wèn)我一些問(wèn)題。我將試著把他們提出的問(wèn)題列出來(lái)，以及給出我認(rèn)為的面試官想要的答案。

你知道單元測(cè)試是什么嗎?代碼的哪一部分可以進(jìn)行單元測(cè)試?

說(shuō)實(shí)話(huà)，我想我回答錯(cuò)了。單元測(cè)試是一段代碼，用于驗(yàn)證一個(gè)單元或源代碼的特定部分是否執(zhí)行了它的預(yù)期目的，而不會(huì)產(chǎn)生不必要的副作用。我不記得我說(shuō)了什么，但我可能把它和集成測(cè)試混在一起了。在面試之前，我確實(shí)對(duì)單元測(cè)試和TDD有一定的了解，但在這種程度上，可能已經(jīng)超出了我的理解范疇。

在進(jìn)行了一些討論之后，我得出結(jié)論：我可以對(duì)分頁(yè)函數(shù)進(jìn)行測(cè)試，因?yàn)樗鼘?duì)程序中的大部分邏輯負(fù)責(zé)。

你將如何改進(jìn)這個(gè)項(xiàng)目?

我發(fā)現(xiàn)這個(gè)問(wèn)題有點(diǎn)令人困惑。當(dāng)我完成筆試(幾周前)時(shí)，我就被要求列出一份關(guān)于該項(xiàng)目的改進(jìn)清單。假設(shè)面試官已經(jīng)知道了這些，我就很難找到什么改進(jìn)空間了。

我很快就明白了，面試官對(duì)我在電子郵件中提到的事情很感興趣，于是我開(kāi)始提到這些點(diǎn)——錯(cuò)誤處理、移動(dòng)優(yōu)化、Ajax調(diào)用加載時(shí)的用戶(hù)反饋、以及大型數(shù)據(jù)集的頁(yè)面管理。

你知道BEM是什么嗎?你在代碼中使用的是BEM嗎?

我回答說(shuō)我知道BEM是什么。這是一個(gè)用于CSS項(xiàng)目的命名約定，代表Block、Element、Modifier。我還回答說(shuō)，在我的CSS類(lèi)命名中，我受到了BEM的啟發(fā)，但它并不完全是BEM，因?yàn)樗鼪](méi)有遵循所有的BEM規(guī)則。

你如何使這個(gè)網(wǎng)站更具移動(dòng)友好度?

CSS媒體查詢(xún)。這是最主要的一個(gè)。他們想知道，我是否知道如何利用媒體查詢(xún)來(lái)讓網(wǎng)站做出響應(yīng)。

到目前為止。面試進(jìn)展很好。我覺(jué)得我很完整地回答了這些問(wèn)題，盡管我需要在了解面試官的具體想問(wèn)什么之前，先討論一下這些問(wèn)題。

編程挑戰(zhàn)

然后他們要求我擴(kuò)展功能。我被要求實(shí)現(xiàn)一種排序機(jī)制，該機(jī)制將采用分頁(yè)數(shù)據(jù)集，并根據(jù)名稱(chēng)和編號(hào)對(duì)它們進(jìn)行重新排列。我有幾分鐘時(shí)間來(lái)思考這個(gè)問(wèn)題。

我問(wèn)了一些問(wèn)題，比如我是否應(yīng)該使用內(nèi)置的JavaScript排序函數(shù)，或者構(gòu)建自己的函數(shù)(稍后我們會(huì)看到，這是一個(gè)很大的錯(cuò)誤)。分頁(yè)數(shù)據(jù)以對(duì)象數(shù)組的形式存在，其中每個(gè)對(duì)象都有一個(gè)包含20個(gè)對(duì)象的數(shù)據(jù)數(shù)組，這些對(duì)象代表列表中的每一個(gè)項(xiàng)目。我提出了以下的算法：

1、將每個(gè)分頁(yè)對(duì)象數(shù)據(jù)數(shù)組合并到一個(gè)新的數(shù)組中;

2、對(duì)新數(shù)組進(jìn)行排序;

3、對(duì)排序后的數(shù)組進(jìn)行分頁(yè)，并將組件的狀態(tài)設(shè)置為新近排序的數(shù)組。

這是一個(gè)很好的算法。我很快就知道該怎么做了?，F(xiàn)在唯一的問(wèn)題是實(shí)施它。這就是我犯錯(cuò)的地方。

首先，我花了很長(zhǎng)時(shí)間來(lái)找出如何組合這些數(shù)組。我承認(rèn)，這種情況給我?guī)?lái)了一些壓力。因?yàn)槲冶究梢杂靡粋€(gè)簡(jiǎn)單的reduce來(lái)解決它的時(shí)候，我做了各種奇怪的事情。公平地說(shuō)，我當(dāng)時(shí)并不像現(xiàn)在這樣熟悉reduce。

//我應(yīng)該做的

const pageData = pages.reduce((startingValue，page)=> startingValue.concat(page.data)，[])

//我最終做的

const pages = this.state.pages; const pageData = [];pages.forEach(page => pageData = pageData.concat(page.data));

現(xiàn)在我有了一個(gè)包含所有數(shù)據(jù)的數(shù)組，我需要編寫(xiě)邏輯來(lái)對(duì)其進(jìn)行排序。由于我在編程方面的經(jīng)驗(yàn)，在很大程度上是基于我自己構(gòu)建的項(xiàng)目，所以我花了很長(zhǎng)時(shí)間來(lái)處理JavaScript排序函數(shù)。我必須要查資料，所以，我花了一些時(shí)間來(lái)檢查MDN和stack overflow上的例子，以便我在實(shí)現(xiàn)它之前真正理解它。

我只是部分地完成了分揀工作，我被困在這里好一段時(shí)間。數(shù)組中的大多數(shù)名稱(chēng)都是正確排序的，但是在頂部有一些名稱(chēng)是無(wú)序的。在這個(gè)時(shí)候上，我試圖保持冷靜，但在我的腦海里，已經(jīng)崩潰了。我想要知道為什么它沒(méi)有正確排序。我被困在這里的時(shí)間比我想承認(rèn)的要長(zhǎng)。

經(jīng)過(guò)面試官的討論和督促。我最終想起來(lái)了字符串是按照它們的ASCII值排序的。大寫(xiě)字母的值是65-90，小寫(xiě)字母的值是97-122。沒(méi)有正確排序的結(jié)果有一個(gè)大寫(xiě)的首字母，它具有先排序的效果，因?yàn)樗鼈兊腁SCII值比小寫(xiě)字母要低。這是一個(gè)我永遠(yuǎn)不會(huì)再犯的錯(cuò)誤。

當(dāng)找到問(wèn)題后，我立即用用.toLowerCase()解決了這個(gè)問(wèn)題。

現(xiàn)在只剩下一件事了。

將已排序的數(shù)據(jù)傳遞到分頁(yè)函數(shù)中。

在這里，我遇到了一個(gè)麻煩。

分頁(yè)函數(shù)需要一個(gè)Ajax響應(yīng)，并將每一項(xiàng)傳遞給一個(gè)formatData函數(shù)，該函數(shù)提取相關(guān)片段并返回一個(gè)新對(duì)象。然而，當(dāng)我試圖傳遞被排序的數(shù)據(jù)到這個(gè)函數(shù)的新數(shù)組時(shí)，它將不再具有原來(lái)的屬性名，并且函數(shù)會(huì)給出一個(gè)錯(cuò)誤。

我花了一些時(shí)間研究這個(gè)問(wèn)題，然后我才發(fā)現(xiàn)我必須將formatData從分頁(yè)函數(shù)中移出，并在數(shù)據(jù)傳遞給分頁(yè)函數(shù)之前在響應(yīng)數(shù)據(jù)上執(zhí)行它。

完成了這些工作，并進(jìn)行了一些更小的修改，代碼終于可以工作了。雖然花了一些時(shí)間，但最終我解決了。

此時(shí)，技術(shù)面試的編程部分結(jié)束了。

我感到精疲力竭。

我們最后又聊了一會(huì)兒，然后結(jié)束了面試。在結(jié)束之前，我問(wèn)題一些問(wèn)題，他們告訴了我更多關(guān)于他們公司的事情。

然而，面試并沒(méi)有就此止步。

我仔細(xì)復(fù)盤(pán)了這次面試，琢磨我做錯(cuò)了什么。

第二天，我花了三個(gè)小時(shí)來(lái)改進(jìn)解決方案，然后我發(fā)了這封郵件：

嗨，面試X和面試官y。

我想感謝你們昨天同意和我交流。我已經(jīng)思考了很多關(guān)于這個(gè)問(wèn)題的解決方案，我決定今天就改進(jìn)它。我提供了我們昨天工作的增強(qiáng)版本的代碼。這是我所做的：

我擴(kuò)展了排序功能，以便能夠在第二次按下時(shí)逆轉(zhuǎn)結(jié)果。

我將分類(lèi)功能擴(kuò)展到所有的titles。

我添加了一些圖標(biāo)來(lái)對(duì)titles進(jìn)行排序。

我重構(gòu)了分頁(yè)函數(shù)，學(xué)習(xí)了單元測(cè)試的基礎(chǔ)知識(shí)，并使用Jest來(lái)測(cè)試它的功能。

我增加了對(duì)分頁(yè)的查詢(xún)字符串支持，這樣重載和鏈接就會(huì)在訪問(wèn)不同的頁(yè)面時(shí)顯示正確的數(shù)據(jù)。

我添加了媒體查詢(xún)樣式，使組件更具移動(dòng)友好度。

在API調(diào)用發(fā)生時(shí)，我添加了一個(gè)加載器。

我添加了錯(cuò)誤處理，讓用戶(hù)有機(jī)會(huì)重新啟動(dòng)API調(diào)用。

我在移動(dòng)設(shè)備上改變了排序功能，并使用了一個(gè)選擇框。

......

這可能有點(diǎn)矯枉過(guò)正，但我很受啟發(fā)，我想要改進(jìn)解決方案。

最好的問(wèn)候，

Fredrik Strand Oseberg

這還不夠。但至少我盡了最大的努力。過(guò)了一段時(shí)間，我收到了這封郵件：

嗨!

我們想感謝你的面試，但我們必須得出這樣的結(jié)論：我們不能給你這個(gè)職位的offer，因?yàn)槟阍诩夹g(shù)方面沒(méi)有達(dá)到我們的期望。

我們喜歡你的背景，相信你能很好地融入我們的社區(qū)，所以我們?cè)谀愕募夹g(shù)面試中給了你一份詳細(xì)的反饋，希望你能在獲得更多編程經(jīng)驗(yàn)后再申請(qǐng)我們的職位。

我在哪里出錯(cuò)了?

幸運(yùn)的是，我得到了一份詳細(xì)的反饋報(bào)告。讓我們來(lái)看看吧，我將和你們討論其中的內(nèi)容。

反饋1:“花費(fèi)太多的時(shí)間來(lái)了解如何組合數(shù)組。首先在互聯(lián)網(wǎng)上搜索，而不是檢查JavaScript文檔(例如：“js array doc”將提供w3schools或MDN，其中列出了函數(shù))，并錯(cuò)誤地使用了這些示例(array.concat返回一個(gè)新數(shù)組)。沒(méi)有人會(huì)記住API中的所有內(nèi)容，所以能夠很好地使用JS或庫(kù)的文檔是很重要的。”

要點(diǎn)：面試官希望你首先接觸到MDN(或其他相關(guān)文檔)。他們希望看到你能夠找到并閱讀文檔，并根據(jù)發(fā)現(xiàn)的信息來(lái)實(shí)施它。

反饋2:“在排序分配中，候選人首先提出了一個(gè)奇怪的手動(dòng)算法。幸運(yùn)的是，他選擇在JavaScript中使用內(nèi)置的排序功能，但是不確定它是如何工作的，并且必須反復(fù)檢查文檔。”

要點(diǎn)：在交流中要絕對(duì)清楚。在這種情況下，我詢(xún)問(wèn)了面試官關(guān)于我是否應(yīng)該使用內(nèi)置的JavaScript排序功能，以搞清楚手頭上任務(wù)的界限和限制。不幸的是，我認(rèn)為這被誤解為我建議自己使用的排序算法。

這最終產(chǎn)生了和我想要傳達(dá)的相反的效果。確保你清楚地表達(dá)出你的問(wèn)題想要澄清的東西。因?yàn)樗鼈兛赡軐?duì)你來(lái)說(shuō)很有意義，但你的面試官可能會(huì)對(duì)此有所察覺(jué)。

反饋3:“當(dāng)代碼運(yùn)行時(shí)，文本被排序?yàn)?ldquo;區(qū)分大小寫(xiě)”。不幸的是，候選人花了很長(zhǎng)時(shí)間才明白這個(gè)問(wèn)題，但一旦被發(fā)現(xiàn)，就立即改了過(guò)來(lái)。”

要點(diǎn)：速度是最重要的。在編寫(xiě)程序時(shí)，總是會(huì)出現(xiàn)bug，但是要盡可能快地解決它們。找到問(wèn)題的根源，如果你不知道，就迅速地去查文檔。

反饋4:“花了一些時(shí)間來(lái)理解為什么要在重構(gòu)的時(shí)候?qū)ormatData移出分頁(yè)。”

再說(shuō)一遍，速度是最重要的。

反饋5:“許多foreach循環(huán)，其中可以用數(shù)組.map或array.reduce來(lái)解決。了解更多函數(shù)式編程將是有益的。”

要點(diǎn)：學(xué)習(xí)數(shù)組.map、array.filter和array.reduce，并熟練地掌握它們。我一直在鉆研函數(shù)式編程，這是一項(xiàng)艱巨的任務(wù)。但是你現(xiàn)在不需要完全精通這些知識(shí)，只要確保你能掌握了基礎(chǔ)知識(shí)就行。

反饋6:“我希望候選人對(duì)單元測(cè)試有更多的了解。”

要點(diǎn)：這似乎是顯而易見(jiàn)的，但重要的問(wèn)題要多說(shuō)幾遍：測(cè)試很重要。測(cè)試很重要。測(cè)試很重要。學(xué)習(xí)它。使用它。

這份文件的其余部分都是贊揚(yáng)。我不會(huì)說(shuō)太多細(xì)節(jié)，因?yàn)樗鼪](méi)那么重要。要點(diǎn)是：

他很好地使用了編輯器

他在Chrome中使用調(diào)試器(了解高級(jí)調(diào)試工具很重要)

在繼續(xù)工作之前，他會(huì)檢查這些東西是否正常工作(使用console.log)

他試圖將代碼分成更小的邏輯部分

他使用變量名而不是注釋?zhuān)@使得代碼可讀性更好

他很了解React

之前的項(xiàng)目令人印象深刻

擁有編程之外(設(shè)計(jì)/視覺(jué))其他積極的品質(zhì)

在準(zhǔn)備過(guò)程中，我還能做些什么?

當(dāng)你被拒絕的時(shí)候，你將不可避免地花費(fèi)一些時(shí)間來(lái)思考你可以做些什么不同的事情。

更徹底地檢查筆試代碼

我花了太多時(shí)間研究我的JavaScript知識(shí)。我應(yīng)該更了解我自己的代碼。盡管我寫(xiě)了這篇文章，但在寫(xiě)作和面試之間的幾周時(shí)間里，你需要回顧一下。我希望我在這上面花的時(shí)間比在模糊的JavaScript問(wèn)題上更多。

做更多實(shí)操性的JavaScript任務(wù)

在面試前我做了很多理論工作。我現(xiàn)在希望我能夠花更多的時(shí)間做更多的實(shí)際工作，或者至少是混合了一些實(shí)際的工作，或者構(gòu)建一些常見(jiàn)的前端組件，比如排序列表、下拉菜單、分頁(yè)等等。

面試結(jié)束

在第一次技術(shù)面試結(jié)束后我感覺(jué)如何?老實(shí)說(shuō)，這是一次很棒的經(jīng)歷。我非常感謝面試官，他們給了我如此詳細(xì)的反饋，讓我能夠在下一次面試前糾正我的錯(cuò)誤。盡管我沒(méi)有得到這份工作，但我離成為第一個(gè)前端開(kāi)發(fā)者的工作又近了一步。

我也了解到面試是一件反復(fù)無(wú)常的事情。也許如果我在自己的項(xiàng)目中構(gòu)建了一個(gè)排序機(jī)制，或者如果我得到的是一個(gè)與我之前完成的任務(wù)更接近的任務(wù)，面試結(jié)果將會(huì)有所不同。

我最大的優(yōu)勢(shì)是在過(guò)去的一年中我花了很多時(shí)間學(xué)習(xí)JavaScript，現(xiàn)在我能夠很快地學(xué)習(xí)和采納新的想法。不幸的是，我這次沒(méi)有能力證明這一點(diǎn)。

通往成功之路

現(xiàn)在，我很容易對(duì)自己說(shuō)：“我還不夠好。我需要花3-4個(gè)月的時(shí)間來(lái)學(xué)習(xí)，然后再試一次。”

但我沒(méi)有。

我決定在兩周內(nèi)盡可能多的申請(qǐng)工作。我向挪威最大的IT公司投遞了簡(jiǎn)歷。

兩周后，我完成了幾家公司的初步面試，然后我又接受了技術(shù)面試。

第二輪準(zhǔn)備

我在第一次技術(shù)面試中學(xué)到的一件事是，準(zhǔn)備工作很關(guān)鍵。它可以幫助你把技術(shù)面試變成是一場(chǎng)考試，并采取必要的步驟來(lái)確保你通過(guò)考試。

但將考試比作面試是錯(cuò)誤的，因?yàn)樗鼪](méi)有涵蓋候選人的全部知識(shí)范圍。那你能做什么呢?

擴(kuò)大你的知識(shí)范圍。

我使用了先進(jìn)的記憶策略，在8個(gè)小時(shí)內(nèi)記住了超過(guò)100個(gè)面試問(wèn)題的答案。這些問(wèn)題可以在這個(gè)數(shù)據(jù)庫(kù)中找到。

此外，我還在在Code Wars和Hackerrank的實(shí)例上花了很多時(shí)間。并花了很多時(shí)間來(lái)構(gòu)建一些事物。

第二次技術(shù)面試

我在上次失敗的面試中吸取了很多教訓(xùn)，我做了很多的準(zhǔn)備。

這次面試的重點(diǎn)是討論前端概念。這是一次全面的面試，我覺(jué)得面試官想搞清楚我的知識(shí)范圍，并弄清楚我的強(qiáng)項(xiàng)和弱項(xiàng)。

這次面試持續(xù)了大約兩個(gè)小時(shí)。以下是我們所討論的所有主題的列表：

JS，CSS和HTML概述

文檔結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)

Git

性能

安全

可訪問(wèn)性

搜索引擎優(yōu)化

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

編程挑戰(zhàn)是基于vanilla Javascript的。我被要求用普通的Javascript將一個(gè)簡(jiǎn)單的類(lèi)添加到一個(gè)div中?，F(xiàn)在，如果你已經(jīng)花時(shí)間用JS來(lái)使用主要的框架，你可能不熟悉classList API。幸運(yùn)的是，我大部分時(shí)間都花在了所有的freeCodeCamp項(xiàng)目上。這就是它的樣子：

const btn = document.querySelector('.btn');const menu = document.querySelector('.menu');function addClassNameToDiv() { if (!menu.classList.contains('new-class')) { menu.classList.add('new-class'); } else { menu.classList.remove('new-class'); }}btn.addEventListener('click', addClassNameToDiv)

或者，您可以使用classList.toggle('new class')將其轉(zhuǎn)換為一行程序。如果你點(diǎn)擊下拉菜單，我還被要求將它擴(kuò)展至關(guān)閉菜單：

window.addEventListener('click', () => menu.classList.remove('new-class'));

從編程挑戰(zhàn)中獲得的信息是：

越短越好，只要它總是可讀的

在性能方面，最好將查詢(xún)選擇器置于事件監(jiān)聽(tīng)器回調(diào)函數(shù)之外(只調(diào)用一次，而不是每次都觸發(fā))

性能方面，getElementById和getElementByClassName比querySelector更好

第二天，我接到了經(jīng)理的電話(huà)。我通過(guò)了面試，他們想給我一個(gè)機(jī)會(huì)。我本可以在這里停下來(lái)，不用參加其他的面試了。我可以說(shuō)：“我已經(jīng)拿到了一個(gè)offer，這已經(jīng)足夠了。”

但我做了相反的事情。

我打電話(huà)給所有我正在面試的公司，并告訴他們我已經(jīng)收到了一個(gè)offer，并問(wèn)他們是否可以加快進(jìn)程，因?yàn)槲椰F(xiàn)在有時(shí)間限制。

面試，尤其是技術(shù)面試，都是很艱難的心理考驗(yàn)。如果你一直在展示，面試官將期待你的表現(xiàn)能夠超越預(yù)期。這很難。那么我為什么要這么做呢?

原因有四個(gè)。

1、我想向自己證明，這不是運(yùn)氣。

2、我想要尊重每一個(gè)給我面試機(jī)會(huì)的人，給他們一個(gè)公平的機(jī)會(huì)。

3、我想確保自己找到了適合自己的公司，讓我成為一名開(kāi)發(fā)人員。

4、為了你們，這個(gè)社區(qū)對(duì)我的幫助很大，我想從技術(shù)面試中獲得盡可能多的信息，這樣你們就可以從我的錯(cuò)誤中吸取教訓(xùn)，并做出相應(yīng)的準(zhǔn)備。

我對(duì)我從freeCodeCamp獲得的幫助和支持感到慚愧，我想要回報(bào)。

第三次技術(shù)面試

在與其他公司取得聯(lián)系，并表明我獲得了一家頂級(jí)公司的offer后，很多公司都迫不及待地想讓我通過(guò)面試。在一周內(nèi)，我完成了幾次技術(shù)面試。

以下是第三次技術(shù)面試中的一些問(wèn)題：

你是如何學(xué)習(xí)React的?你為什么要學(xué)習(xí)它?這有什么好處?

Redux是如何工作的?這個(gè)API由什么組成的?什么是不變性?不變性的好處是什么?

你將如何重新設(shè)計(jì)我們的網(wǎng)頁(yè)?

你如何處理更深層次的應(yīng)用程序?例如后端?

你自己做測(cè)試嗎?什么是單元測(cè)試?

對(duì)你來(lái)說(shuō)，什么是好的用戶(hù)體驗(yàn)?

如何測(cè)試用戶(hù)體驗(yàn)?

這次面試中的編程挑戰(zhàn)是基于CSS的。

我收到了一張紙，上面有一些CSS規(guī)則，看起來(lái)是這樣的：

 

// HTML Element// CSS Rules#menu { color: black;}.dropdown-menu { color: green;}div { color: blue;}

 

我的任務(wù)是解釋我所看到的。我立即識(shí)別了了HTML Element并告訴面試官，element上的id和class可以在CSS中使用，以選擇HTML Element。在這里，我解釋說(shuō)CSS是級(jí)聯(lián)的，這意味著通常最后一條規(guī)則將適用。然而，在這種情況下，選擇器有不同的權(quán)重。順序如下所示：id> class>element。

這意味著，在上面的示例中，黑色將被應(yīng)用到HTML Element中。

第四次技術(shù)面試

這是我進(jìn)行的最后一次技術(shù)面試。雖然它仍然很傷腦筋，但現(xiàn)在我已經(jīng)習(xí)慣了。下面是我們討論的內(nèi)容：

建立一個(gè)基本的網(wǎng)站。確定其中的組件。

你如何讓它響應(yīng)?

如何將文本垂直和水平居中?

什么是CSS框模型?內(nèi)容框和邊框之間的區(qū)別是什么?

React有什么好處?

array.forEach在for循環(huán)中的好處是什么?有沒(méi)有可能需要使用for循環(huán)的情況?

編程挑戰(zhàn)是建立一個(gè)不同程度難度的wordwrap函數(shù)。想象一下，你只能在屏幕上放20個(gè)字符，如果你超過(guò)它，你就得從一個(gè)新行開(kāi)始。

我對(duì)這個(gè)問(wèn)題的原始解決方案涉及拆分字符串，使用計(jì)數(shù)器和模數(shù)運(yùn)算符來(lái)確定計(jì)數(shù)是否為20，然后在數(shù)組中插入一個(gè)換行符并加入字符串。

然后，任務(wù)難度增加了，只允許全部單詞排成一行。也就是說(shuō)，如果一個(gè)單詞導(dǎo)致總數(shù)超過(guò)20，那么需要在單詞前面插入一個(gè)換行符。

我在面試中并沒(méi)有完全解決這個(gè)問(wèn)題，但我的思路是正確的。在我不確定的時(shí)候，我使用了MDN，并且我取得了很好的進(jìn)展。

這就足夠了。

我不能把它寫(xiě)下來(lái)，如果你感興趣的話(huà)，這里有一個(gè)解決的版本：

function wordWrap(str) { let totalCount = 0; const arr = str.split(' '), formattedStr = []; arr.forEach((word, index) => { totalCount += word.length; if (totalCount >= 20) { formattedStr.push('\n', word, ' '); totalCount = word.length; } else { formattedStr.push(word, ' '); } }); return formattedStr.join('');}

結(jié)論

如果看到了這里，恭喜你。這是一個(gè)漫長(zhǎng)的過(guò)程。我盡可能提供更多的信息，希望它能幫助像你這樣的人。

這樣做的結(jié)果是，我陷入了一個(gè)我從未想過(guò)的境地。最后，我有5個(gè)offer可供選擇。一家大公司甚至給我提供了一個(gè)“blind”offer，不管競(jìng)爭(zhēng)對(duì)手給我多少錢(qián)，它都能更高。我最終選擇了我第一次通過(guò)技術(shù)面試的公司，因?yàn)槲蚁嘈胚@對(duì)我來(lái)說(shuō)是最合適的。

技術(shù)面試可能是一場(chǎng)艱苦的精神折磨。你會(huì)受到挑戰(zhàn)，你會(huì)被帶出你的舒適區(qū)，這是一件好事。它能幫助你成長(zhǎng)。它會(huì)讓你變得更好。

如果你準(zhǔn)備好了，你就能有所收獲。

所以從我的經(jīng)驗(yàn)來(lái)看，不要回避技術(shù)面試。不要因?yàn)槟闶×司头艞?。不要認(rèn)為這是你作為開(kāi)發(fā)者的終極衡量標(biāo)準(zhǔn)。它不是。它只是公司用來(lái)衡量你的生產(chǎn)力的最簡(jiǎn)單的工具。

申請(qǐng)工作。準(zhǔn)備好。參加技術(shù)面試。從錯(cuò)誤中學(xué)習(xí)。不斷重復(fù)這一過(guò)程。

如果你這樣做，我保證你會(huì)成功。