前端實習面試彙總

最近一直在多看基礎的書多碼代碼準備找實習，在網上也蒐羅了很多面經，如今把蒐羅到的實習生面試題本身整理一下。

題目來源：前端實習生面試總結
最近開始了幾回面試，雖然還不知道結果如何，可是仍是要記錄下來進行一個總結，一樣也但願對正在準備面實習生的童鞋們有所幫助~

JavaScript

1. addEventListener最後一個參數是作什麼用的？
   答：規定事件是冒泡仍是捕獲。false表示在冒泡階段調用事件處理程序，true表示在捕獲階段調用事件處理程序。（removeEventListener()同樣的）

2. 什麼是冒泡，什麼是捕獲 ？

   答：冒泡是當一個元素觸發了一個事件以後就會像上層傳遞直至document（由最具體的元素接受，而後逐級向上傳播到較爲不具體的節點（文檔））。捕獲是不太具體的節點（文件document）更早接收到事件，而具體的節點最後接收到事件。

3. 全部的事件均可以冒泡麼？
   答：不是，blur、focus、load、unload、abort不可冒泡（每一個 event 都有一個event.bubbles屬性，能夠知道它能否冒泡。詳情可看瀏覽器中有哪些事件會冒泡？）

4. 怎麼取消事件冒泡
   答：我這兒的答案錯了，謝謝大神指正，你們不要搞混啦
   eve.preventDefault(取消事件默認行爲，若cancelable是true，則可使用這個方法，cancelable屬性代表是否能夠取消事件的默認行爲).eve.stopPropagation()用於取消事件的進一步捕獲或冒泡，bubbles爲true時，可使用這個方法。

1. 怎麼判斷是否是數組

   答：a instanceof Array Array.isArray(a) 他問我還有麼~
   因此我說試一下Array的內置函數，可使用是Array不能夠則不是，其實還有 Object.prototype.toString.call(a)=== '[object Array]'

2. 怎麼把一個類數組對象轉化爲數組
   答：Array.prototype.slice.call(arrayLike)；

3. 講一下繼承
   答：繼承是代碼重用的一種形式，能夠顯著得減小軟件開發成本。在JavaScript中，繼承有三種方法：類式繼承（主要）、原型式繼承（主要）和摻元類。
   類式繼承：首先要建立一個構造函數，在構造函數中調用超類的構造函數，並把參數傳遞給它。下一步再設置原型鏈，手工將子類的 prototype 設置爲超類的一個實例（Author.prototype = new Person()），而後把子類的 prototype 的 constructor 屬性從新設爲子類（Author.prototype.constructor = Author）。
   原型式繼承：不須要用類來定義對象的結構，只須要直接建立一個原型對象，這個對象隨後能夠被新的對象重用。主要是對超類進行一個淺負責或者說是克隆，這個克隆函數以下

   functon clone(o){
       function F(){}
       F.prototype = o;
       return new F();
   }

   克隆超類後，就能夠重定義該克隆中的方法和屬性，能夠修改超類中提供的默認值，也能夠添加新的屬性和方法 。可是這個方法對於從原型對象繼承而來的成員，其讀和寫具備內在的不對等性。具體請參照JavaScript 繼承

4. Array都有哪些方法呀？
   答：concat,join,pop,push,reverse,shift,slice,sort,splice,unshift.（《JavaScript語言精粹》一書中總結了數組、函數、數字、正則表達式、字符串經常使用的方法）

5. sort方法工做原理是什麼樣的？
   答：默認的比較函數把要排序的元素都視爲字符串，在比較數字都時候，會把數字都轉化爲字符串再進行比較。

6. 那若是想要sort排序數字怎麼辦？
   答： n.sort(function (a,b) {return a-b;}) 升序

7. String有哪些方法呀？
   答：concat charAt slice substr substring 等等（其實如今以爲應該加一句說string是基本數據類型，沒有方法，string的方法是String構造函數建立的引用類型的方法~）

8. 那replace方法怎麼用的呀？
   答： string.repalce(searchValue,replaceValue)，對string進行查找和替換操做並返回一個新的字符串，參數searchValue能夠是字符串或正則表達式對象，若是它是一個字符串，那麼searchValue只會在第一次出現的地方被替換。若是searchValue是一個正則表達式而且帶有g標識，則會替換全部匹配。

