自學轉行成前端工程師，三面拿下字節跳動offer

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

雖然大學專業也的確是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的事件循環機制，不會上來就問概念，而是換個角度，從題目入手，看你是否真正掌握。因此對於概念的理解真的很重要。