我如何應用從失敗的技術面試中吸取的經驗來獲得 5 個工作機會

這幾乎就像一場夢。當我終於回到挪威和一份工作時，我已經休了 6 個月的假來全神貫注於編碼並和我的女朋友一起搬到澳大利亞。

它幾乎一帆風順。我擁有了一切。我先介紹一下我的創業背景。

在過去的 6 個月裡，我不知疲倦地致力於我的投資組合和個人項目。最值得注意的是，我創建了 CryptoDasher，這是一個實時跟踪加密貨幣和投資組合價值的工具。我還為一家名為 Loopring 的中國區塊鏈公司提交了網頁設計競賽的參賽作品。

我覺得準備好了。我在挪威的一家大型諮詢公司申請了前端開發人員的工作，並引起了他們的注意——至少我是這麼認為的。

通過一次家庭作業和第一輪面試後，我被邀請參加技術面試。

重頭戲。

我很緊張。

你如何準備技術面試？我問自己。我四處打聽，瘋狂地搜索互聯網。我在 YouTube 上觀看了模擬採訪。以下是我使用的一些資源：

• 破解前端面試（freeCodeCamp Medium 文章）
• David Shariff 為 2017 年的前端 Web 開發麵試做準備
• 每個 JavaScript 開發人員都應該知道的 10 個面試問題
• Toptal 的 JavaScript 面試問題列表
• Mozilla 開發者網絡 (MDN)
• Pramp - 與他人進行模擬面試的工具
• Github 前端開發者問題合集
• YouTube JS 模擬面試 #1
• YouTube JS 模擬面試 #2

我花了好幾個小時在這些材料上苦苦掙扎，盡可能地讓自己做好準備。如果我在面試前沒有盡我所能，我不會對自己感覺良好，我相信你明白。

面試的日子到了。

我已經在家4天了。從澳大利亞起飛 36 小時後，我每天早上 5 點起床。

那天我凌晨 4 點醒來。

還是很害怕，但也很好奇，也很興奮。

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

我們進行了愉快的交談，並立即開始聯繫。我擅長軟技能，所以我希望儘早展示這種實力。我們很快遇到了另一位面試官，然後前往會議室。

面試一開始就很順利。我們每個人都做了自我介紹，他們開始問我一些關於我背景的問題。有人問我，我認為開始編碼最困難的部分是什麼，我想學習什麼樣的技術，我想教給別人甚麼樣的技術，以及我覺得它有什麼令人興奮的地方。

在這一點上，我覺得面試很順利。我很想了解更多關於這家公司的信息，我覺得我和我的面試官建立了聯繫。

然後開始技術部分。

首先，我被要求從家庭作業中解釋我的代碼。任務是為數據集創建分頁，並將其顯示在列表中。我是用 React 寫的，然後我開始瀏覽代碼。當我們瀏覽代碼時，我的面試官會問我一些問題。我將嘗試概述以下問題以及我認為面試官的目標。

你知道什麼是單元測試嗎？代碼的哪一部分可以進行單元測試？

老實說，我想我回答錯了。單元測試是一段代碼，用於驗證單元或源代碼的特定部分是否執行其預期目的而沒有不必要的副作用。我不記得我回答了什麼，但我可能把它和集成測試混在一起了。在面試之前我確實對單元測試和 TDD 有一定的了解，但在當下的熱潮中，我可能沒有掌握。

經過反复討論，我得出結論，我可以測試分頁功能，因為它負責程序中的大部分邏輯。

您將如何改進該計劃？

我發現這個問題有點令人困惑。當我交付家庭作業（幾週前）時，我被要求列出一份我可以改進的項目清單。假設面試官已經知道這些，我很難找到比我已經包含的其他改進領域。

我很快就明白，面試官有興趣了解我在電子郵件中已經提到的內容，因此我開始提及所有這些要點 - 錯誤處理、移動優化、加載 Ajax 調用時的用戶反饋以及頁面大數據集時的管理。

你知道什麼是 BEM 嗎？是您在代碼中使用的 BEM 嗎？

我回答說我知道 BEM 是什麼。這是處理 CSS 項目的命名約定，代表塊、元素、修飾符。我還回答說我在我的 CSS 類命名中受到 BEM 的啟發，但它並不完全是 BEM，因為它沒有遵循所有 BEM 規則。

