2021年最新前端面試題目整理
最近面試的一些記錄 題目和答案陸續整理中，沒整理完的請見諒。
遇到過一些問題正常、結果樂觀的面試，也有遇到全程自閉的。最終複盤，收集問題的時候，覺得很感激一針見血的面試官，雖然過程尴尬，但得到了鞭策和自己的知識盲區，這就是最大的收獲。
本人2020年大學畢業，2020年6月至今(2021年6月)都在同一家公司工作，也就是工作經驗一年，公司一家，公司前端架構是react+mobx+antd+typescript。
以下是整理出來的全部面試題目,後面有整理部分答案：
以下是整理的答案：（部分答案會引用網絡上一些比較全面、清晰的答案，比我自己寫的靠譜一些。如有不足歡迎指出✨🎈）
1. 你是怎樣學習前端的
會根據學習路線去學習必要的技術，去看官方文檔、網上視訊教學，并結合實戰項目去學習，也會結合紅寶書之類的書籍去深入學習。
2. 盒子模型是什麼
CSS的盒子模型是指，在網頁中一個元素占有空間的大小由幾個部分構成，包括元素本身的寬高content，内邊距padding，邊框border以及外邊距margin。
目前盒模型分為兩種：W3C标準盒模型 +IE盒模型
-
第一種：W3C标準盒模型
盒子實際内容（content）的width/height=我們設定的width/height;
盒子總寬度/高度=width/height+padding+border+margin。
2021年6月前端面試題目整理（個人面試遇到的問題） -
第二種：IE盒模型（怪異盒模型）
我們設定的width=content寬度+内邊距padding+邊框border寬度（height同樣）
盒子總寬度/高度= width/height + margin = 内容區寬度/高度 + padding + border + margin
2021年6月前端面試題目整理（個人面試遇到的問題） 3. 點選按鈕改變文本框的值，用架構和用原生JS分别應該怎樣實作？
這裡主要考察對架構思想和原生的差別的了解
- 使用架構：講文本框的值綁定為一個變量，在點選按鈕時去修改對應的變量，即可修改文本框的值
- 使用原生js:通過id、類名等選擇器都可以去找到該文本框的DOM元素，通過設定該元素的innerHTML屬性或者innerText屬性去設定文本框的值。
4. 有些子產品可以相容ES6 有些隻能相容ES5 這種情況怎麼解決
type=‘module’，在script标簽裡面有type屬性指定檔案的類型 (type=‘text/script’)，這個屬性還有一個值：module和nomodule。
- module：表示當浏覽器支援ES6的時候執行的JavaScript代碼
-
nomodule：表示當浏覽器不支援ES6的時候執行的JavaScript代碼。
詳細可參考： 這裡 浏覽器支援ES6的最優解決方案
5. 把功能抽成公共元件的意義是什麼
- 降低各功能之間的耦合性，提高功能内部聚合性
- 降低代碼維護難度，在功能需要修改時隻需要修改公共元件，而不需要處處排查，都修改一次。
- 提升開發效率，一次編輯，多次使用。
-
一個元件隻專注做一件事，且把這件事做好。
6. react的傳值是怎麼進行的
- 父傳子：利用props
//在父元件中：
<Son data={"some data"}/>
//在子元件中：
this.props.data //"some data"
-
子傳父：
因為react有一個特點是單向資料流，資料隻能從祖父元件傳到父元件再傳到子元件等，是以在子元件中不能直接修改父元件的資料，此時函數傳參的方式去修改父元件的值。
通過在父元件引入的子元件中傳遞一個函數并傳參，子元件去觸發這個函數更改參數完成資料更新
//在父元件中：
changeData=(newData)=>this.setState({data:newData})//父元件的修改資料的方法,新資料通過參數傳進來
<Son changeData={(newData)=>this.changeData(newData)/>
//在子元件中：
this.props.changeData("the new data")
-
兄弟元件之間傳值：
子元件傳給父元件，由父元件再傳給另外一個子元件
7. 頻繁點選按鈕會造成異常，有什麼解決方法（節流和防抖的原理）
- 函數的節流：（時間沒到，觸發無效，時間繼續計算）如果短時間内大量觸發同一事件，那麼在函數執行一次之後，該函數在指定的時間期限内不再反複觸發，直至過了這段時間才重新生效。
-
函數的防抖：（時間沒到就被觸發，重新計算時間）在規定的時間内隻觸發一次，如果多次觸發，清除上次觸發的事件，重新計算時間。
詳細可參考：這裡
8.同一個程式要相容不同尺寸的螢幕，比如包括移動端，應該怎麼處理
借助于媒體查詢：
詳細可參考：這裡
9. 介紹一下mobx狀态管理的原理，action是什麼
Mobx/MobxReact 中有三個核心概念，observable、observer、action
- observable: 通過 observable(state) 定義元件的狀态，包裝後的狀态是一個可觀察資料（Observable Data）。
- observer: 通過 observer(ReactComponent) 定義元件。
-
action: 通過 action 來修改狀态。
詳細可參考：這裡
10. store裡面存的資料變化了，元件是怎樣知道他要去重新渲染資料的，他是怎麼樣通知到這個元件的
- 目前元件的State中的屬性改變時且目前元件的shouldcomponentupdate傳回true，那麼目前元件會rerender
- 元件的props中的任一屬性的值有變化(即使這個任一屬性的值是對象，變化的僅僅是該對象中的某屬性的值，此刻也算props發生了變化)且目前元件的shouldcomponentupdate return true時且當期元件所有父級以上元件的shouldcomponentupdate return true，目前元件才會re-render
- 目前元件的shouldcomponentupdate即使傳回false，目前元件裡子元件若滿足1中的條件，這個子元件依然會重新渲染
-
你一般怎麼樣去跟背景的接口互動？是以他這個就是你前端的module都是背景給你打提供的對吧
這裡我回答的是，後端會給restful接口，并注明參數以及參數的格式等，前端按需求傳參和請求，拿到後端資料後去處理，然後渲染進頁面，過程中如果有問題會再與後端溝通。但是感覺不是面試官想要的答案，可能我對問題的了解有誤，是以面試官又問了 “是以他這個就是你前端的module都是背景給你打提供的對吧”。
-
怎麼做異常處理
回答的try catch等，面試官不是很滿意。詳細可參考： 這裡
-
ajax的攔截器你知道嗎
一般用于登入驗證，當不在登入狀态時，攔截使用者對各個頁面的通路，防止使用者跳過登入頁面通路其他頁面。
var token = localStorage.getItem("token");
$.ajaxSetup({
dataType: "json",
cache: false,
headers: {
"token": token
},
xhrFields: {
withCredentials: true
},
complete: function(xhr) {
//token過期，則跳轉到登入頁面
if(xhr.responseJSON.code == 401){
parent.location.href = baseURL + 'login.html';
}
}
});
-
Ajax axios同步還是異步
關于ajax和axios：
ajax：原生JS可以借助XMLHttpRequest對象封裝異步請求，jquery已經幫我們做了封裝，名字就叫ajax，是以平時說的ajax異步請求就指的是jquery的ajax。
axios：axios也是對XMLHttpRequest的封裝，axios是通過 promise 實作對 ajax 技術的一種封裝，就像 ajax 是 通過 jQuery 來封裝一樣。但它更符合ES規範，推薦使用axios，因為它體積小，使用ajax必須引入整個jquery.js，而axios隻需要引入axios.js。
引自：這裡
同步還是異步？
AJAX中根據async的值不同分為同步（async = false）和異步（async = true） 預設：true，異步
$.ajax({
type: "post",
url: "path",
cache:false,
async:false, //預設true 異步
dataType: ($.browser.msie) ? "text" : "xml",
success: function(xmlobj){
function1(){};
}
});
function2(){};
axios同步異步差別在于是否使用了“async ” 及“await ”關鍵詞：
//同步
async getfiles() {
var result={};
var param = new URLSearchParams()
param.append('id', $("#type").val())
var url = "/backstage/fileupload/getFileName.action";
await axios.post(url, param).then(function (res) {
if (res.status == 200) {
result=res.data.data;
} else {
alert("擷取失敗！");
}
});
this.filenames=result
}
//異步
getfiles() {
var result={};
var param = new URLSearchParams()
param.append('id', $("#type").val())
var url = "/backstage/fileupload/getFileName.action";
axios.post(url, param).then(function (res) {
if (res.status == 200) {
result=res.data.data;
} else {
alert("擷取失敗！");
}
});
this.filenames=result
}
摘自： 這裡
延伸：什麼是同步，什麼是異步？
同步請求即是目前送出請求後，浏覽器什麼都不能做，必須得等到請求完成傳回資料之後，才會執行後續的代碼。相當于排隊。
異步請求就當送出請求的同時，浏覽器可以繼續做任何事，Ajax發送請求并不會影響頁面的加載與使用者的操作，相當于是在兩條線上，各走各的，互不影響。
摘自：這裡
15. setstate之後做了哪些處理
React在setState之後，會經對state進行diff，判斷是否有改變，然後去diff dom決定是否要更新UI。在短時間内頻繁setState。React會将state的改變壓入棧中，在合适的時機，批量更新state和視圖，達到提高性能的效果。
詳細可參考：這裡
-
連續将一個變量的值setState1 setState2 setState3的結果 ？如果在外面各自加一個settimeout的結果又是怎樣的？
連續兩次setState會渲染1次，React 可以将多個setState() 調用合并成一個調用來提高性能。
例子可參考：這裡
加setTimeout之後，因為setTimeout是同步的，帶動state立即更新，可以執行多次。是以我們通常使用setTimeout來簡單解決react中setState不及時生效的問題。
-
Ts的泛型 大寫的T是什麼
泛型，簡單來說就是類型變量。在ts中存在類型，類型如number、string、boolean等，泛型就是使用一個類型變量來表示一種類型，類型值通常是在使用的時候才會設定。泛型的使用場景非常多，可以在函數、類甚至interface中使用。
詳細可參考：這裡
- TS怎麼繼承 es6怎麼繼承 原生怎麼繼承 說一下原型鍊的繼承
-
TS繼承
1：通過 extends 來繼承父類
2：調用父類使用super，子類繼承父類的屬性和方法，并且子類可以改寫父類的屬性和方法
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
run(): string {
return `${this.name}在運動`
}
}
//Me類來繼承Person類
class Me extends Person {
constructor(name: string) {
super(name);//初始化父類的構造函數
}
}
let m = new Me("doudouzi");
console.log(m.run());//doudouzi在運動
- es6怎麼繼承
未完待續，下面的可以參考問題先自己尋找答案哦：
- Let const差別 和var的差別 一個class裡面可不可以let兩個同名變量
- 怎麼了解閉包
- 數組對象有哪些原生的方法 map方法的作用
- 塊級元素和内聯元素 怎麼給内聯元素設定寬度
- flex這個屬性怎麼使盒子居中 flex:1和flex:2差別
- webpack這邊儲存 那邊浏覽器就可以更新是怎麼做到的
- loader是什麼作用 babel-loader作用
- 微信的網頁版為什麼能夠及時的、實時地收到微信資訊（而不用重新整理頁面）
- 浏覽器的同源政策是什麼 跨域的方案 介紹一下cors cors設定的是哪個屬性 這個頭是你請求發出去的，還是伺服器設定的
- 浏覽器自帶的什麼屬性能檢查前端的性能
- 畫一個圓有幾種方法 不用css怎麼做
- Css3新特性有哪些 在項目中用到過哪些
- 原生的ajax怎麼寫
- 閉包是什麼 有哪些使用場景 具體怎麼寫的叙述一下
- HTTP請求有哪幾種方式 get post patch有啥差別（注意patch和post的差別）
- react的工作原理大概是什麼 詳細講一下虛拟DOM
二 、圍繞項目類：
- 從你的項目經驗裡面找一段比較好，參與度高的項目介紹一下
- 項目有哪些子產品 你做過哪些子產品，詳細介紹一下項目中的XX功能
- 項目中遇到什麼問題，是怎麼解決的