一：JavaScript?

1、閉包是什么？利弊？如何解決弊端？

閉包是什么：JS中內(nèi)層函數(shù)可以訪問外層函數(shù)的變量，外層函數(shù)無法操作內(nèi)存函數(shù)的變量的特性。我們把這個(gè)特性稱作閉包。

閉包的好處：

隔離作用域，保護(hù)私有變量；有了閉包才有局部變量，要不然都是全局變量了。

讓我們可以使用回調(diào)，操作其他函數(shù)內(nèi)部；

變量長期駐扎在內(nèi)存中，不會(huì)被內(nèi)存回收機(jī)制回收，即延長變量的生命周期；

閉包的弊端：內(nèi)層函數(shù)引用外層函數(shù)變量，內(nèi)層函數(shù)占用內(nèi)存。如果不釋放內(nèi)存，過多時(shí)，易引起內(nèi)存泄露。

解決辦法：無法自動(dòng)銷戶，就及時(shí)手動(dòng)回收，使用后將函數(shù)的引用賦null。

2、深度拷貝

1、深拷貝與淺拷貝的區(qū)別？

拷貝的層級(jí)不同，深拷貝是指每一層數(shù)據(jù)的改動(dòng)都不會(huì)影響原對(duì)象和新對(duì)象，淺拷貝只有第一層的屬性變動(dòng)不互相影響，深層的數(shù)據(jù)變動(dòng)還會(huì)互相影響。

淺拷貝：Object.assign

深拷貝：JSON.stringify和JSON.parse

2、JSON的stringify和parse處理的缺點(diǎn)？

如果對(duì)象中有屬性是function或者undefined，處理后會(huì)被過濾掉；

如果屬性值是對(duì)象，且由構(gòu)造函數(shù)生成的實(shí)例對(duì)象，會(huì)丟棄對(duì)象的constructor；

3、$.extend()

使用jquey的extend方法不僅能實(shí)現(xiàn)深度拷貝，還能實(shí)現(xiàn)深度合并。具體用法

深度拷貝：$.extend({},targetObject) // targetObject是需要復(fù)制的對(duì)象

深度合并：$.extend(true,{},targetObject1,targetObject2) // 可以將兩個(gè)對(duì)象深度合并后再返回出一個(gè)新對(duì)象

3、如何判斷空對(duì)象？如何區(qū)分?jǐn)?shù)據(jù)類型？

? ? 判斷空對(duì)象

1、用JSON的stringify和parse轉(zhuǎn)成字符串后，跟'{}'對(duì)比；

2、用ES6，判斷Object.keys(targetObject)返回值數(shù)組的長度是否為0；

3、用ES5，判斷Object.getOwnPropertyNames(targetObject)返回的數(shù)組長度是否為0；

? ?區(qū)分?jǐn)?shù)據(jù)類型

4、如何改變this指向？區(qū)別？

• call/apply

  
  

5、沙箱隔離怎么做？

使用iframe可以實(shí)現(xiàn)，變量隔離

6、瀏覽器存儲(chǔ)，他們的區(qū)別？

localStorage：永久保存，以鍵值對(duì)保存，存儲(chǔ)空間5M

sessionStorage：關(guān)閉頁簽/瀏覽器時(shí)清空

cookie：隨著請(qǐng)求發(fā)送，通過設(shè)置過期時(shí)間刪除

session：保存在服務(wù)端

localStorage/sessionStorage是window的屬性，cookie是document的方法

7、常用的數(shù)組方法有哪些？

改變?cè)瓟?shù)組：push、pop、shift、unshift、sort、splice、reverse

不改變?cè)瓕俳M：concat、join、map、forEach、filter、slice

? ? slice和splice的區(qū)別？

slice切片的意思，根據(jù)傳入的起始和終止下標(biāo)，獲取該范圍數(shù)組。

splice可根據(jù)傳入?yún)?shù)個(gè)數(shù)不同實(shí)現(xiàn)刪除、插入操作，直接操作原數(shù)組。第1個(gè)參數(shù)為起始下標(biāo)，第2個(gè)為刪除個(gè)數(shù)，第3個(gè)為要增加的數(shù)據(jù)。

數(shù)組如何濾重？

8、Dom事件流的順序？什么是事件委托？

當(dāng)頁面上的一個(gè)元素被點(diǎn)擊時(shí)，先從document向下一層層捕獲到該元素。然后再向上冒泡，一層層觸發(fā)。

事件委托是將事件寫在父級(jí)元素上，e.target是事件捕獲時(shí)那個(gè)最小的元素，即選中的元素。所以可以根據(jù)e.target操作選中的元素。這樣不需要給每個(gè)子元素綁定事件，代碼更加簡約。

9、對(duì)原型鏈的認(rèn)識(shí)？

