看看這些前端面試題，帶你搞定高頻知識點（六）

每天10道題，100天后，搞定所有前端面試的高頻知識點，加油！！！，在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什麼？想過之後再與答案比對，是不是會更好一點，當然如果你有比我更好的答案，歡迎評論區留言，一起探討技術之美。

面試官：請你簡述 var、let、const 三者之間的區別？

我：呃~，好的，三者的作用區別總結如下：

var：最常用的變數；允許重複宣告，但會導致資料被覆蓋；會產生變數提升；區域性變數掛載到全域性物件上，會造成全域性物件的汙染。

console.log(a) // 因變數提升, var a;提到前面但是沒有賦值，所以值為undefined
var a = 1
var a = '你好' // var宣告的變數會被重新賦值
console.log(a) // a會列印被重新賦值的值
console.log(window.a) // var宣告的區域性變數會被掛載到全域性變數上，造成全域性變數的汙染。
登入後複製

let：es6新增命令，用法類似var；不允許重複宣告；不存在變數提升；常作用於塊級作用域而避免區域性變數造成全域性變數的汙染。

let a=10;
console.log(a) // 不存在變數提升，所以值為：10
console.log(window.a) // 不會造成全域性汙染，所以值為 undefined
for(let i =0;i<3;i++){ // 會生成塊級作用域，i 的值只能在塊級作用域中使用
    console.log(i)
}
console.log(i) // 因為拿不到塊級作用域中的值，所以報錯。
登入後複製

const：es6新增命令，用於宣告常數且值無法被修改；宣告常數必須立刻初始化，否則後期賦值報錯；不能重複宣告；const指向變數的地址, 只要變數名所參照的地址不變就不會報錯

const arr = ['小張','小王','小李','小趙']
arr[0]='小明'
console.log(arr) // ['小明', '小王', '小李', '小趙']
const arr = [] // 報錯
登入後複製

面試官：請你談談對深拷貝與淺拷貝的理解

我：呃~，好的，對兩者的理解總結如下：

深拷貝：新資料與原資料互不打擾。

// 擴充套件運運算元在一維陣列中是屬於深拷貝，在多維陣列中屬於淺拷貝
let arr = [1,2,3]
let newArr = [...arr]
newArr.push(4)
console.log(arr,newArr) // [1, 2, 3],[1, 2, 3, 4]

// 深拷貝用法
let list = [
    {id:1,name:'張三',age:18},
    {id:2,name:'李四',age:28},
    {id:3,name:'王五',age:38},
]
let newList = JSON.parse(JSON.stringify(list))
newList.pop()
console.log(list.length,newList.length) // 3 2
登入後複製

當然，深拷貝也有一種標準寫法，如下：

// 標準的深拷貝 => 參照資料型別(陣列,物件)
function deepClone(source){
    const targetObj = source.constructor === Array ? [] : {}
    for(let keys in source){
        if(source.hasOwnProperty(keys)){
            // 參照資料型別
            if(source[keys] && typeof source[keys] === 'object'){
                targetObj[keys] = source[keys].constructor === Array ? [] : {}
                // 遞迴
                targetObj[keys] = deepClone(source[keys])
            }else{
                // 基本資料型別,直接賦值
                targetObj[keys] = source[keys]
            }
        }
    }
    return targetObj
}

let obj = {
    name:'張三',
    age:18,
    hobby:['抽菸','喝酒','燙頭'],
    action:{
        am:'敲程式碼',
        pm:'睡覺'
    }
}
let newObj = deepClone(obj)
newObj.name = '李四'
console.log(obj.name,newObj.name)// 張三 李四
登入後複製

淺拷貝：新資料會影響原資料。

let arr = [1,2,3]
let newArr = arr
// 對新資料做出改變，原資料也會發生改變，這種就叫做淺拷貝
newArr.push(4) // [1, 2, 3, 4]
console.log(arr,newArr) // [1, 2, 3, 4]
登入後複製

說白了，深拷貝是重新獲得一個新的資料，且和原來的資料沒有任何關係；淺拷貝雖然能得到一個新的資料，但是和原來的資料仍有一定的聯絡。

面試官：輸入URL的那一瞬間瀏覽器做了什麼？

我：呃~，URL是由以下幾部分組成：

https: 傳輸協定（http和tcp之間加了一層 TSL 或者 SSL 的安全層）

www：伺服器

baidu.com：域名