9. 鼠標滑過一個元素出現一個彈出層
   答：就dom 0級來舉例子的話是 onmouseover dispaly:block

10. 鼠標滑的快不讓他出現怎麼辦
    答：設置一個setTimeout 當鼠標在上面停留的時間小於設定的時間的話他尚未出來事件就被取消掉了

11. 那setTimeout應該設置多久的時間呢? 這個我不知道有什麼約定俗成的時間設置，若是是個人話，應該回去試一下，看那個時間合適

12. 如今我想要這個元素在頁面下方是彈出層在上方顯示，元素在上方時彈出層在下方顯示？ 判斷元素距離頁面底端的位置，位置大於彈出層的高度的話就在下方彈出，不然在上方彈出

13. 若是我如今想把他作成一個工具給別人用要怎麼作？ 呃~首先使用模塊化，注意不要和其餘的方法什麼的有衝突，而後子啊裏面設置方法出入所需的參數，好比那個元素，什麼事件，彈出層的大小等等

14. 那想作一個好的工具參數確定不少，你怎麼能方便別人使用呢？畢竟參數這麼多別人會記不住的 呃~我可能會設置成一個對象，傳入對象的屬性，這樣就方便記住了。

15. 事件代理
    答：詳情見JavaScript 事件代理和委託

16. 什麼是冒泡什麼是捕獲
    答：詳情見JavaScript 事件代理和委託

17. C++

18. jQuery取到的元素和原生Js取到的元素有什麼區別
    jQuery獲取到的元素返回的是一個jQuery對象，它是一個類數組對象，屬性0,1,2...中存着查找到的DOM對象，這個jQuery對象有length屬性，表示查到的DOM的數量。js取到的元素是DOM元素。

19. Doctype的做用
    答：<!DOCTYPE>是聲明文檔的解析類型（document.compatMode），指示web瀏覽器關於頁面使用哪一個HTML版本進行編寫的指令，避免瀏覽器的怪異模式。詳情見：關於DOCTYPE

20. 響應式 我只答了@media

21. setTimeout 和setInterval的區別
    詳情見：setTimeout() 和 setInterval()

22. setTimeout時間設爲0是否當即執行，爲何？
    不必定，由於JavaScript是一個單線程的解釋器，所以必定時間內只能執行一段代碼。爲了控制要執行的代碼，就有一個JavaScript任務隊列。setTimeout時間設爲0，是告訴JavaScript在0毫秒後把當前任務添加到任務隊列中。若是隊列是空的，則添加的代碼會當即執行；若是隊列不是空的，則它要等前面的代碼執行完後再執行。

23. 構造函數的運行機制

24. this的綁定

25. call()和apply()的區別

26. Js繼承有哪些？原型繼承是什麼樣的

27. 解釋一下模塊化，舉例模塊化的方法

28. GET和POST的區別

29. 函數聲明和函數字面量的區別

30. jQuery的聯級有什麼好處

31. 漸進加強 優雅降級

CSS：

1. float高度塌陷解決方案：
   clearfix:after{clear:both;content:".";height:0;display:block;visibility:hidden;}(給本身挖了個坑after是僞元素不是僞類，我說錯了~)

2. line-height像素單位和百分比的單位的計算方法： length 設置固定的行間距。單位em，px，pt等等。百分比%
   ，基於當前字體尺寸的百分比行間距。（我以爲我答得是對的，可是他有重複了一遍：我說的是line-height）

