1. cookie sessinonStorage localStorage

得分點：
數(shù)據(jù)存儲位置、生命周期、存儲大小、寫入方式、數(shù)據(jù)共享、發(fā)送請求時是否攜帶、應(yīng)用場景

標(biāo)準回答：
cookie、sessionStorage、localStorage都是瀏覽器的本地存儲
共同點： 都是存儲在瀏覽器本地
區(qū)別：cookie是由服務(wù)端寫入的, 而sessionStorage、localStorage都是由前端寫入的，
cookie的生命周期是由服務(wù)端寫入的時候就設(shè)置好的，localStorage是寫入就一直存在，除非手動清除，sessionStorage是頁面關(guān)閉就會自動清除，
cookie的存儲空間比較小，大概4KB，sessionStorage和loaclStorage的存儲空間比較大，大概5M，
cookie、sessionStorage、localStorage數(shù)據(jù)共享都遵循同源原則，sessionStorage還限制必須同一個頁面，
在前端給后端發(fā)送請求會自動攜帶cookie中的數(shù)據(jù)，但是sessionStorage、localStorage不會，
應(yīng)用場景不同：cookie一般用于存儲登錄驗證信息，sessionId或者token。localStorage常用于存儲不易變動的數(shù)據(jù)，減輕服務(wù)器壓力，sessionStorage可以用來檢測用戶是否刷新進入頁面

2. js的數(shù)據(jù)類型

得分點：
number、string、boolean、bigint、symbol、null、undefined、Object 8種

標(biāo)準回答：
js的數(shù)據(jù)類型分為兩類，一類是基本數(shù)據(jù)類型也叫簡單數(shù)據(jù)類型，包含7種類型：number、string、boolean、bigInt、symbol、null、undefined，另一類是引用數(shù)據(jù)類型也叫復(fù)雜數(shù)據(jù)類型，通常用object代表，普通對象，數(shù)組、正則、日期，Math數(shù)據(jù)函數(shù)都屬于object
數(shù)據(jù)分成兩大類的本質(zhì)區(qū)別：基本數(shù)據(jù)類型和引用數(shù)據(jù)類型他們在內(nèi)存種的存儲與方式不同，基本數(shù)據(jù)類型是直接存在棧中的簡單數(shù)據(jù)段，占用空間小，屬于被頻繁使用的數(shù)據(jù)、引用數(shù)據(jù)類型是存儲在內(nèi)存中，占用空間大，引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向堆中該實體的起始位置、當(dāng)解釋器尋找引用值時、會檢索其在棧中的地址，取得地址后從堆中獲得實體
symbol是Es6新出的一種數(shù)據(jù)類型，這種數(shù)據(jù)類型的特點就是沒有重復(fù)的數(shù)據(jù)，可以用為object的key、數(shù)據(jù)的創(chuàng)建方法是symbol(),因為它的構(gòu)造函數(shù)不夠完整，所以不能使用new Symbol()創(chuàng)建數(shù)據(jù)。由于symbol()創(chuàng)建數(shù)據(jù)具有唯一性，所以symbol() !== symbol(), 同時使用symbol數(shù)據(jù)作為key，不能使用for獲取到這個key，需要使用object.getOwnPropertySymbols(obj) 獲取這個obj對象中key類型是symbol的key
bigInt也是es6新出的一種數(shù)據(jù)類型，這種數(shù)據(jù)類型的特點就是數(shù)據(jù)涵蓋的范圍大，能夠解除超出普通數(shù)據(jù)類型范圍報錯的問題
number精度范圍是2的52次方位

3. 閉包

得分點：
變量背包、作用域鏈、局部變量不銷毀、函數(shù)體外訪問函數(shù)的內(nèi)部變量、內(nèi)存泄露、內(nèi)存溢出、形成塊級作用域、柯里化、構(gòu)造函數(shù)中定義特權(quán)方法、Vue種數(shù)據(jù)響應(yīng)式Observer

