1. 程式人生 > >記一次前端面試題

記一次前端面試題

這是兩個月前去面試的面試題,回來後就整理成word文件了,現在做個筆記。

(以下答案是通過百度、看資料、問別人、加上自己的經驗整理的,僅供參考)

1.HTML新增特性有哪些?有哪些好用的功能?

語義化標籤:header、footer、section、article、aside、nav

新增功能元素:video元素,audio元素,mark元素,time元素

2.浮動元素怎樣居中,如果在浮動元素上繫結事件要考慮哪些因素?

在浮動元素的外層再套一個盒子,使用margin居中。

對於多個浮動元素,也是在浮動元素外層套個div,需要注意的是,浮動元素外層巢狀的div寬度應該設定為浮動元素的寬度之和。

需考慮浮動有沒有清除。

3.iframe有哪些缺點?

(1) 頁面除錯麻煩,出現多個滾動條;

(2) 瀏覽器的後退按鈕失效;

(3) 過多會增加伺服器的http請求;

(4) 小型的移動裝置無法完全顯示框架;

(5) 產生多個頁面,不易管理;

(6) 不容易列印;

(7) 程式碼複雜,無法被一些搜尋引擎解讀。

4.CSS3的動畫,有哪些屬性?

Transition:屬性有:transition-property

transition-duration 

transition-timing-function

transition-delay

Animation:屬性有:animation-name

  animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-play-state

animation-fill-mode

5.CSS隱藏的方式有哪些?

(1) display:none;

(2) visibility:hidden;

(3) overflow:hidden;

(4) opacity:0;

6.flex佈局的相容性怎樣處理?

7.建構函式和普通函式的區別(new的指向和作用)?

呼叫方式不同

原因:建構函式畢竟也是函式,不存在定義建構函式的特殊語法。任何函式,只要通過new操作符來呼叫,那它就可以作為建構函式,而任何函式如果不通過new操作符來呼叫,那它跟普通函式也不會有什麼兩樣

a)new 做了幾件事

1.建立一個函式

2.將建構函式的作用域賦給新的物件(因此this就指向這個新物件)

3.執行建構函式中的程式碼

4.返回新的物件

b)運算子instanceof

 如何判斷某個例項是否是根據某個建構函式建立的

c)物件的屬性 constructor

物件屬性 constructor屬性(建構函式屬性),最初是用來標示物件型別的

8.怎樣知道一個數組中的重複字串有多少個?

(這題暫時沒有找答案,先記錄下來)

9.如何在陣列的指定位置插入字串?

splice()方法向/從陣列中新增/刪除專案,然後返回被刪除的專案。(該方法會改變原始陣列)

引數:index:必需。整數,規定新增/刪除專案的位置,使用負數可從陣列結尾處規定位置。

Howmany:必需。要刪除的專案數量。如果設定為 0,則不會刪除專案。

item1, ..., itemX:可選。向陣列新增的新專案。

例:let arr = ['a','c','d','e','f'];

arr.splice(1,0,'b');

console.log(arr);//['a','b','c','d','e','f']

10.js的原型鏈?

基本思路:利用原型讓一個引用型別繼承另一個引用型別的屬性和方法。

每個建構函式都有一個原型物件,原型物件都包含一個指向建構函式的指標(constructor),而例項物件都包含一個指向原型物件的內部指標(__proto__),如果讓原型物件等於另一個型別的例項,此時的原型物件將包含一個指向另一個原型的指標(__proto__),另一個原型也包含著一個指向另一個建構函式的指標(constructor)。

11.js三大流程控制語句是什麼?

順序控制:

分支控制:單分支(if)、雙分支(if...else)、多分支(if...else if...else 、switch)

迴圈控制:for 、while 、do...while

12.怎樣實現繼承?

①原型鏈繼承:將父類的例項作為子類的原型

②構造繼承:使用父類的建構函式來增強子類例項,等於是複製父類的例項屬性給子類(沒用到原型)

③例項繼承:為父類例項新增新特性,作為子類例項返回。

④拷貝繼承:不推薦使用,效率較低,記憶體佔用高(因為要拷貝父類的屬性)

⑤組合繼承:通過呼叫父類構造,繼承父類的屬性並保留傳參的優點,然後通過將父類例項作為子類原型,實現函式複用。

⑥寄生組合繼承:通過寄生方式,砍掉父類的例項屬性,這樣,在呼叫兩次父類的構造的時候,就不會初始化兩次例項方法/屬性,避免了組合繼承的缺點。

13.“==”和“===”有什麼區別?

“==”判斷值是否相等

“===”判斷值和型別是否完全相等

14.js的資料型別有哪些?null和undefined有什麼區別?

資料型別有兩種:分為基本資料型別和引用資料型別

基本資料型別:Number、String、Boolean、Null、Undefined

引用資料型別:Object、Array、Function、Data

Null型別只有一個值,即null,null用來表示尚未存在的物件,常用來表示函式企圖返回一個不存在的物件。

Undefined型別只有一個值,即undefined,當宣告的變數還未初始化時,變數的預設值為undefined。

15.jQuery繫結事件的方式有哪些?

  Bind、        On、      live、   delegate  →均支援未來新增新元素的事件設定

     ↓                ↓             ↓            ↓   對應解綁事件

 Unbind         Off          die     undelegate

     ↓                ↓             ↓            ↓

所有版本      jQ1.7+     1.9-      1.4.2+   

     ↓           

只針對已存在的元素進行事件的設定

16.http協議?http和https有什麼區別?狀態碼有哪些?

HTTP協議是基於TCP的應用層協議,它不關心資料傳輸的細節,主要是用來規定客戶端和服務端的資料傳輸格式,最初是用來向客戶端傳輸HTML頁面的內容。預設埠是80。

HTTP的請求方式有GET和POST

HTTPS是HTTP協議的安全版本,HTTP協議的資料傳輸是明文的,是不安全的,HTTPS使用了SSL/TLS協議進行了加密處理。

  狀態碼:200 請求處理成功

  302 臨時重定向

400 請求報文中存在語法錯誤

403 請求訪問的資源被拒絕

408 客戶端請求超時

500 伺服器端在執行請求時發生了錯誤

503 伺服器暫時處於超負載或正在進行停機維護

504 閘道器超時,代理伺服器等待應用伺服器響應時的超時

17.v-if和v-show有什麼區別?

v-if: 真正的條件渲染,確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

V-show: 通過css的display:block和display:none來控制顯示隱藏,元素一直存在

18.Vue路由怎麼傳值?

① 用name傳遞引數

② 通過<router-link>標籤中的to傳參

       Vue-router利用url傳遞引數

19.Vue導航鉤子函式?

答:導航鉤子有:a/全域性鉤子和元件內獨享的鉤子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

引數:有to(去的那個路由)、from(離開的路由)、next(一定要用這個函式才能去到下一個路由,如果不用就攔截)最常用就這幾種。

20.Vue父子元件之間是如何通訊的?

答:父元件到子元件通訊:通過props傳遞資料,通過$on傳遞父元件方法

子元件到父元件通訊:通過$emit傳遞父元件資料,子元件新增refs屬性獲取。

21.Vue的生命週期?

22.從輸入網址到頁面瀏覽器發生了什麼?

23.MVVM是什麼?

一個model+view+viewModel框架,資料模型model,viewModel連線兩個

24.Vue插槽