一年前端面試打怪升級之路（一）

我的背景介紹

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小時不到，主要仍是介紹本身的項目，如今來看上面的題目真的很基礎，可是當時的我答的也並很差。

由於是熟人推薦，並且事先知道面試小姐姐是學姐，也加了微信，我也是天真無邪，小姐姐說過來聊一聊，我就真的啥都沒帶就跑過去，還真覺得是聊天，以致於面試官的問題都是想到哪問到哪，仍是比較吃虧的。

因此，此次面試收穫經驗

1. 簡歷很重要，不只僅是用於展現我的信息，並且還可讓簡歷去引導面試官提問，這樣才能作好有針對性的準備
2. 理論基礎很重要，僅僅依靠項目實戰學習，只能成爲工具的使用機器，只有瞭解工具的底層原理，才能融會貫通，觸類旁通

第二次出擊

第二次請假，一天時間面了兩家公司，運氣比較好吧，都是很是乾脆地直接給了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^)/~