標(biāo)準回答：
閉包: 一個函數(shù)和詞法環(huán)境的引用捆綁在一起，這樣的組合就是閉包，
一般就是一個函數(shù)A，return其內(nèi)部的函數(shù)B， 被return出去的B函數(shù)能夠在外部訪問A函數(shù)內(nèi)部的變量，這時候就形成了一個B函數(shù)的變量背包，A函數(shù)執(zhí)行結(jié)束后這個變量背包也不會被銷毀，并且這個變量背包在A函數(shù)外部只能通關(guān)B函數(shù)訪問，
閉包形成的原理：作用域鏈，當(dāng)前作用域可以訪問上級作用域中的變量，閉包解決的問題： 由于垃圾回收器不會將閉包中的變量銷毀，于是就造成了內(nèi)存泄露，內(nèi)存泄漏積累多了就容易導(dǎo)致內(nèi)存溢出，

加分回答：閉包的應(yīng)用,能夠模仿塊級作用域，能夠?qū)崿F(xiàn)柯里化、在構(gòu)造函數(shù)中定義特權(quán)方法，Vue種數(shù)據(jù)響應(yīng)式Observer中使用閉包等

4.promise

得分點：
pending、rejected、resolved、微任務(wù)、then、catch、Promise.resolve()、promise.reject()、promise.all()、promise.any() promise.race();

標(biāo)準回答：
promise的作用：promise是異步微任務(wù)，解決了異步多層嵌套回調(diào)的問題，讓代碼的可讀性更高，更容易維護
promise的使用： promise是ES6提供的一個構(gòu)造函數(shù)，可以使用promise構(gòu)造函數(shù)new一個實例，promise構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù)，這個函數(shù)又兩個參數(shù)，分別是‘resolve’和‘reject’，‘resolve’將promise由等待pending變?yōu)槌晒?，將異步操作的結(jié)果作為參數(shù)傳遞過去，‘reject’則將狀態(tài)由等待pending變成失敗，在異步操作失敗時調(diào)用，將異步操作報出的錯誤作為參數(shù)傳遞過去。
實例創(chuàng)建完成后，可以使用'then'方法分別指定成功或失敗的回調(diào)函數(shù)，可以使用catch捕捉失敗。
then和catch最終返回的也是一個promise，所以可以鏈式調(diào)用，
promise的特點：1. 對象的狀態(tài)不受外界影響，promise對象代表一個異步操作，有三種狀態(tài)， pending(執(zhí)行中) resolved（成功，又稱fulfilled）。rejected（拒接），pending為初始狀態(tài)。resolved和rejected為結(jié)束狀態(tài)，結(jié)束狀態(tài)代表promise生命周期已結(jié)束。2.一旦狀態(tài)改變，就不會在變，任何時候都可以得到這個結(jié)果， promise對象的狀態(tài)改變，只能有兩個可能， 從pending變?yōu)閞esolved | 從pending變成rejected。3.resolve方法的參數(shù)是then中回調(diào)函數(shù)的參數(shù)，reject方法種的參數(shù)是catch中的參數(shù) 4. then方法和catch方法只要不報錯，返回的都是一個fulfilled狀態(tài)的promise

加分回答：
promise.resolve() 返回的promise對象狀態(tài)變成fulfilled。并且將value傳遞給對應(yīng)的then方法。
promise.reject() 返回一個狀態(tài)為失敗狀態(tài)的promise對象，并將給定的失敗信息傳遞給對應(yīng)的處理方法。
promise.all() 返回一個新的promise對象，該promise對象的參數(shù)對象里面所有的promise對象都成功的時候才會觸發(fā)，一旦有任何一個promise對象失敗則立即觸發(fā)該promise對象的失敗。
promise.any() 接受一個promise對象的集合，當(dāng)其中一個promise成功，就返回那個成功的promise的值。
promise.race() 當(dāng)參數(shù)里面的任意一個promise對象成功或者失敗后，父promise馬上也會用子promise的成功返回或者失敗詳情作為參數(shù)調(diào)用父promise綁定的相應(yīng)句柄，并返回該promise對象

5.跨域

得分點：
同源協(xié)議、協(xié)議、域名、端口、CORS、node中間件、JSONP、postmessage

