牛客前端面試高頻八股總結（1）（附文檔）

1.html語義化

要求使用具有語義的標簽：header footer article?aside section nav??

三點好處：

（1）提高代碼可讀性，頁面內容結構化，更清晰

（2）無css時，時頁面呈現出良好的結構

（3）利于seo搜索，爬蟲爬取有效信息

2.盒模型

邊距邊框填充實際內容 margin border padding content

W3c標準盒模型：默認，實際寬高包括padding和border ?box-sizing:content-box

ie怪異盒模型：實際寬高不包括padding border box-sizing:border-box

3.浮動

作用：常用于文字圍繞圖片

特點：脫離文檔流，造成塌陷，影響其他元素排列

父元素高度塌陷解決：

父元素添加高度；
父元素overflow:hidden;
父元素添加after偽類；
.container::after{content: "";display: block;clear: both;}
在浮動子元素末尾創建一個空白div，添加clear:both;
.test{clear: both;}</style>
</head>
<body><div class="container"><div class="item"></div><div class="test"></div></div>
none，默認值，不清除浮動

left，清除左側浮動元素對當前元素的影響

right，清除右側浮動元素對當前元素的影響

both，清除兩側浮動元素對當前元素的影響，清除對他影響最大的那個元素的浮動

4.樣式優先級

!important>行內樣式>id選擇器>類選擇器>標簽選擇器（范圍約小優先級越高）>通配符（*）

5.css尺寸設置的單位

Px絕對像素

Rem相對于根元素像素

Em相對于父元素

Vw/vh視口寬高

6.BFC

塊級格式上下文。是一個獨立的容器，內部元素和外部元素互不影響

條件：【什么情況下可以讓元素產生BFC】

1、浮動元素：float屬性不為none

2、絕對定位元素：position為absolute或fixed

3、display為inline-block、table-cell、table-caption、flex、inline-flex

4、overflow不為visible

【BFC元素具有的特性】

0、是一個獨立的容器，內部元素和外部元素互不影響

1、在BFC中，盒子從頂部開始垂直地一個接一個排列

2、盒子垂直方向的距離由margin決定。同一個BFC的兩個相鄰盒子margin會重疊,并且取最大外邊距。

3、BFC中，margin-left會觸碰到border-left（對于從左至右的方式，反之）

4、BFC區域不會與浮動的盒子產生交集，而是緊貼邊緣浮動

5、計算BFC高度時，自然會檢測浮動的盒子高度

BFC應用場景

（1）父級元素沒有高度時，子元素浮動導致父級元素高度塌陷問題。給父級元素添加overflow:hidden

（2）子元素外邊距重疊導致父元素塌陷。添加overflow:hidden.（或者把子元素margin改成padding）

7.未知寬高元素水平垂直居中方法

（1）flex布局