js通過原型鏈模擬實(shí)現(xiàn)面向?qū)ο?，比如通過實(shí)例化一個(gè)構(gòu)造函數(shù)可以給每個(gè)對(duì)象掛載自己專屬的屬性，通過給類的prototype上賦方法是所有對(duì)象所共有的方法。每次實(shí)例化不再賦值原型鏈上的方法。

10、防抖/節(jié)流的區(qū)別？

區(qū)別：防抖只會(huì)在最后一次事件后執(zhí)行觸發(fā)函數(shù)，節(jié)流不管事件多么的頻繁，都會(huì)保證在規(guī)定時(shí)間段內(nèi)觸發(fā)事件函數(shù)。

防抖:

原理是維護(hù)一個(gè)定時(shí)器，將很多個(gè)相同的操作合并成一個(gè)。規(guī)定在delay后觸發(fā)函數(shù)，如果在此之前觸發(fā)函數(shù)，則取消之前的計(jì)時(shí)重新計(jì)時(shí)，只有最后一次操作能被觸發(fā)。例如：實(shí)時(shí)搜索的input，一直輸入就不發(fā)送。

• 節(jié)流：

原理是判斷是否達(dá)到一定的時(shí)間來觸發(fā)事件。某個(gè)時(shí)間段內(nèi)只能觸發(fā)一次函數(shù)。例如：在指定的時(shí)間內(nèi)多次觸發(fā)無效

二：Html

1、重繪和重排（回流/重構(gòu)/重載）是什么？如何優(yōu)化？

樣式的調(diào)整會(huì)引起重繪，比如字體顏色、背景色調(diào)整等

Dom的變動(dòng)會(huì)引起重排，比如定位改動(dòng)、元素寬高調(diào)整

避免循環(huán)插入dom，比如table的行。可以js循環(huán)生成多個(gè)dom后，一次性插入。

2、html5有哪些新特性？

本地存儲(chǔ)，比如localStorage、sessionStorage

語義化標(biāo)簽，如header、footer、nav等，使代碼結(jié)構(gòu)清晰，利于seo

canvas

svg

web worker，在主線程外再創(chuàng)建一個(gè)線程，可與主線程交互

拖放功能

三：CSS

1、如何實(shí)現(xiàn)一個(gè)寬度不固定的上下左右居中的彈框？

2、偽類和偽元素區(qū)別？

• 偽類本質(zhì)上用于彌補(bǔ)常規(guī)css選擇器的不足，因?yàn)槿绻麤]有我們可能需要多寫一個(gè)class，所以叫偽類

• 偽元素本質(zhì)上是創(chuàng)建了一個(gè)有內(nèi)容的虛擬元素，如::before? ?::after。因?yàn)橄喈?dāng)于多了一個(gè)元素/節(jié)點(diǎn)，所以叫為元素

  
  

四：Vue

1、單頁面應(yīng)用是什么？優(yōu)缺點(diǎn)？如何彌補(bǔ)缺點(diǎn)

單頁面對(duì)一個(gè)入口DOM通過路由去更改內(nèi)容，整個(gè)應(yīng)用只有一個(gè)html頁面

SPA優(yōu)點(diǎn)：用戶體驗(yàn)好，沒有頁面切換就沒有白屏情況；

SPA缺點(diǎn)：首屏加載慢，不利于SEO

SPA彌補(bǔ)：通過壓縮、路由懶加載緩解首屏慢；通過SSR 服務(wù)器端渲染解決SEO問題；

2、組件及通信方式有哪些？

2.1、什么是組件？

組件是可復(fù)用的 Vue 實(shí)例，且?guī)в幸粋€(gè)名字：在這個(gè)例子中是 。我們可以在一個(gè)通過 new Vue 創(chuàng)建的 Vue 根實(shí)例中，把這個(gè)組件作為自定義元素來使用：

使用組件（把組件當(dāng)作自定義元素）

2.2、父向子傳值

Prop 是你可以在組件上注冊(cè)的一些自定義 attribute。當(dāng)一個(gè)值傳遞給一個(gè) prop attribute 的時(shí)候，它就變成了那個(gè)組件實(shí)例的一個(gè) property。為了給博文組件傳遞一個(gè)標(biāo)題，我們可以用一個(gè) props 選項(xiàng)將其包含在該組件可接受的 prop 列表中：

組件內(nèi)部聲明prop

2.3、父組件監(jiān)聽子組件事件

其實(shí)就是通過在父組件聲明方法，并綁定在子組件上。以子組件內(nèi)部觸發(fā)方法的形式，向父組件傳參，實(shí)現(xiàn)子向父?jìng)髦档男Ч?。如?/p>

父組件中聲明方法，并綁定在子組件上