標(biāo)準回答：
跨域：當(dāng)前頁面中的某個接口請求的地址和當(dāng)前頁面的地址如果協(xié)議、域名、端口其中有一項不同，該接口就跨域了
跨域限制的原因：瀏覽器為了保證網(wǎng)頁的安全，出的同源協(xié)議策略
跨域解決方案：1. CORS: 目前最常用的一種解決辦法，通過設(shè)置后端允許跨域、 2. node中間件、nginx反向代理：跨域限制的時候瀏覽器不能訪問跨域服務(wù)器，node中間件和nginx反向代理，都是讓請求發(fā)給代理服務(wù)器，靜態(tài)頁面和代理服務(wù)器是同源的，然后代理服務(wù)器在向后臺服務(wù)器發(fā)送請求，服務(wù)器和服務(wù)器之間不存在同源限制 3.JSONP 利用原理是script標(biāo)簽可以跨域請求資源，將回調(diào)函數(shù)作為參數(shù)拼接在url后，后端收到請求，調(diào)用該回調(diào)函數(shù)，并將數(shù)據(jù)作為參數(shù)返回去，注意設(shè)置響應(yīng)頭返回文檔類型，應(yīng)該設(shè)置成JavaScript

6.vuex

得分點： state、mutations、getters、action、module、store.commit、store.dispatch

標(biāo)準回答：
Vuex是集中管理項目公共數(shù)據(jù)的。
vuex有state、mutations、getters、actions、module屬性
state屬性用來存儲公共管理的數(shù)據(jù)。
mutations屬性定義改變state中數(shù)據(jù)的方法。注意：不要在mutation中的方法中寫異步的ajax，那樣數(shù)據(jù)就不可跟蹤了
getters屬性可以認為是定義store中的計算屬性、就像計算屬性一樣，getter的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)他的依賴值發(fā)生了改變才會被重新計算，
action屬性類似于mutation。不同在于：action提交的是mutation。而不是直接改變數(shù)據(jù)狀態(tài)。action可以包含任何的異步操作。
moudle屬性是將store分割成模塊，每個模塊擁有自己的state、mutation、action、getter甚至是嵌套子模塊，從上至下進行同樣的方式分割，
使用方法：
state直接以對象方式添加屬性
mutations： 通過store.commit調(diào)用
action：通過store.dispath方法觸發(fā)
getters: 直接通過store.getters調(diào)用

加分回答： 可以使用mapState、mapMutations、mapActions、mapGetters一次性獲取每個屬性下對應(yīng)的多個方法。vuex在大型項目中比較常用，非關(guān)系組件傳遞數(shù)據(jù)比較方便

7.數(shù)據(jù)去重

得分點: 對象屬性、new Set()、indexOf、hasOwnproperty、reduce+includes、filter

利用對象屬性key排除重復(fù)項： 遍歷數(shù)組，每次判斷對象中是否存在該屬性。不存在就存儲在新數(shù)組中、并且把數(shù)組元素作為key，設(shè)置一個值。存儲在對象中，最后返回新數(shù)組，這個方法效率高，缺點占用較多空間，使用的額外空間有一個查詢對象和一個新數(shù)組
利用set類型數(shù)據(jù)無重復(fù)項： new 一個set。參數(shù)為需要去重的數(shù)據(jù)。set會自動刪除重復(fù)的元素，再將set轉(zhuǎn)為數(shù)組返回，這個方法的優(yōu)點：效率更高，代碼簡單、思路清晰、缺點：可能有兼容性問題
filter+indexOf。這個方法和第一種方法類似，利用array自帶的filter方法，返回arr.indexOf(num)等于index的num，原理是indexOf會返回最先找到的數(shù)字索引，優(yōu)點：可以在去重的時候插入對元素的操作，可擴展性強
reduce+includes去重：這個方法就是利用reduce遍歷和傳入一個空數(shù)組作為去重后的數(shù)組，然后內(nèi)部判斷新數(shù)組中是否存在當(dāng)前遍歷的元素，不存在就插入到新數(shù)組中，這個方法消耗多，內(nèi)存也有額外占用，方法還有很多，常用這些

加分回答：在數(shù)據(jù)低于10000條的時候沒有明顯的差別，高于1w條的，利用對象屬性和set方法時間消耗最少，后面兩條的時間消耗較多，由于key方法內(nèi)存空間消耗比較多，且現(xiàn)在很多項目不考慮低版本瀏覽器的兼容性問題，建議使用set方法，簡潔方便

8. vue2雙向綁定的原理和缺陷

