每天10題,100天后,搞定所有前端面試的高頻知識點,加油! ! ! ,在看文章的同時,希望不要直接看答案,先思考一下自己會不會,如果會,自己的答案是什麼?想過之後再與答案比對,是不是會好一點,當然如果你有比我更好的答案,歡迎留言區留言,一起探討技術之美。
我:呃~,好的,三者的作用差異總結如下:
#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是由以下幾部分組成#:
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)為特定的元素產生獨立圖層
我:呃~,好的,他們之間的關係如下:
#相同點:
都是瀏覽器存儲,都儲存在瀏覽器本地。
區別:
#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資料型別分為兩類:一類是基本資料型,另一類是引用資料型,如下:
基本類型:string、number、boolean、null、undefined、symbol、bigInt
引用類型: object、array
基本型別儲存在堆疊中,空間小,操作頻繁
引用型別儲存在堆中,空間大,在堆疊中儲存了指針,指向在堆中的起始位址
注意:Symbol具有唯一性, 不可枚舉使用getOwnPropertySymbols取得
我:呃~,內層函數引用外層函數中變量,這些變數的集合就是閉包。
形成的原理:作用域鏈,目前作用域可以存取上級作用域中的變數。
解決的問題:能讓函數作用域中的變數在函數執行結束後不被銷毀,同時也能在函數外部可以存取函數內部的局部變數。
帶來的問題:由於垃圾回收器不會將閉包中變數銷毀,於是就造成了記憶體洩露,內存外洩累積多了就容易導致記憶體溢出。
閉包的應用,能夠模仿區塊層級作用域,能夠實現柯里化,在建構函式中定義特權方法、 Vue中資料響應式Observer中使用閉包等。
我:呃~,好的,總結如下:
1. typeof(根據二進位判斷),不能判斷資料型別:null和object
2 . intanceof(根據原型鏈判斷),原生資料型別不能判斷
3. constructor.name(根據建構器判斷),不能判斷null資料型別
4.Object.prototype.toString .call()(用Object的toString方法判斷)所有類型資料都能判斷,記住判斷結果打印為:'[object Xxx]'
我:呃~,null 是定義並賦值null undefined是定義未賦值。
我:呃~,輪詢、長輪詢、 iframe串流、WebSocket、SSE。
我:呃~,好的,總結如下:
#偽數組的特點:類型是object、不能使用數組方法、可以取得長度、可以使用for in遍歷
偽數組可以轉換為陣列的方法:Array.prototype.slice.call()、Array. from()、[...偽數組]
有哪些是偽數組:函數的參數arguments,Map和Set的keys()、values( )和entires()
【推薦學習:javascript進階教學】
以上是看看這些前端面試題,帶你搞定高頻知識點(六)的詳細內容。更多資訊請關注PHP中文網其他相關文章!