前端面試題總結

link和@import的區別

1.link是html標簽，@import在css里是值匯入外部樣式表
2.頁面被加載時，link會被同時加載，而import會等它先加載完再加載
3.import只支持IE5以上才支持，而link是html標簽，沒有兼容問題
4.link比import權重要大
5.link支持javascript改變樣式，而import不支持

javescript原型和原型鏈

每一個函式物件里都有一個prototype屬性，被稱為顯示原型
每一個實體物件里都有一個_ _ proto _ _屬性，被稱為隱式原型
每一個prototype里都有一個constructor指向它關聯的建構式
原型鏈
獲取物件屬性時，如果物件本身沒有這個屬性，那么就會去它的原型_proto_上去找，如果沒找到，就會去它原型的原型上去找，一直找到（Object.prototype），直到找到屬性為止，Object.prototype也有原型，值為null

作用域和自由變數

作用域有：全域作用域，區域作用域，塊級作用域(ES6新增只支持let，const)
自由變數：當前作用域中沒有定義，但被使用了，就會一層一層往上級作用域去找，直到找到為止，如果到全域作用域還沒找到，就報錯
作用域鏈：自由變數向上級作用域去查找，一層一層查找，直到找到為止，最高到全域作用域，就形成了作用域鏈

this的五大呼叫場景

普通函式呼叫（this指向windows）
物件方法呼叫（this指向當前物件）
class呼叫（this指向實體物件物件）
call，aplly，bind呼叫（this指向被傳入系結的物件）
箭頭函式呼叫（this指向背景關系的this）

閉包

定義：函式嵌套函式，內部函式可以訪問外部函式時，就產生了閉包
特性：1.函式嵌套函式
2.內部函式可以訪問外部函式的變數或引數
3.不會被垃圾回識訓制回收
優點：1.變數長期駐扎在記憶體中
2.避免全域變數的污染
3.私有成員的存在
缺點：變數長期駐扎在記憶體中，增大了記憶體使用量，使用會造成記憶體泄漏
應用場景：回呼和封裝私有變數，防抖節流

宏任務和微任務

宏任務：setTimeout setInterval Ajax DOM事件
微任務：promise，async/await
微任務比宏任務執行要早

異步和單執行緒

異步和單執行緒是相輔相成的，javescript是一門單執行緒腳本語言，需要異步的輔助
異步和同步的區別:
異步不會阻塞程式的運行
同步會阻塞程式的執行
為什么會有同步和異步:
js是一門單執行緒腳本語言，js任務也是一個接一個來執行的，如果一個任務執行過久，后面的任務就只能等著它執行完畢，用戶體驗極差，所以就有了同步任務和異步任務

scr和href的區別

scr指向的是外部資源檔案，指定的內容將會嵌套到檔案中標簽所在的位置
href指的是網路資源檔案，可以將元素和檔案之間形成一個鏈接，比如超鏈接

let、var、const的區別

var存在變數提升，let，const不存在
var不存在暫時性死區，let，const存在
var允許重復宣告變數，let，const不存在
var不存在塊級作用域，let，const存在
var和let允許修改宣告的變數，const不允許

深拷貝和淺拷貝如何實作

深拷貝是層層拷貝，淺拷貝是只拷貝一層
深拷貝：深拷貝復制變數值，將非基本資料型別轉換為基本資料型別，再復制，拷貝過的物件與原來物件相互隔絕互不影響
淺拷貝：是將物件的每個屬性依次復制，物件是參考資料型別時，就不是復制而是參考，參考指向的值改變，它也會跟著變

遞回實作深拷貝

1.將要拷貝的資料obj以引數的形式進行傳參
2.宣告一個變數來存盤拷貝出來的內容
3.判斷obj是否為參考資料型別，如果不是，則直接賦值(用instanceof判斷)
4.根據判斷不同的型別，再給之前的變數賦予不同的型別
5.回圈obj中的每一項，如果里面有復雜的資料型別，則用遞回再次呼叫copy函式
6.最后return出來這個變數

設計模式

單例模式：保證一個類只有一個實體，并為它提供一個全域的訪問點
工廠模式：用工廠方法代替new操作的一種模式
觀察者訂閱模式：vue.js 則是采用資料劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時發布訊息給訂閱者，觸發相應的監聽回呼，

普通函式和箭頭函式的區別

1.箭頭函式是匿名函式，不能作為建構式來使用，不能使用new
2.箭頭函式不系結arguments，取而代之需要用從展開的擴展運算子
3.箭頭函式不系結this，則獲取背景關系的this作為自己的this來使用
4.箭頭函式通過cell()和aplly()呼叫函式時，只能傳入一個引數，對this沒有影響
5.箭頭函式沒有原型屬性

