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

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

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

言歸正傳,放上此次面試題的題目:html

css、html 方面:前端

1.css盒模型分爲哪兩種?vue

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

2.選擇器的優先級排序?jquery

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

3.你知道哪些H5新標籤?算法

header:定義文檔的頁眉 頭部vuex

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()來劫持各個屬性的settergetter,在數據變更時發佈消息給訂閱者,觸發相應的監聽回調。

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中的數據。

相關文章
相關標籤/搜索