您如何使該網站適合移動設備？

CSS 媒體查詢。這是這裡的主要內容。他們想知道我知道如何使用媒體查詢來使網站具有響應性。

至今。超好的。我覺得我回答的問題相當稱職，儘管我需要先討論一下這些問題，然後才能理解面試官的確切意思。

編碼挑戰

然後他們要求我擴展功能。我被要求實現一種排序機制，該機制將採用分頁數據集並按名稱和數字重新排列它們。我有幾分鐘的時間來思考這個問題。

我問了一些明確的問題，比如我是否應該使用內置的 JavaScript 排序功能，或者構建我自己的（我們稍後會看到，這是一個很大的錯誤）。分頁數據以對像數組的形式存在，其中每個對像都有一個包含 20 個對象的數據數組，這些對象代表列表中的每個項目。我想出了以下算法：

1. 將每個分頁對像數據數組組合成一個新數組。
2. 對新數組排序
3. 對排序後的數組進行分頁，並將組件的狀態設置為新排序的數組。

這是一個很好的算法。我很快就知道該怎麼做。現在唯一的問題是實施它。這就是我犯錯誤的地方。

首先，我花了很長時間找出如何組合數組。我承認，我認為這裡的情況給我帶​​來了一些壓力。因為當我可以通過簡單的 reduce 解決它時，我做了各種奇怪的事情。公平地說，我當時對 reduce 的感覺不如現在。

// What I should have done
const pageData = pages.reduce((startingValue, page) => startingValue.concat(page.data), [])
// What I ended up doing
const pages = this.state.pages;
const pageData = [];
pages.forEach(page => pageData = pageData.concat(page.data));

現在我有了一個包含所有數據的數組，我需要編寫邏輯來對其進行排序。由於我的編程經驗主要基於構建我自己的項目，因此我已經很長時間沒有與 JavaScript 排序功能有任何關係了。我不得不查一下，在實現之前我花了一些時間檢查 MDN 和堆棧溢出的示例以真正理解它。

我得到了分揀工作，部分。我在這裡被困了一段時間。數組中的大多數名稱都正確排序，但是在頂部有一些名稱是亂序的。此時，我試圖保持冷靜，但在我的腦海裡，我嚇壞了。我試圖弄清楚為什麼它沒有正確排序。而且我被困在這裡的時間比我想承認的要長。

經過面試官的一番討論和催促。我終於記得字符串是按它們的 ASCII 值排序的。大寫字母的取值範圍為 65 - 90，小寫字母的取值範圍為 97 - 122。未正確排序的排名靠前的結果有一個大寫的第一個字母，這具有首先排序的效果，因為它們的 ASCII 值低於小寫字母.這是一個我永遠不會再犯的錯誤。

發現問題後，我立即通過對正在排序的名稱使用 .toLowerCase() 來解決它。

現在只剩下一件事了。

將排序後的數據傳入分頁函數。<​​/P>

在這裡，我也遇到了障礙。

分頁函數期望 Ajax 響應並將每個項目傳遞給 formatData 函數，該函數將相關部分分開並返回一個新對象。但是，當我嘗試將排序到此函數中的新對像數組傳遞時，它將不再具有原始屬性名稱，並且該函數會拋出錯誤。

我花了一些時間來解決這個問題，然後才發現必須將 formatData 從分頁函數中移出，並在將數據傳遞給分頁函數之前對響應數據執行它。

一旦完成了這個和一些更小的更改，代碼終於可以工作了。花了一些時間，但最終我解決了它。

至此，技術面試的編碼部分就結束了。

我感到筋疲力盡。

我們用更多的聊天結束了採訪。他們向我詳細介紹了他們的公司，在我們分道揚鑣之前我問了一些問題。

然而，採訪並沒有就此結束。

我考慮了面試，反思了我做錯了什麼，去睡覺然後去上班。

第二天我花了三個小時改進解決方案，然後我發了這封郵件：

這還不夠。但至少我盡我所能。過了一段時間，我收到了這封郵件：

我哪裡出錯了？

好吧，幸運的是我得到了一份詳細的反饋報告。那我們來看看吧，我會和你討論的。

