個人背景介紹
2017年本科畢業生，座標杭州，前端程式媛一枚。
在17年4月以前是個UI軟妹子，自我定位想要成為一個互動大神，熱衷於研究產品使用者體驗。
17年3月以UI設計實習生的身份進入現在的公司之後，由於UI發展前景不明，經過一段時間的深思熟慮（一拍腦門）決定轉崗前端，自學一段時間後跟經理提出需求，隨後逐漸往前端方向發展，6月轉為正式員工，崗位為前端工程師。
一年前端經驗，且之前從未有過前端面試經歷
正文開始
近期面試了不少公司，採取的戰略是把最想去的公司放到最後，一開始積累經驗，做足準備再奮起一搏。
從一開始的，完全get不到面試官提問的點，只知道搖頭說不知道，之後每次覆盤總結，梳理不足。到現在面試成功率也算可觀，目前收穫了幾個offer，大中小型公司也都齊了。雖然被最想去的DXY給虐的不輕，但自信心也逐漸建立起來，並且瞭解自己的不足之處，有了努力的方向。
貼上自己升級的過程。
篇幅較長，會分篇更新，敬請期待
傳送門：
第一次面試
沒有經驗，年輕的我連簡歷都沒帶（UI設計面試的時候都是準備線上作品集），毫無準備就興沖沖地上了。
面完了才知道，面試和實際工作開發還是不一樣的，面試更考察理論基礎。所以平時不重視基本功的我當然笑嘻嘻地跪了。
後來回去瀏覽了下面試題，其實發現當初面試官問我的問題都是非常基礎的題目，而且有些知識點平時不知不覺都有使用到，只不過沒有建立起知識體系，以至於根本不理解面試官在問什麼，一臉懵逼加答非所問。
從這次經驗中吸取了教訓，一定要重視理論基礎，我的學習方式也從執著於製作酷炫的實戰demo，轉變為看面試題和理論書籍。
for迴圈setTimeout500ms列印出1-10
主要還是考察閉包，並且結合非同步
for(var i = 1;i < 11;i++){
var a = function(){
var j = i;
setTimeout(function(){
console.log(j);
},500)
}
a();
}
複製程式碼瞭解的跨域方法
工作中都是在同源伺服器上請求資料，所以其實並沒有接觸過實際的跨域操作。
但是，即使沒見過豬跑，那也吃過豬肉吧，同源策略，jsonp，corse，我把我知道的都扯了一通。後來回來又參照阮老師的文章整理了一遍
文章見簡書同源策略與跨域
css選擇器+和 ~
+：選擇相鄰的後一個同級元素 ~：選擇元素之後的所有的同級元素
關於css選擇器在之後的面試中也同樣有遇到，比如nth-of-type(n)和nth-of-child(n)的區別，所以也整理出了關於選擇器的擴充套件
文章見簡書css選擇器
jq有哪些地方用到了閉包，或者說你平時見過哪些閉包？
面試前剛和一個同時聊過，也問到了他對閉包的看法，同事自信一揮手，閉包實際工作中用到的不多。
天真的我在面試中也這麼說了，面試官心裡一定狠狠地鄙視了我，於是跟我大談JQ原始碼，從來沒有看過原始碼的我暴風哭泣。
同樣的問題也出現在了另一家同行業（非網際網路）的大公司，想來大公司的重點還是放在框架的底層原理上。
其實jq中使用了大量的閉包，所有的方法和變數都通過閉包設為私有，並使用$在全域性進行呼叫。
閉包就是使區域性變數和方法常駐記憶體，可以在全域性進行訪問，從而防止全域性重名的現象。
不過也正因為這個特性，閉包會佔用大量的記憶體空間，所以使用的時候也要慎重。
陣列的內建方法有哪些
依然是一個基礎題，面試官讓我知道多少說多少。後來回來也做了一個系統的整理
第一次面試歷時1小時不到，主要還是介紹自己的專案，現在來看上面的題目真的很基礎，但是當時的我答的也並不好。
因為是熟人推薦，而且事先知道面試小姐姐是學姐，也加了微信，我也是天真無邪，小姐姐說過來聊一聊，我就真的啥都沒帶就跑過去，還真以為是聊天，以至於面試官的問題都是想到哪問到哪，還是比較吃虧的。
所以，這次面試收穫經驗
- 簡歷很重要，不僅僅是用於展示個人資訊，而且還可以讓簡歷去引導面試官提問，這樣才能做好有針對性的準備
- 理論基礎很重要，僅僅依靠專案實戰學習，只能成為工具的使用機器，只有瞭解工具的底層原理，才能融會貫通，舉一反三
第二次出擊
第二次請假，一天時間面了兩家公司，運氣比較好吧，都是非常乾脆地直接給了offer。 一家做程式設計教育平臺，進入A輪。人數大概30人左右。雖然規模不大，不過公司業務我是非常喜歡的，一直都有一個老師夢。
技術聊天過程非常愉快，沒有涉及到基本的面試題。技術哥哥是校友，比較看重我的簡歷。著重提問了我在學校的專案，挑戰杯，大創，分別都負責什麼事情，為什麼要去做這件事，是不是負責人等等比較細節的問題。也很欣賞我組織前端分享會的經歷。同時也和我詳細地說明了公司的業務以及未來的發展規劃。
而且讓我比較感動的一點是，他們在面試我之前詳細地看了我的部落格和github，還能直接說出我的專案。讓我有了分量很足的尊重感。
之後和CEO聊，他的重點是，我對自己的規劃是不是和他們的發展一致。給我的感受是，他們需要的不是隻在技術金字塔的人，而是願意和他們一起走下去的成員。
由於和前端相關的技術涉及不多，這家公司的描述就到此。
另一家是做網際網路旅遊，辦公地址就位於西溪景區之中，環境可以說是萬里挑一了。下午3點一直到6點，最後hr姐姐還順路送我到公交站。真的很感謝，兩輪的技術面試官應該都是團隊成員，都非常親和。走的正常的筆試面試流程，不過問的內容相對也比較基礎。只能說有驚無險了。
貼上過程
筆試
筆試題都比較簡單，考察基本功，我寫的比較順利，涉及到同源和跨域、原型鏈、vue的基本使用、設計幾個簡單的函式，我就貼一下稍微印象深刻的題目
1. vue和Jq的區別
vue：資料驅動渲染頁面，不需要操作具體的dom，頁面與js耦合性弱，易於維護
jquery：依賴於dom，頁面邏輯和程式碼邏輯一致，頁面和js耦合性高 兩者的設計思想是完全不一致的，應根據不同場合和需求選擇合適的框架
2. 設計一個函式，傳入一個數字n，若n可以被3整除的返回1，可以被5整除返回2，可以被7整除返回3
恩？會不會太簡單了。。第一反應是有詐。。
果然我在做的時候就覺得有問題，如果一個數既可以被3整除又可以被5整除呢？應該返回多少？題目並沒有明確說明。想了半天也沒發現有什麼坑，我就猜測這可能是要考察輸入校驗吧
function Ajust(num){
if(typeof num != "number" || num == null){
//排除輸入為空，以及輸入非數字資料
return false;
}else{
if(num!=0){
//排除0
if(num%3 === 0){
return 1;
}else if(num%5 === 0){
return 2;
}else if(num%7 === 0){
return 3;
}
}else{
retrun num+"不能被3,5,7中任何一個數整除"
}
}
}
複製程式碼面試的時候我提出了我的疑惑，面試官也一頭霧水，所以我只能下結論是他們的題目有bug了（能不能專業點>_<）
3. 小狗（Dog）叫聲“wang”，小貓（Cat）叫聲"miao"，他們同屬Animal。請用原型和物件的知識寫出他們的關係
原題可能還要複雜點，記不太清了，考察原型鏈和物件
//建構函式
function Animal(){
this.word = "";
this.say = function(){
return "say " + this.word;
}
}
var Dog = new Animal(); // 例項Dog
var Cat = new Animal(); //例項Miao
Dog.word = "Wang";
Cat.word = "Miao";
複製程式碼面試
1. 基本資料型別有哪些
null，string，boolean，undefined，number
2. http返回的請求有幾種？分別代表什麼含義
1xx：資訊狀態碼
2xx：請求成功
3xx：重定向
4xx：客戶端錯誤
5xx：伺服器錯誤
4. 是否瞭解解構賦值
看過文件，主要包括賦值的模式和變數值，可以使用陣列或者物件的形式對給定的變數進行賦值。然後舉了個例子
const {a,b,c} = {a:"1",b:"2",c:"3"}
複製程式碼5. require和import有什麼不同
import用於引入外部模組。
require不僅可以引用檔案和模組，而且使用位置不受限制，可以在程式碼中使用
6. 是否瞭解promise
看過文件，在ES6中編寫為原生標準。是一種非同步程式設計的解決方案。Promise有三種狀態，pending（進行中）,fulfilled（成功）,rejected（失敗），後兩種合稱為resolve（已定型），一旦狀態定下，就無法發生改變。
7. ajax請求如何把非同步改為同步？
ajax方法中有一個控制非同步的欄位"async"，預設為true，表示非同步。改為false之後就為同步
8. 函式中的This指向什麼？
指向呼叫函式的物件。
面試官對我這個回答也並沒有說什麼，不過之後的一次面試中，關於這個點又做了不少展開，我這個說法也並不嚴謹，關於this的指向又是一個可以長篇大論的點了。
我先貼上紅寶書上的說法：this引用的是函式執行的環境物件
有更多的想法可以看相學長的這篇文章從這兩套題，重新認識JS的this、作用域、閉包、物件
9. apply和call可以做什麼？有什麼區別
改變this指向。兩者作用基本一致，區別在於接收引數的方式不一樣，apply用陣列或類陣列的形式接收引數
10. 左邊定寬，右邊自適應佈局；中間定寬，兩邊自適應佈局
- 左定寬，右自適應： 左部定寬，右部浮動，左外邊距設為左部寬度
- 中間定寬，兩邊自適應：
margin:0 auto
11.html5和css3有哪些新增特性
- html5：音訊，視訊，canvas，svg，等多的語義化標籤等
- css3：圓角，動畫，濾鏡，transform等
後來二面的小哥哥問了很多JQ使用的問題，這是我強項了都答的不錯
還問了關於vue的基本使用方法，也都能答上來
然後又和我談起了個人規劃，然後說如果我來的話應該是他帶我，肯定能學到很多東西的。不過呢，他再過一個月就要走了
我？？？？？
hr面
hr姐姐真是太親和了，全程跟我聊旅遊，去了哪些地方，有哪些好玩的好吃的。知道我是溫州的，更是停不下來，說很久以前去過溫州的一個島，從島上風土人情講到自己的職業規劃。我就在一邊微笑點頭。恩，對對，是的，沒錯
最後hr姐姐還順路送我到公交站。真的很感謝。
二戰還算順利，給了我這個小菜鳥很充足的能量，讓我覺得我還不算太差吧(^o^)/~