【整理分享】48個前端高頻面試題（附答案解析）

本篇文章給大家總結分享48個前端高頻面試題（附答案解析），帶你梳理vue、javascript等的基礎知識，增強前端知識儲備，值得收藏，快來看看吧！

【資料圖】

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

mvvm場景：數據操作比較多的場景，需要大量使用DOM元素時，采用mvvm的開放方式，會更加便捷，讓開發者更多的經歷放在數據的變化上，解放繁瑣的DOM元素

MVVM 模型，

M 數據 從后臺獲取的商品數據

V 視圖 就是寫好的頁面，每一個div，每一個input 都是視圖

VM 視圖模型，

數據發生變化，通過視圖模型會改變視圖的顯示，視圖上的改變，也會通過視圖模型進而影響數據的變化 【相關推薦：vuejs視頻教程、web前端開發】

核心：關于VUE雙向數據綁定，其核心是 Object.defineProperty()方法。

2.vue的生命周期有哪些

beforeCreate（創建前）、created（創建后）、beforeMount(載入前)、mounted（載入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（銷毀前）、destroyed（銷毀后）

mounted 真實dom掛載完成 updated只要data數據被改變 就會自動更新觸發 destroy銷毀全局計時器和自定義事件

如果使用了keep-alive會在多兩個：activated、deactivated當組件初次加載會執行前4個生命周期，分別為： beforeCreate、created、beforeMount、mounted

3.v-if 和v-show有什么區別？

相同點:都可以控制dom元素的顯示和隱藏

不同點:v-show只是改變display屬性，dom元素并未消失，切換時不需要重新渲染頁面

v-if直接將dom元素從頁面刪除，再次切換需要重新渲染頁面

4.async await 是什么？它有哪些作用？

async await 是ES7的新增，async用于聲明一個函數，await用于等待一個異步方法執行完成。async函數返回的是一個promise對象,可以用.then方法添加回調函數，在函數執行的中，一旦遇到await就回先返回,等到這個異步操作完成之后，它再進行函數體內后面的這個語句

5、數組常用的方法？哪些方法會改變原數組，哪些不會

會改變原數組：

pop (刪除數組的最后一個元素并返回刪除的元素)

push(向數組的末尾添加一個或更多元素，并返回新的長度)

shift(刪除并返回數組的第一個元素）

unshift(向數組的開頭添加一個或更多元素，并返回新的長度)

reverse(反轉數組的元素順序)

sort(對數組的元素進行排序)

splice(用于插入、刪除或替換數組的元素)

不會改變原數組：

concat---連接兩個或更多的數組，并返回結果。

every---檢測數組元素的每個元素是否都符合條件。

some---檢測數組元素中是否有元素符合指定條件。

filter---檢測數組元素，并返回符合條件所有元素的數組。

indexOf---搜索數組中的元素，并返回它所在的位置。

join---把數組的所有元素放入一個字符串。

toString---把數組轉換為字符串，并返回結果。

lastIndexOf---返回一個指定的字符串值最后出現的位置，在一個字符串中的指定位置從后向前搜索。

map---通過指定函數處理數組的每個元素，并返回處理后的數組。

slice---選取數組的的一部分，并返回一個新數組。

valueOf---返回數組對象的原始值

6.什么是原型鏈？

每一個實例對象上有一個proto屬性，指向的構造函數的原型對象，構造函數的原型對象也是一個對象，也有proto屬性，這樣一層一層往上找的過程就形成了原型鏈。

7.什么是閉包？閉包有哪些優缺點？

8.es6有哪些新特性？

9.v-for 循環為什么一定要綁定key ?

給每個dom元素加上key作為唯一標識 ，diff算法可以正確的識別這個節點，使頁面渲染更加迅速!

10.組件中的data為什么要定義成一個函數而不是一個對象？

每個組件都是 Vue 的實例。組件共享 data 屬性，當 data 的值是同一個引用類型的值時，改變其中一個會影響其他

11.常見的盒子垂直居中的方法有哪些請舉例3種？

利用子絕父相定位方式來實現

<style>        .container{            width: 300px;            height: 300px;            position: relative;        }        .conter{            width: 100px;            height: 100px;            position: absolute;            top: 50%;            left: 50%;            margin-top: -50px;            margin-left: -50px;        }    </style>

利用Css3的transform，可以輕松的在未知元素的高寬的情況下實現元素的垂直居中。

<style>        .container{            position: relative;        }        .conter{            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }    </style>

flex

<style>        .container{         display: flex;         justify-content: center;         align-items: center;        }        .conter{                    }    </style>

12.js數據類型有哪些，區別是什么

13.什么是symbol

是es6引入新的原始數據類型Symbol，表示獨一無二的值

14.什么是同源策略

所謂同源策略就是瀏覽器的一種安全機制，來限制不同源的網站不能通信（域名、協議、端口號相同）

15.promise是什么，有什么作用

16.什么是遞歸，遞歸有哪些優缺點？

17.let和const 的區別是什么

18.vue性能優化

19..mvvm和mvc

20.路由模式：hash和history

改變url且不讓瀏覽器向服務器發請求

檢測url的變化

截獲url地址 并解析出需要的信息匹配路由規則

21.常用的塊與行屬性內標簽有哪些？有什么特征

22.== 和 ===的區別

23.嚴格模式的限制

24.git

25.tcp和udp協議

26.vuex的五種狀態

傳遞過程

頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation，mutation會修改state中對應的值。 最后通過getter把對應值跑出去，在頁面的計算屬性中，通過，mapGetter來動態獲取state中的值

27.什么是防抖和節流，js 如何處理防抖和節流

首先 防抖就是觸發下一個事件時停止掉上一個事件

節流是 觸發當前事件需要在上一個事件結束以后

通過設置節流閥(定時器)

28.什么是重繪和回流

29.Css優先級

!importent>行內> id> 類，偽類，屬性>標簽，偽元素選擇器 > 繼承和通配符

30.如何解決盒子塌陷

父盒子設置上邊距

overflow：hidden

子盒子脫標

父盒子上 padding

31.清楚浮動的方法

一共有5中方法

父盒子設置高度

overflow：hidden

偽元素

雙偽元素

在父盒子末尾添加一個空盒子，設置 clear:both

32.Split（）和 join（）的區別？

33.數組去重

1.利用雙重for循環，再利用數組方法splice方法去重（es5常用）

2.set去重:準備一個數組，數組解構newset,再準備一個函數存放數組的變量作為函數的判斷值，return Array.from(new set(arr))即可

3.數組方法indexof

4.數組方法sort Obj[a]-Obj[b]

34.什么原因會造成內存泄露

35.第一次加載頁面會觸發哪幾個鉤子函數？

beforeCreate

created 數據初始化完成，方法也調用，但是DOM未渲染

beforeMount

mounted DOM和數據掛在完成

36.Vuex 的 5 個核心屬性是什么?

state => 基本數據

getters => 從基本數據(state)派生的數據，相當于state的計算屬性

mutations => 提交更改數據的方法，同步！

actions => 像一個裝飾器，包裹mutations，使之可以異步。

modules => 模塊化Vuex

簡述vuex數據傳遞過程

頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation，mutation會修改state中對應的值。 最后通過getter把對應值跑出去，在頁面的計算屬性中，通過，mapGetter來動態獲取state中的值

37.get和post區別

相同點get請求和post請求底層都是基于TCP/IP協議實現的，使用二者中的任意一個，都可以實現客戶端和服務器端的雙向交互

最本質的區別

非本質區別

38.跨域

39.三種存儲的區別

存儲大?。?/strong>