3. 一個ul裏有若干個li，想要每一個li都有一個border-bottom，最後一個li不想要boder-bottom要怎麼作：(ul:last-child{border-bottom:none;}或者給最後一個li加一個class選擇器設置border:none;(他說還有，查了一下什麼加載jQuery可之類的~)

4. css 選擇器過長怎麼判斷他的優先級：行內樣式1000 -- id100 -- 類、僞類、屬性選擇器10 --
   類型選擇器、僞元素選擇器1 經過相加計算大的優先級高，值相等的話後聲明的優先級高。

5. 一個div怎麼垂直居中呀？ 餓了麼說過了~

6. css3你經常使用的屬性有什麼呀？ 動畫的transform transmation border-radious box-sizing box-shadow

7. 很長一段話要進行截取，超過以後是三個點怎麼作？ 不考慮兼容的話CSS3有 text-overflow：ellipsis 而後或者overfloww:hidden 再在邊框前側加入一個三個點的span 或者用僞元素：after{content:"..."}之類的吧

8. position 定位

9. dom操做元素

10. 兩列布局

11. inline-block空隙怎麼解決

12. 如何平鋪一張背景圖？ css方法：設置一張圖片 {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1;} js方法： 判斷瀏覽器高度，設置圖片的高度

13. 若是讓圖片按比例放大縮小呢？ 用Js來判斷寬高，而後按比例放大（面試官說屏幕壁板都是橫屏，因此width設置爲100%就能夠了）

14. css hack

15. 條件註釋

16. dispaly的值

17. css3動畫的性能優化你知道什麼？ 我只答了最好不要使用all

18. BFC，haslayout是什麼，怎麼觸發

HTML

1. 什麼是語義化

2. html5 語義化的標籤

HTTP

1. http狀態碼都知道那些

算法（一個都沒答上來）：

1. 優先隊列

2. 堆

3. 快速排序

4. 數組去重

5. 怎麼構造一棵樹

6. 十進制數判斷有多少位二進制碼

項目

1. css3翻書是怎麼作的呀？ 巴拉巴拉講了一堆

2. 你這個翻頁有個bug呀，什麼緣由怎麼改呀？ z-index的問題，怎麼改布吉島~

3. canvas繪圖怎麼作的呀？ 巴拉巴拉講了一堆

4. 你這個繪製有bug呀，什麼緣由怎麼改呀？ 滾動條的問題，怎麼改又布吉島。。。（加上滾動條的距離，面試官告訴個人~）

版本控制

1. 瞭解版本控制器麼？ 瞭解一些github

2. 基本操做會麼？ 我都用的windows的圖形界面進行操做的（面試官心中可能有一萬隻草泥馬在奔騰....）

3. github的工做原理是什麼呀？
   我把個人代碼上傳到github的倉庫上，而後別人能夠下載進行代碼添加而後上傳更新倉庫，我能夠再下載更新過的繼續進行添加修改

4. 那若是大家兩個修改同一份代碼發生衝突怎麼辦？ 我知道的方法只有回滾，就是和隊友交流看誰的代碼更重要，而後進行一個回滾操做。

5. 只能這樣麼，必須有一我的犧牲麼？
   我瞭解到github的功能其實很是強大，因此確定有更好的方法嗎，只是我如今對github的使用僅限於本身代碼的存儲以及一些小的修改，因此並不瞭解更好的方法。。。。

其餘

1. 你經常使用的代碼編寫工具是什麼？ sublime text

2. 你要修改不少相同的地方怎麼辦？ 選中一個 按Ctrl+D 選取多個 而後一塊兒改

3. photoshop怎麼樣？ 能夠進行簡單的psd頁面圖的ps 不會人物風景的美化

4. 想要導出一個文件說起比較小的png怎麼作 存儲爲web所用格式。。。（應該不對~）

5. 性能優化了解多少

項目（這裏聊了好久）

1. 給我介紹一下你都作過哪些項目吧？ 巴拉巴拉一堆沒有什麼特定答案~

2. 你是怎麼進行團隊項目的合做呢？ 巴拉巴拉一堆沒有什麼特定答案~

3. 你如今在學些什麼呀？ Linux下Qt開發~~巴拉巴拉~

4. 作前端有用不到C++，你學他有什麼用呀？ 我不僅是一個寫前端的，我仍是一個程序員，C和C++是這些語言的基礎，因此巴拉巴拉~

5. 你最滿意的C++程序講一下？ Qt呀，類呀~什麼的~

6. 你以爲淘寶首頁有哪些技術優點？
   頁面很大，要承載的東西也不少，可是可讓用戶清晰明瞭的找到想要找的東西證實佈局作的很是好，而後裏面包括圖片輪播呀箇中點擊事件呀什麼的事件也不少，因此避免事件衝突也很膩害~

7. 那你覺的你用多久能夠寫出淘寶首頁？ 呃~一個星期吧（這個可真的不知道什麼樣的答案合適）

8. 你爲何想來淘寶技術部？ 由於技術牛，並且有不少大牛在這個團隊裏，若是我有機會的成爲其中一員的話就業能夠學到更多的東西啦~

9. 你以爲你有什麼優點能夠來淘寶技術部？ 嘿嘿，就不告訴你我是怎麼答得~~