記一次前端面試~~有興趣的戳

最近博主想換一個工做環境，因而自信滿滿的遇上了金三銀四的好時候。卻不知外面的世界早於之前不一樣了，特別是前端這一塊。

在開始以前申明一下，博主的公司一直用的技術棧是vue，期間也開發過兩個小程序，相比較而言，原生js以及jquery的項目已經好久好久沒作過了。

言歸正傳，放上此次面試題的題目：

css、html 方面：

1.css盒模型分爲哪兩種？

標準盒子模型 IE盒子模型，主要區別在於width計算。

2.選擇器的優先級排序？

內聯樣式>id選擇器>類選擇器=屬性選擇器=僞類選擇器>標籤選擇器=僞元素選擇器

3.你知道哪些H5新標籤？

header：定義文檔的頁眉 頭部

nav：定義導航連接的部分

footer：定義文檔或節的頁腳 底部

article：定義文章。

section：定義文檔中的節（section、區段）

aside：定義其所處內容以外的內容 側邊

4.display:flex;justify-content:center;align-items:center呈現的效果是什麼樣？

水平居中，垂直居中

5.什麼狀況須要清除浮動，如何清除？

有時候父容器沒有給固定高度的時候，因此給浮動的元素的祖先元素加上高度；

clear:both；（這個方法有一個很是大的,而且致命的問題,margin失效了!）

overflow:hidden

6.行內元素，塊級元素列舉幾個？

    塊元素：獨佔一行，可設置寬高（div、p、ul、ol、h1-h5）
    行內塊元素：可設置寬高，不能換行（img、iput）
    行元素：不能設置寬高，不能換行（span、i、s、u）

 

原生js方面：

1.解釋下數組中的join()以及split()

join()是把數組中的全部元素放入字符串中，再用指定的分隔符進行分隔。

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join("."))

</script>

輸出：

George.John.Thomas

split()是把字符串分隔成一個字符串數組。

它接受兩個參數：

stringObject.split(separator,howmany)

例如：

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

</script>

輸出：

How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

2.數字轉化爲字符串有哪幾種方法？

toString()；String()；" "+value

3.說一說閉包？優勢？缺點？

閉包就是可以讀取其餘函數內部變量的函數，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成‘定義在函數內部的函數’，它就是將函數內部和函數外部連接起來的一座橋樑。因爲閉包會使函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，解決方法是在退出函數以前將不使用的局部變量所有刪除。

4.說一說call,bind,apply的相同與不一樣之處？

首先他們都是用來改變 this 指向的（其實我用的最多的是箭頭函數，感受更簡潔一點）。

call 方法第一個參數是要綁定給this的值，後面傳入的是一個參數列表。當第一個參數爲 null、undefined 的時候，默認指向 window。

apply 接受兩個參數，第一個參數是要綁定給 this 的值，第二個參數是一個參數數組。當第一個參數爲 null、undefined 的時候，默認指向 window。

事實上 apply 和 call  的用法幾乎相同, 惟一的差異在於：當函數須要傳遞多個變量時, apply 能夠接受一個數組做爲參數輸入, call 則是接受一系列的單獨變量。

bind 和 call 很類似，第一個參數是 this 的指向，從第二個參數開始是接收的參數列表。區別在於 bind 方法返回值是函數以及 bind 接收的參數列表的使用。

5.你經常使用哪些ES6新特性？

我簡單的說了幾個，好比const、let聲明變量，他們與var聲明的區別。

箭頭函數，模板字符串還有解構賦值等等。

6.你瞭解原型和原型鏈嗎？

關於這方面我一年前寫過有關面向對象的內容，這裏不作解釋了。

 

vue方面：

 

1.說一說vue的生命週期？

beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()、beforeDestory()、

destroyed()

2.vue的組件通訊幾種方式？

父傳子：props

子傳父：emit

兄弟組件傳遞數據eventBus

具體實現不做解釋了

3.keep-alive幹嗎用的？

是vue的一個內置組件，可使被包含的組件保留狀態，避免從新被渲染

4.v-for循環中key的用處是什麼？

key的做用主要是爲了高效的更新虛擬DOM（有興趣的能夠看下虛擬DOM的Diff算法原理）

5.解釋下雙向綁定原理？

vue.js 則是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

1、實現一個數據監聽器Observer，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
2、實現一個指令解析器Compile，對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3、實現一個Watcher，做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖
四、mvvm入口函數，整合以上三者

6.用過vuex嗎？說一說工做流程？

vuex是對數據的集中式管理，在開發大中型項目須要不少公共數據的傳遞，咱們就能經過狀態管理來實現。

大致流程是在組建components中能夠經過vuex中解構的mapActions方法發送請求到actions進行業務邏輯處理，而後actions經過commit方法和mutations進行通信，由mutations修改state裏邊的數據狀態。要想拿到state裏邊的數據須要在組建內經過vuex中結構的mapGetters方法到getters中讀取state中的數據。