Ajax是什么？

Ajax是異步javaScript和XML的相結合
ajax并不是一種全新的技術，而是已有技術的相結合，主要用來實作客戶端和服務器之間的異步通信效果，實作頁面的區域重繪，早期瀏覽器不支持ajax，可以用隱藏幀變相實作異步通信效果，后來的瀏覽器支持了對ajax的支持
ajax原生發送請求只要是通過xmlhttpRequest(標準瀏覽器)、ActiveXobject(IE瀏覽器)實作異步通信

如何創建一個Ajax

1.創建一個XMLHtthReques物件，也就是一個異步呼叫物件
2.創建一個新的http請求，并指定該請求的方法URL及驗證資訊
3.設定回應Http請求狀態變化的函式
4.發送Http請求
5.獲取異步呼叫回傳的物件
6.使用JavaScript和DoM實作區域重繪

前端瀏覽器兼容問題

1.不同的瀏覽器marrgin和padding不同

解決方法：
1.CSS里 *{margin:0;padding:0;} 但是性能不好
2.一般我們會引入reset.css樣式重置；

2.css3的新屬性得加前綴才能兼容早期瀏覽器

-moz- 火狐瀏覽器
-webkit- / Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器
-o- Opera瀏覽器(早期)

-ms- IE *

3. 超鏈接訪問過后hover樣式就不出現的問題

解決方案：改變瀏覽器的順序

vue常用指令

v-moudel雙向資料系結
v-for回圈
v-if添加或者洗掉
v-show顯示或隱藏
v-text決議文本
v-html決議html標簽

陣列方法

push()向陣列追加元素
delete()洗掉陣列
pop()洗掉陣列最后一個元素
splice()指定洗掉
sort()排序
toString()陣列轉字串

跨域

協議、域名、埠都相同叫同域，否則就是跨域
解決跨域的方案：jsonp原理 代理 CORS
jsonp原理: 主要利用動態創建的script標簽請求后端介面地址，然后傳遞callback引數，后端接收callback，后端經過資料處理，回傳callback引數，后端接收callback，后端經過資料處理，回傳callback函式呼叫的形式，callback中的引數就是json

cookie

cookie是用來和服務器通訊的，而不是本地存盤，它只是被借用到本地存盤里
cookie優點：
1.控制保存cookie中session物件大小
2.通過MD5加密和安全傳輸，減少cookie被盜的可能性
3.只有在cookie中存放不重要的資訊，被盜也沒事
4.控制cookie生命周期，讓它不會永遠有效，讓偷盜者拿到的可能是過期的cookie
cookie缺點：
1.有長度限制，每個domain最多只能存放20條cookie，長度不能超過4kb，否則會被截掉
2.安全性差，cookie被盜，session資訊也會被盜，加密也沒用
3.有些狀態不可保存在客戶端，不起作用，例如：重復提交表單

陣列去重

1.ES6-set
2.利用map資料結構去重
3.利用遞回去重
4.forEach+indexof

vue2.0和vue3.0

更快更小更易維護，讓開發者更輕松
更精準的變更通知
3.0新加了Typescript以及PWA的支持
創建專案和啟動專案不同

for…in和for…of的區別

1.遍歷陣列的時候用for…of，遍歷物件用for…in
2.for…in遍歷的是key，for…of遍歷的是value
3.for…of是新增特性，修復了ES5中for…in的不足
4.for…of不能回圈普通的物件，需要和object.keys一起使用

ES6解構賦值

解構賦值就是提取陣列和物件中的值，對變數進行賦值，這種方法稱為解構賦值
定義和賦值必須放在一起，否則就會報錯取不到資料
它可以讓我快速的從復雜的物件中提取我們想要的值

vue常用的事件修飾符

.prevent: 提交事件不再多載頁面；
.stop: 阻止單擊事件冒泡；
.self: 當事件發生在該元素本身而不是子元素的時候會觸發；
.capture: 事件偵聽，事件發生的時候會呼叫

Vue.js中this.$nextTick()

this.$nextTick()將回呼延遲到下次 DOM 更新回圈之后執行，在修改資料之后立即使用，然后等待 DOM 更新，它跟全域方法
Vue.nextTick 一樣，不同的是回呼的 this 自動系結到呼叫它的實體上，

vue中key的作用

Key值具有唯一性，用于管理可復用的元素，key的作用主要是為了高效的更新虛擬DOM，vue總高效的渲染元素而不是從頭渲染，這個時候只需添加一個具有唯一值的 key 屬性即可，