2019-個人前端面試題

時間 2019-12-04

標籤個人端面試題简体版

原文原文鏈接

2019的5月9號，離發工資還有1天的時候，個人領導親切把我叫到辦公室跟我說：'阿郭，咱們公司要倒閉了，錢是沒有的啦，爲了避免耽誤你，你趕忙出去找工做吧'。聽到這話，我虎軀一震，這已是第2個月沒工資了。css

公司真尼瑪黑，明天就要發工資，今天才告訴我說你要倒閉。領導難道是今天突然想起來要倒閉嗎？html

算了，也沒其餘辦法了。因而才工做半年的我，又填寫了簡歷，開始了默默的找工做之旅。前端

我是從5月中旬開始找工做的，到如今半個月了。先說下我面試狀況，我一共面試了10家公司。其中4家公司肯定拿到了offer。還有一家公司1面經過了，邀約我參加2面。可是面試了這麼久挺累的，就拒絕了。vue

如下是我面試過程當中遇到的一些面試題，我整理出來。每一個問題也附上相關的資料，方便本身使用。若是對大家有幫助的，也但願點個贊吧。html5

html篇

在我面試的衆多公司裏，只有58同城的1面問到相關問題，其餘公司壓根沒問。webpack

1.html4和html5的DOCTYPE有什麼區別，以及他們的做用？css3

答案：HTML <!DOCTYPE> 聲明git

css篇

問css的公司也不多，只有那些須要作h5的公司才問下。es6

1.你用過flex佈局嗎？你簡單說幾個flex的屬性？好比左對齊的屬性是啥？右對齊的屬性是啥？github

flex是個很簡單的知識點，花5分鐘時間把教程看一遍，確定就沒問題了。

Flex 佈局語法教程

2.css3實現動畫的方式有那些？

個人回答：有transition tranform animation。這樣回答已經沒問題了，歷來沒有人再追問了。若是你須要更深刻了解能夠點擊如下教程查看.

CSS3的動畫屬性

3.你移動端是如何作適配的？

個人回答：早期的時候我是經過計算設計稿和屏幕的比例，動態的設置device-width和initial-scale，再經過px定位來實現移動端適配。後來改用rem，淘寶的flexbile出來以後，我就用flexbile。如今都是用css新的單位vw適配的。

這樣回答，基本上就沒問題了，也沒有追問。感興趣能夠看下這兩個教程

移動端適配問題解決方案

移動端適配總結

4.如何實現垂直居中

個人回答：若是是行內元素的話，就設置父類的text-align和子類的vertical-align(實際應用中vertical-align並不怎麼有效)。我我的比較經常使用的設置父元素爲相對定位，再設置子元素絕對定位，top和left爲50%，transform爲-50% -50%。有時候也用flex。

這樣回答，我我的感受就好了。沒那麼多花裏胡哨的東西。如下是知識點的補充，剛興趣的能夠看下，這個大佬的教程。

Vertical-Align，你應該知道的一切

16種方法實現水平居中垂直居中

5.盒裝模型和怪異模型有什麼區別，如何在現代瀏覽器中實現怪異模型？

個人回答：盒裝模型的寬度等於content-width，不包括邊框和padding。怪異模型的寬度等於內容寬度+padding+邊框。在現代瀏覽器中設置box-sizing爲border-box 就能夠實現怪異模型。

標準模式與怪異模式對於渲染頁面的影響

6.如何實現聖盃佈局？

css經典佈局——聖盃佈局

7. 簡單說下bfc是啥,以及如何造成一個bfc

學習 BFC (Block Formatting Context)

總結:面試中關於css的問題很是少，常問的也就1-4。5,6,7只被問過一次。

js篇

1.說下es6裏你經常使用的功能？

這問題10個公司面試，10個公司的人都問。我都不知道問這些有啥意義。

個人回答：我先說我經常使用的啊，定義變量的時候用let、const，定義函數用箭頭函數，數組新增了一些方法，好比from、of、includes。字符串新增了一些方法padStart、padEnd、includes。擴展運算符、解構賦值。接下里就是最經常使用的promise和async和await。不怎麼經常使用的是set、map、weekset、weekmap、Symbol、proxy等。

ECMAScript 6 入門

2.說一說let、const和var的區別？

我就不寫本身的答案了，有更好的問題，我就給大家推薦更好的文章。

let 和 var的區別

3.數組foreach和map的區別？

個人回答：foreach是直接修改原數組的，map是修改以後返回一個新的修改過數組，原數組不變。

4.call、apply、bind的區別？

this、apply、call、bind

5.你是怎麼實現js繼承的，不使用class，寫個你最經常使用的繼承方式？

深刻JavaScript繼承原理

6.js的原型鏈是啥？

JavaScript原型與原型鏈

7.說一說js的閉包是啥？手寫一個閉包的案例

JavaScript 閉包

8.說一說promise是啥？

能夠參考一下兩篇文章：

面試精選之Promise