得分點：
Object.defineProperty、getter、setter
標(biāo)準回答：Vue響應(yīng)式指的是: 組件的data發(fā)生變化，立即觸發(fā)視圖的更新
原理：
Vue采用數(shù)據(jù)劫持 結(jié)合 發(fā)布者-訂閱者的方式來實現(xiàn)數(shù)據(jù)的響應(yīng)式，通過Object.defineProperty來劫持數(shù)據(jù)的getter、setter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，訂閱者收到消息后進行相應(yīng)的處理，通過原生js提供的監(jiān)聽數(shù)據(jù)的API，當(dāng)數(shù)據(jù)發(fā)生變化的時候，在回調(diào)函數(shù)中修改DOM。 核心API：Object.dedineproperty
缺點:
一次性遞歸到底開銷很大，如果數(shù)據(jù)很大，大量的遞歸導(dǎo)致調(diào)用棧溢出、 不能監(jiān)聽對象的新增屬性和刪除屬性 無法正確的監(jiān)聽數(shù)組的方法

9.vue2和vue3的區(qū)別

vue2不管數(shù)據(jù)多大，都會在一開始就為其創(chuàng)建觀察者，當(dāng)數(shù)據(jù)很大時，這可能會在頁面載入時造成明顯的性能壓力，vue3只會對被用于渲染初始可見部分的數(shù)據(jù)創(chuàng)建觀察者，而且vue3的觀察者更高效
object.defineProperty無法監(jiān)聽到新增和刪除屬性，但是proxy可以監(jiān)聽到
object.defineProperty需要遍歷對象每個數(shù)據(jù)，對性能影響，proxy監(jiān)控對象本身

10.ES6的箭頭函數(shù)

得分點：
沒有this、this是從外部獲取、不能使用new、沒有arguments、沒有原型和super

標(biāo)準回答：箭頭函數(shù)相當(dāng)于匿名函數(shù)，簡化了函數(shù)定義。箭頭函數(shù)有兩種寫法,當(dāng)函數(shù)體是單條語句的時候可以省略{}和return，另一種是多條語句，不可以省略{}和return，
箭頭函數(shù)最大的他特點就是沒有this。所以this是從外部獲取，就是繼承外部的執(zhí)行上下文中的this。由于沒有this關(guān)鍵字，所以箭頭函數(shù)也不能作為構(gòu)造函數(shù)。同時通關(guān)call（） 或者apply() 方法調(diào)用一個函數(shù)是，只能傳遞參數(shù)，不能綁定this，第一個參數(shù)會被忽略，箭頭函數(shù)也沒有原型和super

11. call apply bind的作用和區(qū)別

得分點：
bind改變this指向不直接調(diào)用、call和apply改變this指向直接調(diào)用、apply接受第二個參數(shù)為數(shù)組、call用于對象的繼承、偽數(shù)組轉(zhuǎn)化為真數(shù)組、apply用于找出數(shù)組中的最大值和最小值以及數(shù)組合并，bind用于vue改變函數(shù)的this指向

標(biāo)準回答：
call、apply、bind的作用都是改變函數(shù)運行時的this指向，bind和call、apply在使用上有所不同、bind在改變this指向返回一個改變執(zhí)行上下文的函數(shù)。不會立即執(zhí)行函數(shù)，需要調(diào)用函數(shù)的時候在調(diào)用
但是call和apply在改變this指向的通時執(zhí)行了該函數(shù)，call和apply接收多個參數(shù)，第一個參數(shù)都是this指向的上下文，后面的參數(shù)都是作為改變this指向的函數(shù)的參數(shù)。
call和apply的參數(shù)格式不同，call時一個參數(shù)對應(yīng)一個原函數(shù)的參數(shù)，但是apply第二個參數(shù)時數(shù)組，數(shù)組中每個元素代表函數(shù)接口的參數(shù)，數(shù)組有幾個元素函數(shù)就接受幾個參數(shù)

12.HTML語義化

得分點：語義化標(biāo)簽、利于頁面內(nèi)容結(jié)構(gòu)化、利于無css頁面可讀、利于SEO、利于代碼可讀