反饋#1：“花太多時間找出如何組合數組。首先在互聯網上搜索而不是檢查 JavaScript 文檔（例如：“js array doc”會給出 w3schools 或 mdn，其中列出了函數），並且錯誤地使用了示例（array.concat 返回一個新數組）。沒有人會記住 API 中的所有內容，因此熟悉使用 JS 文檔或庫非常重要。”

外賣： 面試官希望看到你首先接觸到 MDN（或其他相關文檔）。他們希望看到您可以找到並閱讀文檔並根據那裡找到的信息實施它。

反饋#2：“在排序任務中，候選人首先提出了一個奇怪的手動算法。幸運的是，他選擇使用 JavaScript 中的內置排序功能，但不確定其工作原理，必須反複檢查文檔。”

外賣： 在你的溝通中絕對清楚。在這種情況下，我向面試官詢問我是否應該使用內置的 JavaScript 排序功能，以澄清手頭任務的邊界/限制，並證明我不是在不知不覺中跳入編碼我經營的條款。不幸的是，我認為這被誤解為我建議使用我自己的排序算法，而我並不打算這樣做，除非那是他們特別希望完成的任務。

這最終產生了與我想要傳達的相反的效果。確保您清楚地傳達您的問題打算揭示的內容。因為它們可能對您來說非常有意義，但您的面試官可能會以其他方式感知它們。

反饋#3：“當代碼有效，文本按“區分大小寫”排序，經典場景。”

不幸的是，候選人在理解問題之前花了很長時間，但一旦發現問題就會立即糾正。

外賣： 速度至關重要。編寫程序時總會出現錯誤，但請盡量盡快解決。找到問題的本質，搞不清楚就趕緊翻文檔。

反饋部分4：“花了一些時間來理解為什麼 formatData 必須在重構下移出分頁。”

外賣： 同樣，速度至關重要。

反饋#5：“很多 foreach 循環，其中可以使用 array.map 或 array.reduce。了解更多關於函數式編程的知識會很有幫助。”

外賣： 學習array.map、array.filter和array.reduce，好好學習。在此基礎上，我一直在研究函數式編程，這是一項艱鉅的任務。但是你現在不需要全部學習，只要確保你掌握了基礎知識。

反饋片段 #6：我想要候選人對單元測試有更多的了解。

外賣： 這似乎很明顯，但為了更好的衡量，讓我們把它寫出來幾次：測試很重要。測試很重要。測試很重要。學習它。合併它。使用它。

文件的其餘部分是讚美。我不會講太多細節，因為它不是那麼重要。但這裡是它的要點：

• 他很好地使用了他的編輯器
• 他在 Chrome 中使用調試器（了解高級調試工具很重要）
• 他在繼續之前檢查一切是否正常（使用 console.log）
• 他試圖將代碼拆分成邏輯較少的部分
• 他使用帶名稱的變量而不是註釋，這使代碼更具可讀性。
• 他非常了解 React
• 早期的項目令人印象深刻
• 擁有除編程（設計/視覺）以外的其他積極品質

在準備過程中我可以做些什麼不同的事情？

事後看來是 20/20。但是當你被拒絕時，你不可避免地會花一些時間思考你可以做些什麼不同的事情。

更徹底地檢查家庭作業代碼。

我花了太多時間來學習我的 JavaScript 知識。我應該比我更仔細地閱讀我自己的代碼。雖然是我寫的，但是當從寫到面試的時間過去了幾個星期時，你需要回過頭來刷新你的記憶。我希望我花更多的時間在這上面，而不是在晦澀的 JavaScript 問題上。

做更多實用的 JavaScript 作業。

在面試之前，我做了很多理論工作。我現在希望我能花更多的時間，或者至少混在實際任務中。解決 Hackerrank 或 Code Wars 上的算法。或者構建常見的前端組件，如排序列表、下拉菜單、分頁等。

採訪結束

第一次技術面試後我感覺如何？老實說，這是一次很棒的經歷。我非常感謝與我交談的面試官給了我如此詳細的反饋，並讓我在下一次面試之前糾正我的錯誤。儘管我沒有得到這份工作，但我離獲得第一份前端開發工作更近了一步。