解讀Promise內部實現原理

9.你能不能手寫一個promise？

我感受這簡直是變態題，這個是我一年前面試愛奇藝的時候，面試官要求的，我沒寫出來。

你能手寫一個Promise嗎？Yes I promise

10.談一談你對async和await的理解？

個人回答：async和await是對generator函數更優雅的實現，可以以同步的方式寫異步的方法。async定義在函數前面，函數執行後返回一個promise。await後面只能跟一個promise函數。

更詳細的問題參考下面教程

理解 async/await

11.手寫一個冒泡排序或者快速排序

js數據結構和算法(9)-排序算法

12.手寫一個js的單例模式，而且說下你都在哪些地方會用到？

JavaScript設計模式

13.如何把一個多維數組轉爲1維數組，好比[1,2,[3,[4,[5]]]]

JavaScript 學習筆記 - 多維數組變爲一維數組

14.正則表達式的回溯是啥？

一年前愛奇藝面試題

你真的懂JavaScript的正則嗎？

正則表達式回溯法原理

15.Object.create()和new object()和{}的區別？

58同城面試題

Object.create()和new object()和{}的區別

16.for in和Object.keys的區別？

JavaScript中in操做符(for..in)、Object.keys()和Object.getOwnPropertyNames()的區別

17.箭頭函數與普通函數的區別

詳解箭頭函數和普通函數的區別以及箭頭函數的注意事項、不適用場景

18.js的事件循環機制是啥？

Js 的事件循環(Event Loop)機制以及實例講解

總結：我面試的話基本上問了這些問題，promise是重中之重，面試必問。

vue篇

1.vue數據雙向綁定原理的原理是啥？

這問題都被問爛了。

面試題：你能寫一個Vue的雙向數據綁定嗎

模擬 Vue 手寫一個 MVVM

2.vue是如何傳參的？

又是一個爛大街的問題

Vue 組件間通訊六種方式（完整版）

3.說下vuex是什麼？

Vuex Demo 講解

4.vue-router是怎麼實現路由的？路由守衛是什麼？

前端路由簡介以及vue-router實現原理

Vue的鉤子函數-路由導航守衛、keep-alive、生命週期鉤子

5.你經常使用的element-ui的組件有那些？

個人回答：表單，tab，日曆，佈局，列表，分頁，樹形結構，彈層等。

Element

6.vue中權限是怎麼設置的？

手摸手，帶你用vue擼後臺系列二(登陸權限篇)

7.在vue開發中你遇到過什麼難題？你又是怎麼解決的？

這個是個開放式的問題，常常被問道，可是又很差回答。我本身回答的是本身開發vue組件面臨的問題。模模糊糊的說過去了，對方我也不知道他聽懂沒聽懂。反正胡亂回答過去以後，他就沒有再問了。

vue插件開發、文檔書寫、github發佈、npm包發佈一波流

8.vue是如何編譯模板的？

模擬 Vue 手寫一個 MVVM

9.請你說下vue的生命週期是啥？以及每一個生命週期都作了啥事？

vue生命週期詳解

10.在你作過的那麼多項目裏，說一個你最有成就感的項目？

這個必問。這個必定要想好，能夠從技術、溝通、業務緊急度等方面選一個最讓你自豪的項目說下。

總結：關於vue其實沒多少考點，可是又常常被問。對了還有，每次也都會問你開發vue幾年了，這個你知道強調你用的很熟就能夠了。

webpack篇

1.webpack是什麼？說下你經常使用的webpack的loader和plugin是啥？

webpack4介紹與總結

2.webpack的loader和plugin的區別是啥？

webpack loader和plugin編寫

webpack中loader和plugin的概念理解

3.webpack如何打包多頁應用？

webpack4 多頁面，多環境配置

4.如何作webpack優化？

Webpack4優化之路

5.如何使用webpack實現增量打包？

webpack增量打包多頁應用

6.commonjs和amd的區別？

前端模塊化：CommonJS,AMD,CMD,ES6

總結：關於webpack的面試題，也就這些了。不少面試官都喜歡問webpack，webpack也是面試中的重點。

http相關

1.你是怎麼解決跨域問題的？

爛大街的問題。

前端跨域整理

2.強緩存是什麼?協議緩存是什麼？

HTTP----HTTP緩存機制

總結：關於http的面試題就這兩個，面試前準備下就行了

其餘

1.先作下自我介紹吧

（必問）這個環節是很是重要的，我之前都不怎麼準備，想到哪說到哪，後來我才意識到這是不對的，由於這是每一個面試都必問的。因此很是有必要，搞一個標準答案出來。其次，你的簡歷一般都是好幾頁，裏面都是密密麻麻的問題，想讓面試官從簡歷裏瞭解你有多優秀，那是癡心妄想。因此這時候，自我介紹就很是重要了。

自我介紹時長：大概2-5分鐘左右。

1.須要介紹你的地點和學校，由於不少公司很看重這兩項，