標(biāo)準回答：HTML語義化比就是指在使用HTML標(biāo)簽構(gòu)建頁面時，避免大幅度的使用無語義的標(biāo)簽，語義標(biāo)簽：header footer h1-h6 p br

13. this指向

得分點： 全局執(zhí)行上下文、函數(shù)執(zhí)行上下文、this嚴格模式undefined、非嚴格模式window、構(gòu)造函數(shù)新對象本身、普通函數(shù)不繼承this、箭頭函數(shù)無this

標(biāo)準回答：
this關(guān)鍵字的由來: 在對象內(nèi)部的方法中使用對象內(nèi)部的屬性是一個普遍的需求，但是javascript的作用域機制并不支持這一點，基于這個需求，javascript又搞出來一套this機制，this存在場景有三種，全局執(zhí)行上下文和函數(shù)執(zhí)行上下文和eval執(zhí)行上下文(暫不討論)，
在全局執(zhí)行環(huán)境中無論是否在嚴格模式下，this都是指向全局對象，在函數(shù)執(zhí)行上下文中訪問this，函數(shù)的調(diào)用方式?jīng)Q定了this的值，在全局環(huán)境中調(diào)用一個函數(shù)，函數(shù)內(nèi)部的this指向的是全局變量window，通關(guān)一個對象來調(diào)用其內(nèi)部的一個方法，該方法的執(zhí)行上下文中的this指向?qū)ο蟊旧恚?br> 普通函數(shù)this指向：當(dāng)函數(shù)被正常調(diào)用時，在嚴格模式下this指向undefined，非嚴格模式下this指向的是全局對象window，通過一個對象來調(diào)用其內(nèi)部的一個方法，該方法的執(zhí)行上下文中的this指向?qū)ο蟊旧怼ew 關(guān)鍵字構(gòu)架好了一個新對象，并且構(gòu)造函數(shù)的this其實就是新對象本身。
嵌套函數(shù)的this不會繼承外層函數(shù)的this。箭頭函數(shù)沒有this，箭頭函數(shù)并不會創(chuàng)建自身的執(zhí)行上下文，所以箭頭函數(shù)中的this取決于它的外部函數(shù)

加分回答： 箭頭函數(shù)沒有this。所以也不能作為構(gòu)造函數(shù)，但是需要繼承函數(shù)外部的this時，使用箭頭函數(shù)比較方便

14.css尺寸單位

得分點：px、rem、em、vw、vh
標(biāo)準回答：
px絕對長度單位，它的大小取決于屏幕的分辨率，是開發(fā)網(wǎng)頁中常常使用的單位
em相對長度單位，在font-size中使用相對于父元素的字體大小，在其他屬性中使用相對自身的字體大小
rem 相對長度單位 根據(jù)根元素的字體大小，如果根元素未設(shè)置，使用瀏覽器默認字體大小
vw，vh相對長度單位，相對與視窗寬度的1%

15.js變量提升

得分點： var聲明的變量提升、函數(shù)聲明提升、let和const變量不提示

標(biāo)準回答：
變量提升是指js的變量和函數(shù)聲明會在代碼編譯期提升到代碼的最前面，變量提升成立的前提是使用var關(guān)鍵字進行聲明的變量，并且變量提升的時候只有聲明被提升，賦值并不會被提升，同時函數(shù)的聲明提升會比變量的提升優(yōu)先，變量提升的結(jié)果，可以在變量初始化之前訪問該變量，返回的是undefined。在函數(shù)聲明前可以調(diào)用該函數(shù)

加分回答： 使用let 和const聲明的變量是創(chuàng)建提升，形成暫時性死區(qū)，在初始化之前訪問let和const創(chuàng)建的變量會報錯

16.hashRouter和HistoryRouter的區(qū)別和原理

得分點：
window.onhashChange history.pushState window.onpopstate

標(biāo)準回答：
history和hash都是利用瀏覽器的兩種特性實現(xiàn)的前端路由
history是利用瀏覽器歷史記錄棧的api實現(xiàn)，hash是監(jiān)聽loaction對象的hash值變化事件來實現(xiàn)
history沒有#號，hash有#號，相同的url, history會觸發(fā)添加到瀏覽器歷史記錄棧中，hash不會觸發(fā)
history需要后端配合，在做進一步處理，如果后端不配合，會出現(xiàn)404，hash不需要
history原理 通過history.pushstate使用它做頁面跳轉(zhuǎn)不會觸發(fā)頁面刷新，使用window.onpopstate監(jiān)聽瀏覽器的前進和后退，在做其他處理