DNS域名系統會匹配真實的IP，第一次存取正常，第二次存取會將域名解析的IP存在本地用來讀取瀏覽器快取。

輸入URL的那一刻經歷了：域名 -> DNS域名系統 -> 拿到真實IP -> 建立連線(TCP的三次握手) -> 拿資料，渲染頁面 -> 四次揮手

具體實現過程：

1. url解析：判斷是搜尋內容還是請求URL
2. 查詢本地快取：如果有快取直接返回給頁面，沒有快取則進入網路請求階段
3. DNS解析
4. 通過三次握手建立TCP連線
5. 合成請求頭資訊，傳送http請求
6. 處理響應資訊
7. 通過四次揮手斷開TCP連線
8. 如果響應狀態碼301，則重定向
9. 瀏覽器進行頁面渲染：1）解析html，生成DOM樹；2）根據css計算節點樣式，生成stylesheet；3）生成佈局樹；4）為特定的元素生成獨立圖層

面試官：說一說cookie sessionStorage localStorage 區別？

我：呃~，好的，他們之間的關係如下：

相同點：

都是瀏覽器儲存，都儲存在瀏覽器本地。

區別：

1.cookie由伺服器或前端寫入， sessionStorage以及localStorage都是由前端寫入
2.cookie的生命週期由伺服器端寫入時就設定好的，localStorage是寫入就一直存在，除非手動清除，sessionStorage是由頁面關閉時自動清除
3.cookie儲存空間大小約4kb， sessionStorage及localStorage空間比較大，大約5M
4.3者的資料共用都遵循同源原則，sessionStorage還限制必須是同一個頁面
5.前端給後端傳送請求時，自動攜帶cookie, session 及 local都不攜帶
6.cookie一般儲存登入驗證資訊或者token，localStorage常用於儲存不易變動的資料，減輕伺服器壓力，sessionStorage可以用來監測使用者是否是重新整理進入頁面，如音樂播放器恢復進度條功能

面試官：說一說JS資料型別有哪些,區別是什麼？

我：呃~，JS資料型別分為兩類：一類是基本資料型別，另一類是參照資料型別，如下：

基本型別：string、number、boolean、null、undefined、symbol、bigInt
參照型別： object、array

基本型別儲存在棧中，空間小，操作頻繁

參照型別儲存在堆中，空間大，在棧中儲存了指標，指向在堆中的起始地址

注意：Symbol具有唯一性，不可列舉使用getOwnPropertySymbols獲取

面試官：說一說你對閉包的理解？

我：呃~，內層函數參照外層函數中變數，這些變數的集合就是閉包。

形成的原理：作用域鏈，當前作用域可以存取上級作用域中的變數。
解決的問題：能夠讓函數作用域中的變數在函數執行結束之後不被銷燬，同時也能在函數外部可以存取函數內部的區域性變數。
帶來的問題：由於垃圾回收器不會將閉包中變數銷燬，於是就造成了記憶體洩露，記憶體洩露積累多了就容易導致記憶體溢位。
閉包的應用，能夠模仿塊級作用域，能夠實現柯里化，在建構函式中定義特權方法、Vue中資料響應式Observer中使用閉包等。

面試官：說一說JavaScript有幾種方法判斷變數的型別？

我：呃~，好的，總結如下：

1. typeof（根據二進位制判斷），不能判斷資料型別：null和object

2. intanceof(根據原型鏈判斷)，原生資料型別不能判斷

3. constructor.name(根據構造器判斷)，不能判斷null資料型別

4. Object.prototype.toString.call()（用Object的toString方法判斷）所有型別資料都能判斷,記住判斷結果列印為：'[object Xxx]'

面試官：說一說null 和 undefined 的區別，如何讓一個屬性變為null

我：呃~，null 是定義並賦值null undefined是定義未賦值。

面試官：說一下有什麼方法可以保持前後端實時通訊？

我：呃~，輪詢、長輪詢、 iframe流、WebSocket、SSE。

面試官：說一說偽陣列和陣列的區別？

我：呃~，好的，總結如下：

偽陣列的特點：型別是object、不能使用陣列方法、可以獲取長度、可以使用for in遍歷

偽陣列可以轉換為陣列的方法：Array.prototype.slice.call()、Array.from()、[...偽陣列]

有哪些是偽陣列：函數的引數arguments，Map和Set的keys()、values()和entires()

【推薦學習：】

以上就是看看這些前端面試題，帶你搞定高頻知識點（六）的詳細內容，更多請關注TW511.COM其它相關文章！