父盒子開啟flex彈性布局，設置justify-content: center;align-items: center;

    <style>.container{display: flex;justify-content: center;align-items: center;width: 100%;height: 300px;background-color: yellow;}.item{width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="container"><div class="item"></div></div>
</body>

（2）絕對定位+位移+transform

子絕父相。子向右下移動父元素的一半，再利用transform.

top: 50%;left: 50%;? transform: translate(-50%,-50%);

transform: translate(-50%, -50%);:

translate?函數用于移動元素。負值表示向左（對于X軸）和向上（對于Y軸）移動。
translate(-50%, -50%)?將元素向左移動其自身寬度的50%，并向上移動其自身高度的50%。
由于元素已經通過?top?和?left?屬性定位到了其父元素的中心線（水平和垂直），這個?transform?調用實際上是將元素的中心移動到這些中心線上，從而實現了真正的水平垂直居中。

.container{position: relative;width: 100%;height: 500px;background-color: yellow;}.item{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100px;height: 100px;background-color: green;}

?（3）絕對定位+margin

子絕父相。設置子的top left bottom right都相等，margin設置為auto

.container{position: relative;width: 500px;height: 500px;background-color: yellow;}.item{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;background-color: green;}

?（4）text-align

父盒子設置行高等于高，textaligncenter.

子盒子開啟display:inline-block,設置vertical-align:middle.

        .container{line-height: 500px;text-align: center;width: 500px;height: 500px;background-color: yellow;}.item{display: inline-block;vertical-align: middle;width: 100px;height: 100px;background-color: green;}

8.三欄布局

1.Flex布局：

左中右排列順序。

父盒子dispaly:flex，左右設置固定大小寬高，中間盒子flex1。

flex: 1;?相當于以下三個屬性的組合：

flex-grow: 1;?表示該彈性項會擴展以占用額外的空間（如果有的話）。所有設置了?flex-grow?的彈性項會按照它們的?flex-grow?值來分配容器中的額外空間。
flex-shrink: 1;?表示該彈性項會縮小以適應容器。不過，在你給出的情境中，因為左右兩邊已經設置了固定的寬高，所以中間的彈性項通常不會因為?flex-shrink?而縮小，除非容器的寬度小于左右兩邊寬度之和加上中間彈性項的最小內容寬度。
flex-basis: 0%;?或?flex-basis: auto;（取決于瀏覽器默認設置）。flex-basis?定義了彈性項在主軸（默認是水平方向）上的初始大小。但在?flex: 1;?的情況下，flex-basis?的具體值可能不會影響最終的布局，因為?flex-grow?會擴展彈性項以占用剩余空間。

<style>.container{display: flex;
/* justify-content: space-between; */}.left{width: 200px;height: 200px;background-color: yellow;}.middle{flex: 1;/*  height: 200px;*/background-color: green;}.right{width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
</body>

2.float浮動：

排列順序：左右中。

左右設置固定大小和左右浮動，中間自適應overflow:hidden。（或者中間設置對應方向的margin值）

<style>.left{float: left;width: 200px;height: 200px;background-color: yellow;}.center{overflow: hidden;height: 200px;background-color: green;}.right{float: right;width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="left"></div><div class="right"></div><div class="center"></div></div>

3.圣杯

中左右排列順序。全部左浮動。左右盒子設置寬高，中間盒子設置寬度100%，父盒子設置左右內邊距。左盒子設置?margin-left: -100%;?position: relative;?left: -300px; 右盒子設置margin-left: -200px;?position: relative;?right: -200px;

首先給這三個div都給一個float: left，讓它們均左浮動。

設置左盒子的margin-left: -100%，把左盒子拉上來，調整左盒子的浮動位置到中間盒子的左側。再設置右盒子的margin-left: - 右盒子寬度px，把右盒子拉上來，調整右盒子的浮動位置到中間盒子的右側。

此時的布局基本出來了，但是中間盒子的左右兩側會被左右兩個盒子覆蓋掉，此時我們要通過相對定位來避免覆蓋。給左右盒子position: relative，再分別設置它們的left和right,并且控制父元素的padding來為左右兩邊留白。

    <style>*{margin: 0;padding: 0;}.container{padding-left: 300px;padding-right: 200px;height: 200px;}.middle{float: left;width: 100%;height: 200px;background-color: green;}.left{float: left;width: 300px;height: 200px;background-color: yellow;/* 左移 */margin-left: -100%;position: relative;left: -300px;}.right{float: left;width: 200px;height: 200px;background-color: blue;margin-left: -200px;position: relative;right: -200px;}</style>
</head>
<body><div class="container"><div class="middle"></div><div class="left"></div><div class="right"></div></div>

4.雙飛翼

首先給這三個div都給一個float: left，讓它們均左浮動。

設置左盒子的margin-left: -100%，把左盒子拉上來，調整左盒子的浮動位置到中間盒子的左側。再設置右盒子的margin-left: - 右盒子寬度px，把右盒子拉上來，調整右盒子的浮動位置到中間盒子的右側。

此時，在雙飛翼布局中，避免左右盒子被覆蓋是通過設置inner-middle的左右margin來實現的。

    <style>*{margin: 0;padding: 0;}.middle{float: left;width: 100%;height: 200px;background-color: green;}.inner-middle{margin-left: 300px;margin-right: 200px;}.left{float: left;width: 300px;height: 200px;background-color: yellow;/* 左移 */margin-left: -100%;}.right{float: left;width: 200px;height: 200px;background-color: blue;margin-left: -200px;}</style>
</head>
<body><div class="container"><div class="middle"><div class="inner-middle"></div></div><div class="left"></div><div class="right"></div></div>
</body>

?5.圣杯布局對比雙飛翼布局

雙飛翼布局好處

（1）主要的內容先加載的優化。

（2）兼容目前所有的主流瀏覽器，包括IE6在內。

（3）實現不同的布局方式，可以通過調整相關CSS屬性即可實現。

對比

（1）都是左右欄定寬，中間欄自適應的三欄布局，中間欄都放到文檔流前面，保證先行渲染。

（2）解決方案基本相似：都是三欄全部設置左浮動float：left,然后分別解決中間欄內容被覆蓋的問題。

（3）解決中間欄內容被覆蓋問題時，圣杯布局設置父元素的padding,雙飛翼布局在中間欄嵌套一個div,內容放到新的div中，并設置margin，實際上，雙飛翼布局就是圣杯布局的改進方案。

?5.絕對定位布局 position+margin

排列順序：左右中

子絕父相。左右兩欄設置絕對定位，設置右欄的位置top right。中間設置對應方向的marginleft right值。

    <style>*{margin: 0;padding: 0;}.container{position: relative;}.left{position: absolute;width: 300px;height: 200px;background-color: yellow;}.right{position: absolute;top: 0;right: 0;width: 200px;height: 200px;background-color: blue;}.middle{height: 200px;margin-left: 300px;margin-right: 200px;background-color: green;}</style>
</head>
<body><div class="container"><div class="left"></div><div class="right"></div><div class="middle"></div></div>
</body>

?6.Grid網格布局

.container{
? ? ? ? ? ? display: grid;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? /* 行高 */
? ? ? ? ? ? grid-template-rows: 100px;
? ? ? ? ? ? /* 列屬性 */
? ? ? ? ? ? grid-template-columns: 300px auto 200px;
? ? ? ? }

    <style>*{margin: 0;padding: 0;}.container{display: grid;width: 100%;/* 行高 */grid-template-rows: 100px;/* 列屬性 */grid-template-columns: 300px auto 200px;}.left{background-color: yellow;}.middle{background-color: green;}.right{background-color: blue;}</style>
</head>
<body><div class="container"><div class="left"></div><div class="middle"></div><div class="right"></div></div>
</body>

9.js數據類型

基本數據：number string boolenl undefined null（es6） bigint symbol存儲方式：值存儲棧，占用空間小。頻繁使用

引用：object （普通對象、數組、函數，日期）堆大

10.null undefined

Null 是定義并賦值空，值未設置； undefined是未定義

11.js判斷變量

Typeof （常用于判斷基本數據類型，引用：function,object）?根據底層數據存儲的二進制前三位判斷

Instanceof （主要用于區分引用數據類型，檢測過程比較繁瑣）驗證當前類的原型prototype是否會出現在實例的原型鏈上，只要在原型鏈上結果true.

Object.prototype.toString.call() 通用??Object.prototype.toString.表示一個對象返回類型的字符串，call方法可以改變this的指向，把Object.prototype.toString（）方法指向不同的數據類型，返回不同的結果。

Constructor (（引用數據類型）根據構造器判斷

12.數組去重

數組去重的方法（十種方法）-CSDN博客

1、for循環+indexof，返回不為1的push到空數組中；

2、filter+indexof，返回為true的項組成的新數組 ;

3、es6新增數據結構set，set不允許出現重復的元素，array.from方法。

const newArr = Array.from(new Set(arr))
console.log(newArr)

13.偽數組和數組

偽數組（1）類型object? （2）可以用index獲取某個元素，使用length屬性查看長度，不能使用其他的數組方法。（3）不能改變長度（4）遍歷使用for in

數組（1）類型array

偽數組轉為真數組：

14.map foreach

Map 分配內存空間創建并存儲和返回一個新的數組不會改變原數組，快

Foreach? 默認沒有返回值（返回結果undefined）

15.Es6箭頭函數

（1）?沒有this this從外部獲取繼承外部執行上下文的this

（2）不能作為構造函數，不能使用new關鍵字

（3）沒有prototype原型屬性

（4）沒有arguments內置對象

16.事件擴展符（...）

應用場景

JS篇面試題16-Es6中的事件擴展符在什么場景下使用-CSDN博客

數組克隆（淺拷貝） let b = [...a]

數組合并 let c = [...a,...b]

類數組轉換為真正的數組

數組去重...new Set(arr）

17.閉包

閉包：什么是閉包，閉包的用途及優缺點-CSDN博客

函數的內部函數能夠訪問到外部函數變量內部函數=閉包

原理：作用域鏈當前函數能訪問到上級函數作用域的變量

作用；保存變量（讓變量始終保存在內存當中，不會隨著函數的結束自動銷毀）防止全局污染節流防抖

影響：內存泄漏

閉包的特性：閉包函數被return到了外部，在函數執行結束后沒有被銷毀，所以在函數外部也能訪問函數內部的局部變量；由于垃圾回收器不會將閉包中的變量銷毀，于是就造成了內存泄漏，內存泄漏多了容易導致內存溢出； 4.閉包的應用：實現柯里化、防抖節流；

18.js變量提升 var ?let const

變量提升是指 js的變量和函數聲明會在代碼編譯時提升到代碼最前面

var聲明的變量存在聲明提升（變量提升時只有聲明被提升，賦值不會）?

函數聲明提升比變量提升優先。

Let const聲明的變量不會提升? 聲明的變量必須先聲明才能使用? 暫時性死區：在該作用域中無法在變量聲明之前去使用

19.this指向（普通函數箭頭函數）

普通函數this指向（1）一函數調用this，指向window （2）以方法形式調用，指向定義處，（誰調用指向誰）。

箭頭函數this，繼承函數所在執行上下文中的ths

20.Call apply bind

三者的作用都是改變this指向。

call apply 會直接執行函數。第一個參數都是this的新指向。

call和bind 的第二個參數是參數列表，但是apply是一個數組。

bind不會直接執行函數，只能改變一次函數的指向。

21.js繼承的方法優缺點

JavaScript繼承的多種方式及優缺點_js繼承方式及其優缺點-CSDN博客

（1）原型鏈繼承??

優點：實現簡單，一行代碼
缺點：數據共享了，c1和c2共享了同一個原型對象

（2）借用構造函數繼承

優點：
- 避免了引用類型的屬性被所有的實例共享；
- 可以在?Children?中向?Person?傳參
缺點：
- 方法都在構造函數中定義，每次創建實例都會創建一遍方法；
- 不能繼承?Person?原型上的方法/屬性

（3）組合繼承

融合原型鏈繼承和構造函數的優點，是?JavaScript?中最常用的繼承模式

（4）寄生式繼承

（5）class繼承

通過?class?關鍵字聲明類
子類通過?extends?關鍵字繼承父類

22.new 會發生什么

分配內存空間，創建一個新對象

為新創建的對象添加屬性，將新對象的原型proto指向父級構造函數的原型對象prototype

讓函數的this指向新對象

判斷有無返回對象，如果沒有那么會自動返回這個新對象。

23.defer和async區別

將html解析變為異步

Defer ?js加載完之后不會立即執行等到html也解析完之后才會執行

Async ?js加載完之后立即執行而且阻塞html解析

24.promise? 使用方法

是一個構造函數，異步編程的一種解決方案解決地獄回調（異步多層嵌套回調）

有三種狀態： resolved 成功 rejected 失敗 pending執行中

new Promise((resolve,rejected)=>{}).then(res=>{}).catch(err=>{});

可以用then查看成功信息 catch捕捉錯誤信息，可以鏈式調用

24.js實現異步

詳解JS的四種異步解決方案！_js 異步-CSDN博客

（1）回調函數（會出現回調地獄問題）

（2）Generator

「generator」是ES6提出的一種異步編程的方案。因為手動創建一個iterator十分麻煩，因此ES6推出了「generator」，用于更方便的創建iterator。

????????也就是說，「generator」就是一個返回值為iterator對象的函數。

function* createIterator() {yield 1;yield 2;yield 3;
}
// generators可以像正常函數一樣被調用，不同的是會返回一個 iterator
let iterator = createIterator();
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

（3）promise

const promise = new Promise((resolve, reject) => {resolve('a');
});
promise.then((arg) => { console.log(`執行resolve,參數是${arg}`) }).catch((arg) => { console.log(`執行reject,參數是${arg}`) }).finally(() => { console.log('結束promise') });

如果我們需要嵌套執行異步代碼，相比于回調函數來說，「Promise」的執行方式如下列代碼所示：

 var promise = new Promise((reslove, reject) => {setTimeout(() => {console.log('執行大量代碼');}, 2000);//resolve('我成功了'); //resolve 之后變成了 成功狀態 fulfilled// reject('我失敗了'); //reject 之后promise狀態變為 失敗狀態});//promise 的then()  在成功狀態的時候被觸發  resolve(res)  res可以傳遞參數//promise 的catch()  在失敗狀態的時候被吃法 reject(err)  err可以傳遞參數promise.then((res) => {console.log(res);}).catch((err) => {console.log(err);})

?即通過then來實現多級嵌套(「鏈式調用」)

（4）Async/await

「async/await」是ES7提出的關于異步的終極解決方案。使得我們可以通過同步代碼來達到異步的效果」。

async function callAll(){const count = await counter(1);const sum = await adder(count, 3);console.log(await delay(sum));
}
callAll();// 5

25.cookie sessionstorage localstorage

都是瀏覽器存儲，都存儲在瀏覽器本地，都遵循同源原則

Cookie 生命周期是由服務器端在寫入時就設置好的存儲空間小存儲登錄驗證信息

localstorage寫入時就存在需要手動清除存儲不一變動信息

sessionstorage頁面關閉時自動清除檢測用戶是否刷新進入頁面

前端給后端發送請求時會自動攜帶cookie的數據

26.如何實現可過期的localstorage數據

惰性刪除（用到再刪）和定時刪除（）

惰性刪除存儲的數據類型是個對象，該對象有兩個key，一個是要存儲的value值，另一個是當前時間。獲取數據的時候，拿到存儲的時間和當前時間做對比，如果超過過期時間就清除Cookie。定時刪除：沒敢喝一段時間刪除一次。token存儲在LocalStorage中，要清空

27.token能放在cookie中嗎

1.實現上是可以的，功能上不推薦，容易產生csrf問題

2.`token`可以存放在`Cookie`中，`token` 是否過期，應該由后端來判斷，不該前端來判斷，所以`token`存儲在`cookie`中只要不設置`cookie`的過期時間就ok了，如果 `token` 失效，就讓后端在接口中返回固定的狀態表示`token` 失效，需要重新登錄，再重新登錄的時候，重新設置 `cookie` 中的 `token` 就行

（1）token的認證流程

? ? ? ? 1. 客戶端使用用戶名跟密碼請求登錄

? ? ? ? 2. 服務端收到請求，去驗證用戶名與密碼

? ? ? ? 3. 驗證成功后，服務端簽發一個 token ，并把它發送給客戶端

? ? ? ? 4. 客戶端接收 token 以后會把它存儲起來，比如放在 cookie 里或者 localStorage 里

? ? ? ? 5. 客戶端每次發送請求時都需要帶著服務端簽發的 token（把 token 放到 HTTP 的 Header 里）

? ? ? ? 6. 服務端收到請求后，需要驗證請求里帶有的 token ，如驗證成功則返回對應的數據

28.axios攔截器原理應用

基于promise的http庫，分為請求響應。

攔截器原理：創建一個chn數組，數組中保存了攔截器相應的方法及dispatchRequest（dispatchRequest這個函數調用才會真正的開始下發請求），把攔截器的方法放到chn數組中dispatchRequest的前面，把響應攔截器的方法放到chn數組中dispatchRequest的后面，把請求攔截器和響應攔截器forEach將他們分unshift，push到chn數組中，為了保證他們的執行順序，需要使用promise，以出列的方式對chn數組中的方法挨個執行。