加分回答： hash模式下有#號，需要url更加優(yōu)雅時，可以使用history模式，需要兼容低版本瀏覽器時建議使用hash模式

17.map和forEach的區(qū)別

得分點：map創(chuàng)建新數(shù)組，map返回處理后的值、forEach不修改原數(shù)組、forEach方法返回undfined

標(biāo)準回答：
map有返回值、可以開辟新空間，return出來一個length和原數(shù)組一致的數(shù)組，即便數(shù)組元素是undefined或者null。
forEach默認無返回值。返回結(jié)果為undfined?？梢酝ㄟ^在函數(shù)體內(nèi)部使用索引改變數(shù)組元素

加分回答：map的處理速度比forEach快，。而且返回一個新數(shù)組，方便鏈式調(diào)用數(shù)組的其他方法

18.事件循環(huán)Event loop， 宏任務(wù)、微任務(wù)

得分點：任務(wù)掛起、同步任務(wù)執(zhí)行結(jié)束執(zhí)行隊列中的異步任務(wù)、執(zhí)行script標(biāo)簽內(nèi)部代碼、setTimeout/setInterval、ajax請求、postMessage。promise、nextTick

標(biāo)準回答：
瀏覽器的事件循環(huán)：執(zhí)行js代碼的時候，遇見同步任務(wù)，直接推入調(diào)用棧中執(zhí)行，遇到異步任務(wù)，將該任務(wù)掛起，等到異步任務(wù)有返回之后推入任務(wù)隊列中，當(dāng)調(diào)用棧中的同步任務(wù)全部執(zhí)行完成，將任務(wù)隊列中的任務(wù)按順序一個個推入執(zhí)行，重復(fù)執(zhí)行這一系列的行為， 異步任務(wù)又分為宏任務(wù)和微任務(wù)。
宏任務(wù)： 任務(wù)隊列中的任務(wù)稱為宏任務(wù)，每個宏任務(wù)都包含一個微任務(wù)隊列
微任務(wù)： 等宏任務(wù)中的主要功能都完成后，渲染殷勤不急著去執(zhí)行下一個宏任務(wù)，而是執(zhí)行當(dāng)前宏任務(wù)中的微任務(wù)
宏任務(wù)包括：執(zhí)行script標(biāo)簽內(nèi)部代碼、setTimeout、ajax請求
微任務(wù)包括：pormise、MutonObserver、Object.observer

19. vue3實現(xiàn)數(shù)據(jù)雙向綁定的方法

得分點：proxy、數(shù)據(jù)攔截、劫持整個對象、返回一個新對象

標(biāo)準回答：
vue3通過proxy實現(xiàn)數(shù)據(jù)的雙向綁定。
proxy是ES6中新增的一個特性、實現(xiàn)的過程是在目標(biāo)對象之前設(shè)置了一層攔截。外界對該對象的訪問，都必須先通關(guān)這層攔截、因此提供了一種機制，可以對外界的訪問進行過濾和改寫
用法：ES6提供的proxy構(gòu)建函數(shù)、用來生成proxy實例，var proxy = new proxy(targer, hanler)
target:是用于proxy包裝的被代理對象(可以是任何類型的對象，包括原生數(shù)組、函數(shù)甚至另一個代理)
handler：是一個對象，其聲明了代理target的一些操作，其屬性是當(dāng)執(zhí)行一個操作時定義代理的行為的函數(shù)

加分回答：
object.defineproperty的問題：在vue中，object.defineProperty無法監(jiān)控數(shù)組下標(biāo)的變化，導(dǎo)致直接通過數(shù)組下標(biāo)給數(shù)組設(shè)置值，不能實時響應(yīng)。vue2里面是通過遞歸以及遍歷data對象來實現(xiàn)對數(shù)據(jù)的監(jiān)控，如果屬性值也是對象，那么需要深度遍歷，顯然如果能劫持整個對象，不管是對操作還是性能都會有很大提升
proxy的有點，劫持整個對象，并返回一個新對象