我還了解到，面試是一件善變的事情。也許如果我在自己的項目中建立了一個排序機制，或者如果我得到了一個更接近於我以前做過的事情的不同任務，它就會變得不同。

我最大的優勢是在過去的一年裡我花了很多時間學習 JavaScript，現在我能夠快速學習和採用新的想法。不幸的是，我認為這次我無法展示這些知識。我沒去：

• 向他們展示我對 JavaScript 原型鏈的了解，以及它如何讓對象之間的方法輕鬆且高效地共享方法。
• 討論閉包以及 JavaScript 內部函數如何能夠關閉外部範圍內的變量並在外部函數返回後稍後訪問它們 - 以及這如何防止垃圾回收。
• 分享我對 JavaScript 範圍的了解，以及 JavaScript 如何檢查其本地範圍的每一級，一直到全局範圍以查找變量。
• 分享我的轉換知識以及 ===如何在不進行類型轉換的情況下檢查相等性以及 ==如何檢查相等性和類型轉換。
• 談談吊裝以及語句的功能 和變量（除了 let 和 const）在 JavaScript 中被提升到頂部，允許前面的代碼使用它們。
• 談談 this 關鍵字，以及 this 的值如何完全取決於函數的調用（調用點）。

我排序 （雙關語） 希望我有。

成功之路

現在，我很容易對自己說：“我不夠好。我需要花 3-4 個月的時間來學習更多，然後再試一次。”

我沒有。

我決定在兩週內申請盡可能多的工作。我申請了挪威最大的 IT 公司。

我瞄準了天空。

兩週後，我完成了幾家公司的面試，又進行了一次技術面試。

第二輪準備

如果我從第一次技術面試中學到了一件事，那就是準備是關鍵。將技術面試視為考試，並採取必要措施確保您通過考試，這會有所幫助。

考試和麵試一樣，都是錯誤的，因為它們未能涵蓋候選人的全部知識範圍。那你能做什麼呢？

拓寬您的知識範圍。

防彈。做個新人。

對我來說，我使用先進的記憶技術在 8 小時內記住了 100 多個前端面試問題的答案。這些問題可以在這個存儲庫中找到。

我如何做到這一點超出了本文的範圍，但是如果您對它的工作原理感到好奇，請在下面發表評論，我會寫另一篇關於它的文章。

此外，我還花時間研究 Code Wars 和 Hackerrank 的實際示例。以及花時間實際構建東西。

技術面試#2

從上次失敗的面試中吸取了豐富的經驗，我已經盡職盡責。

這次採訪更多地集中在前端概念的討論上。這是一次全面的面試，我覺得面試官真的很想映射我的知識，了解我的長處和短處。

這次面試持續了大約兩個小時，我非常感謝面試官也盡職盡責。

以下是我們涵蓋的所有主題的列表：

• JS、CSS和HTML大寫
• 文檔結構
• 項目結構
• Git
• 性能
• 安全
• 可訪問性
• 搜索引擎優化
• 響應式網頁設計

編碼挑戰基於 vanilla Javascript。我被要求使用 vanilla Javascript 向 div 添加一個簡單的類。現在，如果您在 JS 中主要使用框架，您可能不熟悉 classList API。幸運的是，我大部分時間都在使用 vanilla JS 完成所有 freeCodeCamp 項目。這是它的樣子：

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') 將其變成一個襯裡。如果您在下拉菜單之外單擊，我還被要求擴展它以關閉菜單：

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

編碼挑戰的要點：

• 越短越好，只要它始終可讀。
• 就性能而言，最好將查詢選擇器放在事件偵聽器回調函數之外（僅調用一次，而不是每次觸發偵聽器時調用）。
• 在性能方面，getElementById 和 getElementByClassName 比 querySelector 性能更高

第二天，經理叫我來了。我通過了面試，他們想給我一個offer。

我本可以在這裡停下來。我本可以說：“我通過了一項技術，這已經足夠了”。

我做了相反的事情。

我打電話給當時與我交談的每家公司，告訴他們我有一個報價，並詢問我們是否可以加快流程，因為我現在有時間限制。

面試，尤其是技術面試，是艱難的心理考驗。您一直在展示，一直在預期表現並超出預期。這個很難（硬。那我為什麼要這樣做呢？

四個原因。

