我是一名前端工程師，通俗地說，就是一隻程式猿。

雖然大學專業也的確是IT相關專業，但求學期間划水四年，僥倖未掛科並順利畢業，找的第一份工作是軟體公司的銷售類職位，想著多少也算專業相關愉快入職，卻無論如何適應不了酒桌上的觥籌交錯，工作得痛苦不堪。某天一衝動辭了職，然後因為下一步沒有方向開始了漫長的失業生涯。

我已經記不太清楚為什麼自己當時要選擇前端開發這一方向了。不過前端入門確實簡單，不需要一點程式設計知識你就能做出一個漂亮的靜態頁面，甚至還能做出動畫效果，總而言之，非常容易讓人有成就感。或許這就是原因吧。

學習了差不多半年，主要是看網上的視訊課程，買了一些學習前端的最新的書籍，刷了很多公司面試題，我開始找工作，然後發現崗位雖然不少，但邀請面試的少之又少。

轉行後的第一份工作

第一個面試機會來自一家初創公司，面試之前我緊張到胃不舒服。面試官直截了當地問我一天能做幾個頁面。我愣住了，回答從未測試過，所以不好說，於是他現場讓我做了一個簡單的頁面當作測試，然後對速度表示大概滿意，隨即示意我通過了面試。

我對這樣的輕率感到大為吃驚，又瞭解到公司並沒有其他前端人員，思量之下還是拒絕了這個機會。

在面試我現在所在的這家公司的時候，總監面試我的時候問：“為什麼之前一直自學，現在卻決定出來找工作？”

我回答：“因為沒錢了要過不下去了。”

後來公司老闆面試我的時候，問我：“有沒有自己學習能力不錯的實際證明？”

我想半天回答剛剛總監說我學得還挺快的。

後來我把面試的過程講給同學聽的時候，他笑得前仰後合。不過好在這場面試的結局是好的——我順利入職啦。

在這家公司做了大概一年半之久，因為個人職業追求，這家公司無法提供自己專業和職業發展的條件，希望換一家公司，爭取到發展的條件。

這次和之前剛轉行找工作不一樣，投的都是一些大廠，希望自己以後有更好的發展，當然了啦，大公司工資起點高，福利待遇好，這個是毋庸置疑的。

投了很多公司，位元組跳動算是比較心儀的公司，在面試前準備了很久，刷了很多面試題，，可以說準備得十分充分了。

面經部分

一面-70mins

• 螢幕正中間有個元素A, 隨著螢幕寬度的增加，
  始終需要滿足以下條件：

  • A元素垂直居中於螢幕***；

  • A元素距離螢幕左右邊距各10px；

  • A元素裡面的文字”A”的font-size:20px；水平垂直居中;

  • A元素的高度始終是A元素寬度的50%; (如果搞不定可以實現為A元素的高度固定為200px;)

  • 請用 html及css 實現

    
    

函式中的 arguments 是陣列嗎？若不是，如何將它轉化為真正的陣列

請說出以下程式碼列印的結果

 if ([] == false) {console.log(1);};
 if ({} == false ) {console.log(2);};
 if ([]) {console.log(3);};
 if ([1] == [1]) {console.log(4);};

請說出以下程式碼列印的結果

 async function async1() {
 console.log('async1 start');
 await async2();
 console.log('async1 end');
 }
 async function async2() {
 console.log('async2');
 }
 console.log('script start');
 setTimeout(function () {
 console.log('setTimeout');
 }, 0);
 async1();
 new Promise(function (resolve) {
 console.log('promise1');
 resolve();
 }).then(function () {
 console.log('promise2');
 });
 console.log('script end');

實現ES5中Function原型的bind方法， 使得以下程式最後能輸出'success'

 function Animal(name, color) {
  this.name = name;
  this.color = color;
 }
 Animal.prototype.say = function () {
  return `I'm a ${this.color} ${this.name}`;
 };
 const Cat = Animal.bind(null, 'cat');
 const cat = new Cat('white');
 if (cat.say() === 'I\'m a white cat' && cat instanceof Cat && cat instanceof Animal) {
  console.log('success');
 }

請用演算法實現，從給定的無序、不重複的陣列data中，取出n個數，使其相加和為sum。並給出演算法的時間/空間複雜度 。(不需要找到所有的解，找到一個解即可)

 function getResult(data, n, sum) {
 }

• 反問環節

一面結束，第二天下午hr打電話約二面。

二面-45mins

程式碼執行結果

var a = function () { this.b = 3; }
var c = new a();
a.prototype.b = 9;
var b = 7;
a();
console.log(b);
console.log(c.b); 

• JS繼承如何實現

• repeat 實現，使用JS實現一個repeat方法，呼叫這個 repeatedFunc("hellworld")，會alert4次 helloworld, 每次間隔3秒

function repeat(func, times, wait) {
}
const repeatFunc = repeat(alert, 4, 3000)

• 程式碼題 + 邏輯：給定一個整數陣列，每個元素大小都在 1- 100 之間，對這個陣列進行排序。範圍擴大到32位整數怎麼辦？（可以敲程式碼，也可以講思路）

• hash表結構，解決衝突的辦法，hash函式有什麼型別

• 開放題：學資料結構或者演算法過程中，有沒有什麼地方覺得很巧妙

• 反問環節

二面結束，當晚hr打電話約三面，那個激動啊，終於過了二面了

三面-50mins

• 模式匹配，
  1234567890 ->1,234,567,890（不是簡單的JS函式，是使用正則做的，這邊踩坑了）
• 瀏覽器的快取策略
• 跨域問題
• 專案的技術難點（講了第一個‘難點’，大佬說，這好像不是難點吧？）
• JS如何效能監測，如何監測使用者頁面是否卡頓（不懂，強答，聊了一會大佬說跳過這問題吧）
• 解決hash衝突的辦法
• 陣列和連結串列的區別
• 瀏覽器渲染過程
• 手頭offer情況
• 為什麼選擇前端？
• 反問環節

三面有感：前兩面都是做題 + 原理的面試情況，三面迴歸了聊技術的方式。可能因為是大佬面，總感覺壓力很大，一股自己涼了的感覺（可能是因為太菜了），每個問題面試都會一直追問，問到你答不出來為止才換問題。三面總共有兩次被面試官說“不聊這個了，我們換個話題吧”。

三面結束後，真的是慌得一批，覆盤完感覺每個問題面試官都不是很滿意，感覺涼了，焦急得等待結果。恰巧是週五，如果當天等不到結果，那就可能要等到下一週了，果不其然當天沒訊息。

週六下午等不住了，發短息問了hr。要特別感謝hr謝謝，非工作時間幫我查詢結果，告訴我通過了，第二天會聯絡我。（內心其實超級激動）

總結

從轉行到現在，差不多兩年的時間，雖不能和大佬相比，但也是學了很多東西。我個人在學習的過程中，習慣簡單做做筆記，方便自己複習的時候能夠快速理解，現在將自己的筆記分享出來，和大家共同學習。

個人將這段時間所學的知識，分為三個階段：

第一階段：HTML&CSS&JavaScript基礎

第二階段:移動端開發技術

第三階段:前端常用框架

PS

• 推薦學習方式：針對某個知識點，可以先簡單過一下我的筆記，如果理解，那是最好，可以幫助快速解決問題；如果因為我的筆記太過簡陋不理解，可以關注我以後我還會繼續分享。

• 大廠的面試難在，針對一個基礎知識點，比如JS的事件迴圈機制，不會上來就問概念，而是換個角度，從題目入手，看你是否真正掌握。所以對於概念的理解真的很重要。