2.介紹你的亮點，好比我，我大學拿過好幾個獎學金，這就是亮點。工做裏，我擅長寫文檔，帶過團隊這也是個人亮點。

3.介紹你用過的技術，擅長什麼。

4.介紹你之前的公司和工做內容。

5.介紹你的性格和優勢。

其餘的儘可能不要多說，言多必失

2.爲何你要離職？

（必問）這個很考察你的情商，你千萬不要說跟上一家公司領導有問題，也不要說你身體很差。這個問題也是面試必問的，你必定要找個好的理由，或者編一個好的理由。不要讓人以爲你很不穩定，很很差相處。

若是你以前是個大公司，你能夠說職業瓶頸，你想進步，可是發現工做中用到的技術就那麼多，怎麼都突破不了，因此你想換個工做。或者說官僚主義嚴重等等。若是是個小公司，你就能夠說拖欠工資，公司倒閉等等。這個你能夠好好想一想。（哎，我就是公司倒閉，拖欠了3個月工資）

3.你上一家公司的薪資待遇？

（必問）。有些公司是須要打印上一家公司的銀行流水的，因此回答這個問題要慎重。

若是不須要打印流水，你報上一家公司工資的時候，比你理想工資低1-2k就行了，不用說實話。徹底不用擔憂對方到時候打電話覈對的問題。你上一家公司的hr若是不是蠢到家了，他是不會說你實際工資的。

若是須要打印流水,你先找下你朋友裏有沒有工資比較高的，有的話，就按他的工資報。打印流水的時候就讓他打印一份給你。打印流水是不須要銀行簽名的，因此你隨便搞就好了。若是你沒有這樣的朋友，那就老實寫實際工資吧。

需不須要打印流水，面試的時候填來訪登記表的時候，上面都有寫明的，注意看就好了。

順便說下背景調查的事，寫你上一家公司的領導或者同事的時候，若是你有關係比較好的同事，就寫你同事名字。若是沒有你就寫你好朋友或者親人的就能夠。對方查不出來的。

4.上一家工做中遇到過什麼難題？

這個不算很常問，可是最好也先想下。跟hr聊的時候，儘可能說技術上的難題。跟技術聊的時候，儘可能說溝通問題。沒有問題，你最好也要提早編一個問題。不建議現場編，很容易圓不過來。

5.將來職業規劃

（必問）這個你只須要回答5年內的規劃就能夠了，再遠了，你就說太遠了，如今制定也不理想，須要日後不斷完善。5年規劃，你也要有個目標，通常的模式是前2年精研技術，好比精研webpack原理，學習數據結構和算法等等，要說出點東西。後3年要學習管理，好比研究架構，學習團隊管理等。要點是，要明確，既有技術又有管理，讓別人知道你是個有理想的人。

個人回答：我想找一個穩定的有前途的公司，先用1-2年的時候，鞏固下技術。我如今學了不少工具，每一個工具都用得很熟，可是我對原理的東西比較模糊，都是零星的瞭解。因此將來1-2年打算把技術好好研究一下。2年後我但願能轉到管理崗位，可以作更大的更多的事情。將來幾年我也會堅持寫博客，堅持作開源插件，但願能幫助更多的人，結交更多的朋友，也但願能樹立本身的品牌，成爲某一方面的大牛。

6.業餘時間幹什麼？

這個很少問，可是最好仍是準備下。看書、參加團建都是比較好的回答。不要老說本身很宅。

7.你對996/加班怎麼看？

我以爲加班都是爲了更好的完成公司的工做，是爲了給公司帶來更好的業績。公司業績好，那麼咱們員工天然也會更好。固然了，從我的角度講，加班也是一種鍛鍊，能夠多掙點錢。因此我以爲須要加班的時候就加班，以公司的義務爲重。

個人心裏倒是草泥馬，老子纔不加班。可是不能說，以先拿offer爲準，有了offer你就有信心，再面試你就沒那麼怕了。

總結：面試官常問的問題就那麼幾個，就不要臨場發揮了，多準備下吧。

8.說下你有什麼優勢和缺點？

儘可能積極健康向上吧。

個人回答：

1.我以爲我是蠻努力的人，從初中到高中包括大學我都很努力的學習。大學時很努力的學習功課，業餘時間都是泡在圖書館裏，學習各類知識，努力瞭解這個世界。如今工做了，也常常看各類書記和教程，不斷的豐富本身，提升的本身的技能和經驗。

2.我以爲我也是個挺有想法的人，在我工做過的公司，有不少項目都是我提出來的。好比項目代碼優化，好比搞工做流，好比搞培訓，我還貢獻過開源項目。我不由有想法，還很努力的把本身的想法付諸行動。

3.最後我以爲我仍是一個挺負責的人。工做裏我願意多承擔事情，很想把全部的事情都作好。好比最近，雖然我離職了，可是上一家公司有些項目須要我修改，我還在積極的幫他們改。