1. 我想向自己證明這不是運氣。
2. 我想尊重我採訪過的每一個人，並給他們一個公平的機會。
3. 我想確保我找到了最合適的社區，最適合我加入並成長為一名開發人員。
4. 你們。這個社區對我幫助很大，我想幫助從技術面試中收集盡可能多的信息，以便您從我的錯誤中吸取教訓並做好相應的準備。

我從 freeCodeCamp 獲得的幫助和支持讓我感到謙卑，我想回饋。

技術訪談#3

在與其他公司取得聯繫並解釋說我收到了頂級公司的報價後，很多公司都熱衷於催促我通過。一周內我進行了幾次面試，我還有更多的技術面試要通過。

以下是我第三次技術面試中的一些面試問題摘要：

• 您是如何進入 React 的？你為什麼進入它？它有什麼好處？
• Redux 是如何工作的？ API由什麼組成？什麼是不變性？不變性有什麼好處？
• 您將如何重新設計我們的網頁？
• 您對使用更深層的應用程序有何感受？例如後端？
• 您自己進行測試嗎？什麼是單元測試？
• 什麼是對您來說好的用戶體驗？
• 您如何測試用戶體驗？

這次採訪中的編碼挑戰是基於 CSS 的。我收到了一張紙，上面有一些 CSS 規則，看起來像這樣：

<div id="menu" class="dropdown-menu"></div> // HTML Element
// CSS Rules
#menu {
   color: black;
}
.dropdown-menu {
   color: green;
}
div {
   color: blue;
}

我的任務是解釋我所看到的。我立即識別了 HTML 元素，並告訴面試官該元素上的 id 和 class 可以在 CSS 中用於選擇 HTML 元素。從那裡，我解釋說 CSS 是級聯的，這意味著通常最後一條規則將適用。但是，在這種情況下，選擇器具有不同的權重。權重的順序是這樣的：id> class> element。

這意味著，在上面的示例中，黑色將應用於 HTML 元素。

技術面試 #4

這是我最後一次接受技術面試。雖然它仍然令人傷腦筋，但現在我已經習慣了。以下是我們討論的內容的概要：

• 製作一個基本網站。識別組件。
• 您將如何使其具有響應性？
• 如何將文本垂直和水平居中？
• 什麼是 CSS 盒子模型？內容框和邊框有什麼區別？
• 雙等號和三等號有什麼區別？
• React 有什麼好處？
• array.forEach 相對於 for 循環有什麼好處？在某些情況下您可能需要使用 for 循環？

編碼挑戰是構建不同難度的自動換行功能。想像一下，你只能在屏幕上放 20 個字符，如果超過它，你必須從新行開始。

我對這個問題的最初解決方案涉及拆分字符串，使用計數器和模運算符來確定計數是否為 20，然後將換行符插入數組並加入字符串。

然後增加了任務的難度，只允許完整的單詞出現在一行上。這意味著如果一個單詞導致總數超過 20，則需要在該單詞之前插入一個換行符。

我沒有在面試中一路解決這個問題，但我走在了正確的軌道上。我在不確定的時候使用了MDN，並且進展良好。

這樣就夠了。

不過我看不下去了，如果你有興趣，這裡是解決的版本：

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('');
}

結論

如果你一路走到這裡，恭喜。這是一個很長的。我盡了最大的努力使它盡可能地提供信息，希望它可以幫助像你這樣的人。

最終結果讓我陷入了我從未想過自己會遇到的境地。最後，我有 5 個要約可供選擇。一家大公司甚至根據我從競爭對手那裡得到的報價給了我一個“盲目的”報價。我最終選擇了我第一次通過技術的公司，因為我相信它最適合我。

技術面試可能是一場艱苦的精神考驗。你會受到挑戰，你會被帶出你的舒適區，這是一件好事。它幫助你成長。它讓你變得更好。

如果你準備好了，你就會做好準備。

所以根據我自己的經驗，不要迴避技術面試。不要因為你失敗了而推遲它。不要認為這是你作為開發人員的最終衡量標準。它不是。它只是公司用來衡量您的生產力的最不損壞的工具。

申請工作。好好準備。參加技術面試。從錯誤中學習。重複。

如果你這樣做，我保證你會成功。

我為你加油。