程式前沿 幫助程式設計師解決問題，增加專業技能，提升個人能力與未來世界競爭力。

前端實習面試彙總

NO IMAGE

最近一直在多看基礎的書多碼程式碼準備找實習，在網上也蒐羅了不少面經，現在把蒐羅到的實習生面試題自己整理一下。

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

目錄

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. 你覺得你有什麼優勢可以來淘寶技術部？ 嘿嘿，就不告訴你我是怎麼答得~~