當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Web 前端基础知识面试大全

發(fā)布時間：2023/12/14 HTML 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web 前端基础知识面试大全小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、HTML

1.對 HTML 語義化的理解

2.區(qū)別：src 和 href

3.DOCTYPE 的作用

4.HTML5 的新特性

5.script 標簽中的 defer 和 async

6. 行內(nèi)元素塊級元素空元素

7.meta 標簽

8.JPG和PNG的區(qū)別

二、CSS

1.CSS 選擇器，優(yōu)先級

2.CSS 動畫

3.CSS選擇器效率從高到低的排序如下：

4.flex 布局

5.雙飛翼布局

6.position 有幾個值，absolute 是相對于誰的定位。

三.Javascript

1.原始值和引用值類型及區(qū)別

2.JavaScript 數(shù)據(jù)類型以及 typeof 返回值

3.如何判斷一個對象是 Array 還是 Object？

4.類數(shù)組與數(shù)組的區(qū)別：

5.數(shù)組常用的api

6.bind、call、apply的區(qū)別：

7.new原理

8.閉包

9.原型和原型鏈

10.實現(xiàn)繼承的幾種方式以及他們的優(yōu)缺點

11.淺拷貝與深拷貝

12.作用域

13.防抖與節(jié)流

14.Dom節(jié)點操作常用方法

15.BOM屬性對象方法

16.ajax的請求過程

17.總結(jié)JS中string、math、array的常用的方法

18.js中“==”與"==="的區(qū)別

19.JS事件綁定（addEventListener）和普通事件（onclick）有什么區(qū)別

20.重繪和回流

21.函數(shù)柯里化及其通用封裝

22.JS中EventLoop事件循環(huán)機制

23.前端性能優(yōu)化

24.Object.create 和new?

25.Location 對象

26.跨域解決方案?

27.JS 垃圾回收機制?

28.前端進階之setTimeout 倒計時為什么會出現(xiàn)誤差？?

29.get請求和post請求的區(qū)別

30.數(shù)組去重的12中方法?

四、數(shù)據(jù)結(jié)構(gòu)

五、計網(wǎng)?

1.ios七層模型

?編輯?2.TCP 和 UDP 的區(qū)別。

3.HTTP 2.0 新增

六、ES6

1.export和import

2.Promise

3.let、const和var的概念與區(qū)別

4.變量提升與暫時性死區(qū)

5. Symbol

6.Object.keys()方法

7.Object.assign()

8.set數(shù)據(jù)結(jié)構(gòu)

9.Map數(shù)據(jù)結(jié)構(gòu)

10.Proxy

11.Reflect

12.模板字符串

13.箭頭函數(shù)（=>）

14.for…of 循環(huán)

15.jQuery的選擇器怎么實現(xiàn)的

八.VUE

1、說說你對 SPA 單頁面的理解，它的優(yōu)缺點分別是什么？

2、v-show 與 v-if 有什么區(qū)別？

3、Class 與 Style 如何動態(tài)綁定？

4、怎樣理解Vue的單向數(shù)據(jù)流？

5、computed 和 watch 的區(qū)別和運用的場景？

6、直接給一個數(shù)組項賦值，Vue 能檢測到變化嗎？

7、談?wù)勀銓?Vue 生命周期的理解？

（1）生命周期是什么？

（2）各個生命周期的作用

8、Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序？

9、在哪個生命周期內(nèi)調(diào)用異步請求？

10、在什么階段才能訪問操作DOM？

11、父組件可以監(jiān)聽到子組件的生命周期嗎？

12、談?wù)勀銓?keep-alive 的了解？

13、組件中 data 為什么是一個函數(shù)？

14、v-model 的原理？

15、Vue 組件間通信有哪幾種方式？

16、你使用過 Vuex 嗎？

17、使用過 Vue SSR 嗎？說說 SSR？

18、vue-router 路由模式有幾種？

19、能說下 vue-router 中常用的 hash 和 history 路由模式實現(xiàn)原理嗎？

20、什么是 MVVM？

21、Vue 雙向綁定原理

22、Vue 框架怎么實現(xiàn)對象和數(shù)組的監(jiān)聽？

23、Proxy 與 Object.defineProperty 優(yōu)劣對比

24、Vue 怎么用 vm.$set() 解決對象新增屬性不能響應(yīng)的問題？

25、虛擬 DOM 的優(yōu)缺點？

26、虛擬 DOM 實現(xiàn)原理？

27、Vue 中的 key 有什么作用？

28、你有對 Vue 項目進行哪些優(yōu)化？

29、對于即將到來的 vue3.0 特性你有什么了解的嗎？

一、HTML

1.對 HTML 語義化的理解

見標簽知其意思? ? ?header main nav aside footer h1-h6 ul li

優(yōu)點：結(jié)構(gòu)清晰、方便搜索引擎搜素（seo）、方便理解維護

2.區(qū)別：src 和 href

比如常見的 <img src=""> 這里的 src 所指的是這個圖片的所在的位置路徑，script 和 iframe 也是，src 被解析的時候，會進行下載并編譯，同時會暫停該文檔其他資源的下載和處理，所以 js 文件的載入最好在 body 中，而不是在 head 中。

href

href被添加，元素會被識別為 css 文件進行處理，且不會停止其它資源的運行。所以建議用 link 加載 css 文件，而不是 @import。

常用的有：

<a href=""></a> 超鏈接

3.DOCTYPE 的作用

作用： DOCTYPE 是文檔類型 document type 的縮寫。主要作用是告訴瀏覽器的解析器使用哪種 HTML 規(guī)范來解析頁面。而如果 DOCTYPE 缺失，或形式不正確，會導致 html 文檔或 HTML 文檔不是以標準模式（瀏覽器對頁面的渲染具有統(tǒng)一的規(guī)范）而是以混雜模式（不同瀏覽器有不同的的頁面渲染）運行。

4.HTML5 的新特性

?簡化了文檔聲明，HTML5 的文檔聲明只需要 <!DOCTYPE HTML>
簡化了編碼聲明，只需要 <meta charset='utf-8'>
刪除了一些能用 CSS 代替的就標簽，比如 <i>
增加了一些新標簽，改善文檔結(jié)構(gòu)的有：<header><footer>等。減少插件依賴的 <canvas><audio> 等
增加了一些新的 JavaScript 的 API ，比如地理定位、請求動畫幀、離線存儲等
配合一些框架，例如 cordova 和 react 等，可以開發(fā)基于 HTML5 的移動應(yīng)用。

5.script 標簽中的 defer 和 async

作用：平常的 script 標簽如果直接使用， html 會按順序下載和執(zhí)行腳本，并阻礙后續(xù) DOM 的渲染。如果 script 發(fā)生延遲，就會阻礙后續(xù)的渲染，使得頁面白屏。

defer

異步下載文件
不阻礙 dom 的渲染
如果有多個 defer 會按順序執(zhí)行
執(zhí)行順序：在文檔渲染后執(zhí)行，在 DOMContentLoader 事件調(diào)用前執(zhí)行。

? ? ?2.async

異步下載文件
不影響 dom
如果有多個 defer 誰快先執(zhí)行誰

推薦的應(yīng)用場景：

defer：如果你的腳本代碼依賴于頁面中的 dom 元素（文檔是否解析完畢），并且也不會產(chǎn)生其他腳本需要的數(shù)據(jù)。

async：如果你的腳本并不關(guān)心頁面中的 dom 元素（文檔是否解析完畢），并且也不會產(chǎn)生其他腳本需要的數(shù)據(jù)。

6. 行內(nèi)元素塊級元素空元素

行內(nèi)元素： a \ b \ span \ input \ img \ strong \ br \ em \ big \ small

塊元素： div \ ul \ ol \ li \ h1-h6 \ p \ dl \ dt \ address

空元素： img \ input \ link \ meta

7.meta 標簽

meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后的修改時間以及其他元數(shù)據(jù)。標簽始終位于 head 元素中。

meta 屬性：必選屬性 content-進行描述說明的，相當于鍵值；可選屬性 http-equiv、name 和 scheme, http-equiv-添加 http 頭部內(nèi)容，name-瀏覽器解析

? ? 包括：

①charset charset定義使用的字符編碼

②SEO

③viewport?

8.JPG和PNG的區(qū)別

1.JPG是有損壓縮格式，PNG是無損壓縮格式

2.JPG圖片沒有透明背景，PNG有透明背景?

二、CSS

1.CSS 選擇器，優(yōu)先級

?Import>內(nèi)聯(lián)1000>id100>class==偽類==屬性選擇器10>元素選擇器偽元素選擇器?

2.CSS 動畫

?transition和animation的區(qū)別

大部分都是相同，都是隨著時間改變元素的屬性值，

他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性，而animation不需要觸發(fā)任何事件就可以實行。

transition為兩幀，從from…to… 而animation可以一幀一幀的通過keyframes。

3.CSS選擇器效率從高到低的排序如下：

Id>class>元素選擇器>兄弟選擇器>子代選擇器>后代選擇器>屬性選擇器>偽元素偽類

ID選擇器比如#header

類選擇器比如.promo

元素選擇器比如 div

兄弟選擇器比如 h2 + p

子選擇器比如 li > ul

后代選擇器比如 ul a 7. 通用選擇器比如 *

屬性選擇器比如 type = “text”

偽類/偽元素選擇器比如 a:hover

4.flex 布局

?flex是css3新增的一種布局方式,我們可以同時設(shè)置一個元素的display屬性值設(shè)置為flex,
從而使它成為一個flex容器，它的所有子元素都成為它的項目。

一個容器默認有兩條軸，一個水平軸，一條是與主軸垂直的交叉軸

flex-direction來指定主軸的方向。

justify-content來指定標簽在主軸的排列方式，

使用align-items來指定元素在交叉軸的排序方式。

還可以使用flex-wrap來規(guī)定當一行排列不下時的換行方式。

對于一個容器的項目，

使用order屬性來指定項目的排列順序，

flex-grow來指定當前排序空間有剩余的時候，項目放大比例。

flex-shrink來指定當前排序空間不足時，項目縮小比例。

5.雙飛翼布局

6.position 有幾個值，absolute 是相對于誰的定位。

?absolute ：生成絕對定位的元素，相對于最近一級的父元素，且該父元素不能是static，來進行定位。

fixed：（老IE不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進行定位。

relative：生成相對定位的元素，相對于其在普通流中的位置進行定位。

static：默認值。沒有定位，元素出現(xiàn)在正常的流中

三.Javascript

1.原始值和引用值類型及區(qū)別

?? ? ? ? 原始值（簡單數(shù)據(jù)類型）：存儲在棧中的簡單數(shù)據(jù)段，也就是說，它們的值直接存儲在變量訪問的位置。
? ? ? ? 包含五種簡單數(shù)據(jù)類型：undefined、null、boolean、number 和 string ；可以通過typeof 運算符來判斷一個值是否在某種類型的范圍內(nèi)，如果它是原始類型，還可以判斷它表示哪種原始類型。

? ? ? ? 引用值（復(fù)雜數(shù)據(jù)類型）：存儲在堆中的對象，放在變量的棧空間中的值是該對象存儲在堆中的地址，也就是說，存儲在變量處的值是一個指針（內(nèi)存地址），指向存儲對象的堆內(nèi)存中。

包含：Object、function、array等。

2.JavaScript 數(shù)據(jù)類型以及 typeof 返回值

數(shù)據(jù)類型：number、string、null、boolean、object、undefined、symbol

typeof x undefinedtypeof undefined undefinedtypeof true booleanfunction A() {}typeof A functionconst arr = []const obj = {}typeof arr objecttypeof obj object

3.如何判斷一個對象是 Array 還是 Object？

在 typeof 判斷?Array 或者?Object 的時候，其結(jié)果都是 object 那么我們怎么知道源對象是 Arrary 還是 Object 的呢？

4.類數(shù)組與數(shù)組的區(qū)別：

相同點：

都可用下標訪問每個元素，都有l(wèi)ength屬性。

不同點：

數(shù)組對象的類型是Array,類數(shù)組對象的類型是object;
類數(shù)組不具有數(shù)組所具有的方法，
數(shù)組遍歷可以用 for in 和 for 循環(huán)
類數(shù)組只能用 for 循環(huán)遍歷。

常見的類數(shù)組有: 函數(shù)的參數(shù) arguments，arguments是一個類數(shù)組對象，包含著傳入函數(shù)中的所有實參集合

5.數(shù)組常用的api

字符轉(zhuǎn)換 toString 方法將數(shù)組表示為字符串
join（）方法，將數(shù)組里各元素組合成字符串，但連接符可自己指定
unshift方法，是將元素插入數(shù)組的首部。
shift方法移除數(shù)組的第一個元素并將其返回
push方法一次可添加單個或多個元素到數(shù)組末端，也可以添加數(shù)組。
pop方法的作用是移除數(shù)組末尾的一個元素

6.bind、call、apply的區(qū)別：

?? ? ? ? 三者都是用于改變函數(shù)體內(nèi)this的指向，但是bind與apply和call的最大的區(qū)別是：bind不會立即調(diào)用，而是返回一個新函數(shù)，稱為綁定函數(shù)，其內(nèi)的this指向為創(chuàng)建它時傳入bind的第一個參數(shù)，而傳入bind的第二個及以后的參數(shù)作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)

? ? ? ? apply和call都是為了改變某個函數(shù)運行時的上下文而存在的（就是為了改變函數(shù)內(nèi)部this的指向）；apply和call的調(diào)用返回函數(shù)執(zhí)行結(jié)果；

? ? ? ? 如果使用apply或call方法，那么this指向他們的第一個參數(shù)，apply的第二個參數(shù)是一個參數(shù)數(shù)組，call的第二個及其以后的參數(shù)都是數(shù)組里面的元素，就是說要全部列舉出來；

????????Bind:返回綁定函數(shù)，傳入?yún)?shù)數(shù)列

????????Apply:傳入?yún)?shù)數(shù)組

????????Call:傳入?yún)?shù)數(shù)列

7.new原理

?????mdn上把內(nèi)部操作大概分為4步：??

創(chuàng)建一個空的簡單JavaScript對象（即{ } ）；
鏈接該對象（即設(shè)置該對象的構(gòu)造函數(shù)）到另一個對象；(因此this就指向了這個新對象)
執(zhí)行構(gòu)造函數(shù)中的代碼（為這個新對象添加屬性）；
如果該函數(shù)沒有返回對象，則返回this。

8.閉包

有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)；

第一，閉包是一個函數(shù)，而且存在于另一個函數(shù)當中
第二，閉包可以訪問到父級函數(shù)的變量，且該變量不會銷毀
作用1：隱藏變量，避免全局污染
作用2：可以讀取函數(shù)內(nèi)部的變量

9.原型和原型鏈

????????在JavaScript中，每當定義一個函數(shù)數(shù)據(jù)類型(普通函數(shù)、類)時候，都會天生自帶一個prototype屬性，這個屬性指向函數(shù)的原型對象，并且這個屬性是一個對象數(shù)據(jù)類型的值。?

原型鏈? __proto__ 和 constructor

????????每一個對象數(shù)據(jù)類型(普通的對象、實例、prototype......)也天生自帶一個屬性__proto__，屬性值是當前實例所屬類的原型(prototype)。實例原型中有一個屬性constructor, 它指向函數(shù)對象，即構(gòu)造函數(shù)。

通過prototype對象指向父類對象，直到指向Object對象為止，這樣就形成了一個原型指向的鏈條，專業(yè)術(shù)語稱之為原型鏈

當我們訪問對象的一個屬性或方法時，它會先在對象自身中尋找，如果沒有則會去原型對象中尋找，直到找到Object對象的原型，Object對象的原型，如果在Object原型中依然沒有找到，則返回undefined。

原型鏈的終點：object.prototype=null

10.實現(xiàn)繼承的幾種方式以及他們的優(yōu)缺點

????????其實js的繼承本質(zhì)上是通過原型鏈機制實現(xiàn)的擴展。不管是哪種繼承方式，都是通過操作父類原型鏈和子類原型鏈形成關(guān)聯(lián)關(guān)系實現(xiàn)的。只是不同實現(xiàn)中需要考慮不同的問題。在實際項目開發(fā)中，建議盡可能使用ES6的class extends實現(xiàn)。其他實現(xiàn)方式主要是理解背后的原理和思想。

原型鏈繼承

通過修改子類的原型為父類的實例，從而實現(xiàn)子類可以訪問到父類構(gòu)造函數(shù)以及原型上的屬性或者方法。屬性沒有私有化，原型上屬性的改變會作用到所有的實例上。

實現(xiàn)邏輯簡單,但是父類構(gòu)造函數(shù)中的引用類型（比如對象/數(shù)組），會被所有子類實例共享。其中一個子類實例進行修改，會導致所有其他子類實例的這個值都會改變

function Parent() {this.name = 'fedaily' } Parent.prototype.getName = function() {return this.name; } function Child() {} // 這里也可以直接寫出Child.prototype = Parent.prototype // 但是這樣就不能訪問到父類的構(gòu)造函數(shù)的屬性了，即this.name Child.prototype = new Parent() var child = new Child() console.log(child.getName()) // fedaily

構(gòu)造函數(shù)繼承：

在構(gòu)造子類構(gòu)造函數(shù)時內(nèi)部使用call或apply來調(diào)用父類的構(gòu)造函數(shù)

實現(xiàn)了屬性的私有化，但是子類無法訪問父類原型上的屬性。

可以實現(xiàn)多繼承

組合繼承

同時結(jié)合原型鏈繼承、構(gòu)造函數(shù)繼承就是組合繼承了。

同時解決了構(gòu)造函數(shù)引用類型的問題，同時避免了方法會被創(chuàng)建多次的問題，但是父類構(gòu)造函數(shù)被調(diào)用了兩次。同時子類實例以及子類原型對象上都會存在name屬性。雖然根據(jù)原型鏈機制，并不會訪問到原型對象上的同名屬性，但總歸是不美。

寄生繼承

　　核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點。

function Parent() {this.name = 'fedaily' }Parent.prototype.getName = function() {return this.name }function Child() {Parent.call(this)this.topic = 'fe' }// 仔細看這個函數(shù)的實現(xiàn) inherit(Child, Parent) function inherit(child, parent) {var prototype = object(parent.prototype)prototype.constructor = childchild.prototype = prototype }// 這個函數(shù)的作用可以理解為復(fù)制了一份父類的原型對象 // 如果直接將子類的原型對象賦值為父類原型對象 // 那么修改子類原型對象其實就相當于修改了父類的原型對象 function object(o) {function F() {}F.prototype = o;return new F(); }

這種方式就解決了組合繼承中的構(gòu)造函數(shù)調(diào)用兩次，構(gòu)造函數(shù)引用類型共享，以及原型對象上存在多余屬性的問題。是推薦的最合理實現(xiàn)方式（排除ES6的class extends繼承哈哈哈）。

ES6繼承

ES6提供了class語法糖，同時提供了extends用于實現(xiàn)類的繼承。這也是項目開發(fā)中推薦使用的方式。
使用class繼承很簡單，也很直觀：

11.淺拷貝與深拷貝

淺拷貝只復(fù)制指向某個對象的指針，而不復(fù)制對象本身，新舊對象還是共享同一塊內(nèi)存。但深拷貝會另外創(chuàng)造一個一模一樣的對象，新對象跟原對象不共享內(nèi)存，修改新對象不會改到原對象。?

賦值和淺拷貝的區(qū)別

當我們把一個對象賦值給一個新的變量時，賦的其實是該對象的在棧中的地址，而不是堆中的數(shù)據(jù)。

淺拷貝是按位拷貝對象，它會創(chuàng)建一個新對象，這個對象有著原始對象屬性值的一份精確拷貝。如果屬性是基本類型，拷貝的就是基本類型的值；如果屬性是內(nèi)存地址（引用類型），拷貝的就是內(nèi)存地址

淺拷貝的實現(xiàn)方式

Object.assign()

Object.assign() 進行的是淺拷貝，拷貝的是對象的屬性的引用，而不是對象本身。當object只有一層的時候，是深拷貝

Array.prototype.concat()

修改新對象會改到源對象

12.作用域

為可訪問變量，對象，函數(shù)的集合

作用域鏈是[[Scope]]中所存儲的執(zhí)行期上下文的集合

一個執(zhí)行期上下文定義了一個函數(shù)執(zhí)行的環(huán)境

13.防抖與節(jié)流

防抖就類似回城，打斷就得重新回。

觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果在 n 秒內(nèi)又觸發(fā)了事件，則會重新計算函數(shù)執(zhí)行時間。在限定時間內(nèi)，總是執(zhí)行最后一次。

假設(shè)設(shè)置了五秒, 最后一秒生效(也就是說, 第一次點擊和第二次點擊之間間隔不到5秒, 則第一次的點擊會被作廢)

節(jié)流就類似技能需要冷卻時間到了才能用。

指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù)。節(jié)流會稀釋函數(shù)的執(zhí)行頻率。

假設(shè)設(shè)置了五秒, 第一秒生效, 后面的四秒作廢.。

由于節(jié)流是第一次生效, 而防抖是最后一次生效, 所以防抖獲取到最新數(shù)據(jù)。

14.Dom節(jié)點操作常用方法

訪問/獲取節(jié)點

document.getElementById(id);　　　　　　　　?　　//返回對擁有指定id的第一個對象進行訪問

document.getElementsByName(name);　　　　　　//返回帶有指定名稱的節(jié)點集合　　?注意拼寫:Elements

document.getElementsByTagName(tagname); 　　//返回帶有指定標簽名的對象集合　? 注意拼寫：Elements

document.getElementsByClassName(classname); ?//返回帶有指定class名稱的對象集合注意拼寫：Elements

創(chuàng)建節(jié)點/屬性

document.createElement(eName);　　//創(chuàng)建一個節(jié)點

document.createAttribute(attrName); //對某個節(jié)點創(chuàng)建屬性

document.createTextNode(text);　　　//創(chuàng)建文本節(jié)點

添加節(jié)點

document.insertBefore(newNode,referenceNode);　?//在某個節(jié)點前插入節(jié)點

parentNode.appendChild(newNode);　　　　　　　　//給某個節(jié)點添加子節(jié)點

復(fù)制節(jié)點

cloneNode(true | false);　　//復(fù)制某個節(jié)點 ?參數(shù)：是否復(fù)制原節(jié)點的所有屬性

刪除節(jié)點

parentNode.removeChild(node);

15.BOM屬性對象方法

window對象
location對象

它提供了與當前窗口中加載的文檔有關(guān)的信息，還提供了一些導航功能

history對象

history對象是window對象的屬性，它保存著用戶上網(wǎng)的記錄，從窗口被打開的那一刻算起

16.ajax的請求過程

一、原生JS中的Ajax

1、使用ajax發(fā)送數(shù)據(jù)的步驟

第一步：創(chuàng)建異步對象

var xhr = new XMLHttpRequest();

第二步：設(shè)置請求行 open(請求方式，請求url):

// get請求如果有參數(shù)就需要在url后面拼接參數(shù)，

// post如果有參數(shù)，就在請求體中傳遞 xhr.open("get","validate.php?username="+name)

xhr.open("post","validate.php");

第三步：設(shè)置請求（GET方式忽略此步驟）頭:setRequestHeader()

// 1.get不需要設(shè)置

// 2.post需要設(shè)置請求頭：Content-Type:application/x-www-form-urlencoded

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

第四步：設(shè)置請求體 send()

// 1.get的參數(shù)在url拼接了，所以不需要在這個函數(shù)中設(shè)置

// 2.post的參數(shù)在這個函數(shù)中設(shè)置(如果有參數(shù))

xhr.send(null) xhr.send("username="+name);

第五步：讓異步對象接收服務(wù)器的響應(yīng)數(shù)據(jù)

17.總結(jié)JS中string、math、array的常用的方法

一、String?

①charAt()方法用于返回指定索引處的字符。返回的字符是長度為 1 的字符串

②indexOf()方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置

③split()方法將字符串分割成字符串數(shù)組，并返回此數(shù)組

④substring()方法用于提取字符串中介于兩個指定下標之間的字符，其內(nèi)容是從 start 處到 stop-1 處的所有字符，其長度為 stop 減 start。

二、Math

①ceil()方法對一個數(shù)進行向上取整

語法：Math.ceil(x) ?返回大于等于x 并且與x最接近的整數(shù)

②floor()方法對一個數(shù)進行向下取整

語法：Math.floor(x) 返回小于等于x 并且與x最接近的整數(shù)

③round()方法對一個數(shù)進行四舍五入取整

語法：Math.round(x) 返回最接近x的整數(shù)

④random()方法返回介于 0 ~ 1 之間的一個隨機數(shù)

語法：Math.random() 返回0.0 ~ 1.0 之間的一個隨機數(shù)。

⑤max()方法返回指定的數(shù)中帶有較大的值的那個數(shù)

語法：Math.max(x1,x2,.....) 返回x1,x2,.....中帶有最高值的數(shù)字 ?如果有某個參數(shù)為 NaN，或是不能轉(zhuǎn)換成數(shù)字的非數(shù)字值，則返回 NaN。

⑥min()方法返回指定的數(shù)中帶有較小的值的那個數(shù)

三、Array

①concat()方法用于連接兩個或多個數(shù)組。返回一個新的數(shù)組

②join()方法用于把數(shù)組中的所有元素放入一個字符串。返回一個字符串,不改變原數(shù)組。

③reverse()方法用于顛倒數(shù)組中元素的順序，該方法會改變原來的數(shù)組，而不會創(chuàng)建新的數(shù)組。

⑤sort()方法使數(shù)組中的元素按照一定的順序進行重新排序，該方法會改變原來的數(shù)組。

⑦map()方法按照原始數(shù)組元素順序依次處理元素。map()方法可以方便的遍歷數(shù)組。返回一個新數(shù)組，不會改變原始數(shù)組。

語法：arrayObject.map(function(currentValue,index,arr), thisValue)

function(currentValue, index,arr) 必需，函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù)。

currentValue （必選當前元素的值）；

index （可選當前元素索引）

arr （可選當前元素屬于的數(shù)組對象。后兩者在回調(diào)函數(shù)中根據(jù)是否需要來決定是否作為參數(shù)傳入）。

thisValue 可選，網(wǎng)上查到的說法是：對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 "this" 的值。如果省略了 thisValue ，"this" 的值為 "undefined"。一般用不到該參數(shù)。

1 var oldArray=[1,2,3];2 var newArray=oldArray.map(function(val){3 return val+=3;4 });5 alert(newArray);//4,5,6

⑧reduce()方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。reduce()方法可以方便的迭代數(shù)組。不會改變原數(shù)組。

語法：arrayObject.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue)

function(previousValue, currentValue, currentIndex, arr) 必需，函數(shù)，

reduce()方法可給該回調(diào)函數(shù)傳入四個值：

previousValue （必選上一次調(diào)用回調(diào)返回的值，或者是提供的初始（initialValue））；

currentValue （必選數(shù)組中當前被處理的元素）；

currentIndex（可選當前元素在數(shù)組中的索引）；

arr （可選調(diào)用 reduce 的數(shù)組）。

initialValue 可選，若不設(shè)置。則初始值將變成數(shù)組中的第一項，而currentValue即從數(shù)組中的第二項開始。

1 var arr=[2,4,3,7];2 //數(shù)組中的元素進行累加3 var val=arr.reduce(function(n1,n2){4 return n1+n2;5 },0);

18.js中“==”與"==="的區(qū)別

== 表示相等（值相等）

===表示恒等（類型和值都要相等）

js在比較的時候如果是 == 會先做類型轉(zhuǎn)換，再判斷值得大小，如果是===類型和值必須都相等。

19.JS事件綁定（addEventListener）和普通事件（onclick）有什么區(qū)別

普通事件（onclick）

普通事件就是直接觸發(fā)事件，同一時間只能指向唯一對象，所以會被覆蓋掉。代碼如下：
?

var btn = document.getElementById("btn");btn.onclick = function(){undefinedalert("你好111");}btn.onclick = function(){undefinedalert("你好222");}

只運行你好222

事件綁定（addEventListener）

事件綁定就是對于一個可以綁定的事件對象，進行多次綁定事件都能運行。代碼如下：

var btn = document.getElementById("btn");btn.addEventListener("click",function(){undefinedalert("你好111");},false);btn.addEventListener("click",function(){undefinedalert("你好222");},false);

運行結(jié)果會依次彈出你好111，你好222的彈出框。

onclick屬性不適用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

20.重繪和回流

我們增刪DOM節(jié)點，修改一個元素的寬高，頁面布局發(fā)生變化，DOM樹結(jié)構(gòu)發(fā)生變化，那么肯定要重新構(gòu)建DOM樹，而DOM樹與渲染樹是緊密相連的，DOM樹構(gòu)建完，渲染樹也會隨之對頁面進行再次渲染，這個過程就叫回流

當你給一個元素更換顏色，這樣的行為是不會影響頁面布局的，DOM樹不會變化，但顏色變了，渲染樹得重新渲染頁面，這就是重繪。

21.函數(shù)柯里化及其通用封裝

函數(shù)柯里化，其實就是把多次調(diào)用的變量保存在閉包中，每次調(diào)用都查看一下變量數(shù)和原函數(shù)的形參數(shù)量是否相等。不相等就繼續(xù)遞歸。直到相等為止就處理了。
?

22.JS中EventLoop事件循環(huán)機制

JavaScript的事件分兩種，宏任務(wù)(macro-task)和微任務(wù)(micro-task)

宏任務(wù)：包括整體代碼script，setTimeout，setInterval?

微任務(wù)：Promise.then(非new Promise)，process.nextTick(node中)?

首先setTimeout，放入Event Table中，1秒后將回調(diào)函數(shù)放入宏任務(wù)的Event Queue中

new Promise 同步代碼，立即執(zhí)行console.log('promise'),然后看到微任務(wù)then，因此將其放入微任務(wù)的Event Queue中

接下來執(zhí)行同步代碼console.log('console')

主線程的宏任務(wù)，已經(jīng)執(zhí)行完畢，接下來要執(zhí)行微任務(wù)，因此會執(zhí)行Promise.then，到此，第一輪事件循環(huán)執(zhí)行完畢

第二輪事件循環(huán)開始，先執(zhí)行宏任務(wù)，即setTimeout的回調(diào)函數(shù)，然后查找是否有微任務(wù)，沒有，時間循環(huán)結(jié)束

總結(jié)：

事件循環(huán)，先執(zhí)行宏任務(wù)，其中同步任務(wù)立即執(zhí)行，異步任務(wù)加載到對應(yīng)的的Event Queue中(setTimeout等加入宏任務(wù)的Event Queue，Promise.then加入微任務(wù)的Event Queue)，所有同步宏任務(wù)執(zhí)行完畢后，如果發(fā)現(xiàn)微任務(wù)的Event Queue中有未執(zhí)行的任務(wù)，會先執(zhí)行其中的任務(wù)，這樣算是完成了一次事件循環(huán)。接下來查看宏任務(wù)的Event Queue中是否有未執(zhí)行的任務(wù)，有的話，就開始第二輪事件循環(huán)，依此類推。
?

23.前端性能優(yōu)化

減少請求數(shù)：合并資源(精靈圖)，減少http請求數(shù)。

加快請求速度：預(yù)解析DNS，減少域名數(shù)，CDN分支。

緩存：http請求協(xié)議緩存，離線緩存，離線數(shù)據(jù)緩存(localStorage)。

渲染：js/css優(yōu)化，服務(wù)器渲染，加快順序。

24.Object.create 和new?

Object.create是內(nèi)部定義一個funcition對象f，并且讓F.prototype對象賦值為base，并return出一個新的對象實例。?

Object.create = function (o) {undefinedvar F = function () {};F.prototype = o;return new F();};

new做法是新建一個obj對象o1，并且讓o1的__proto__指向了Base.prototype對象。并且使用call 進行強轉(zhuǎn)作用環(huán)境。從而實現(xiàn)了實例的創(chuàng)建。

JavaScript 實際上執(zhí)行的是：

var o1 = new Object();o1.[[Prototype]] = Base.prototype;Base.call(o1);

25.Location 對象

Location 對象包含有關(guān)當前 URL 的信息。把用戶帶到一個新地址

window.location="/index.html"

26.跨域解決方案?

跨域：在同源策略的限制下，會阻止非同源下域的內(nèi)容進行交互

跨域：同協(xié)議、域名、端口

1) JSONP原理

利用標簽沒有跨域限制的漏洞，網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的 JSON 數(shù)據(jù)。JSONP請求一定需要對方的服務(wù)器做支持才可以。

2) JSONP和AJAX對比

JSONP和AJAX相同，都是客戶端向服務(wù)器端發(fā)送請求，從服務(wù)器端獲取數(shù)據(jù)的方式。但AJAX屬于同源策略，JSONP屬于非同源策略（跨域請求）

3) JSONP優(yōu)缺點

JSONP優(yōu)點是簡單兼容性好，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。缺點是僅支持get方法具有局限性,不安全可能會遭受XSS攻擊。

4）實現(xiàn)

在a的script標簽下，把那個跨域的API數(shù)據(jù)接口地址，賦值給script的src 傳了個test.js

Test.js具體實現(xiàn)一個功能比如alert

2.cors

在服務(wù)端設(shè)置

Access-control-allow-Origin 允許哪些域名可以訪問

Access-control-allow-methods 允許哪些請求方式

3.第三方服務(wù)器代理

實現(xiàn)原理：同源策略是瀏覽器需要遵循的標準，而如果是服務(wù)器向服務(wù)器請求就無需遵循同源策略。

代理服務(wù)器，需要做以下幾個步驟：

接受客戶端請求。

將請求轉(zhuǎn)發(fā)給服務(wù)器。

拿到服務(wù)器響應(yīng) 數(shù)據(jù)。

將響應(yīng) 轉(zhuǎn)發(fā)給客戶端。

27.JS 垃圾回收機制?

“可達性” 值就是那些以某種方式可訪問或可用的值，它們被保證存儲在內(nèi)存中。

怎么使這些可達的值，變得不可達，特別是在有很多引用的情況下

基本的垃圾回收算法稱為“標記-清除”，定期執(zhí)行以下“垃圾回收”步驟:

垃圾回收器獲取根并“標記”(記住)它們。

然后它訪問并“標記”所有來自它們的引用。

然后它訪問標記的對象并標記它們的引用。所有被訪問的對象都被記住，以便以后不再訪問同一個對象兩次。

以此類推，直到有未訪問的引用(可以從根訪問)為止。

除標記的對象外，所有對象都被刪除。
?

28.前端進階之setTimeout 倒計時為什么會出現(xiàn)誤差？?

定時器是屬于宏任務(wù)(macrotask) 。如果當前?執(zhí)行棧?所花費的時間大于?定時器?時間，那么定時器的回調(diào)在宏任務(wù)(macrotask) 里，來不及去調(diào)用，所有這個時間會有誤差。

29.get請求和post請求的區(qū)別

1、請求方式不同：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。

2、攜帶參數(shù)方式不同：get請求可以在路由中攜帶參數(shù),post不行，get請求是params攜帶參數(shù),post是data攜帶參數(shù)。get請求會將參數(shù)跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內(nèi)容發(fā)送給Web服務(wù)器的，這種傳遞是對用戶不可見的。

3、數(shù)據(jù)傳輸大小不同：get方式傳輸?shù)臄?shù)據(jù)大小不能超過2KB 而POST要大的多

4、安全問題：

? ? ? ? post請求相對安全，無法通過路由查看參數(shù)，而且也不可以修改。

? ? ? ? ie瀏覽器會默認緩存get請求，相同請求會從本地獲取，而post會從服務(wù)器獲取

30.數(shù)組去重的12中方法?

?1、利用ES6 Set去重（ES6中最常用）

不考慮兼容性，這種去重的方法代碼最少。這種方法還無法去掉“{}”空對象，后面的高階方法會添加去掉重復(fù)“{}”的方法。?

function unique (arr) {return Array.from(new Set(arr)) } var arr = [1,1,'true','true',true,true,15,15,false,false,undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr))//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

2、利用for嵌套for，然后splice去重（ES5中最常用）

雙層循環(huán)，外層循環(huán)元素，內(nèi)層循環(huán)時比較值。值相同時，則刪去這個值。

想快速學習更多常用的ES6語法，可以看這篇文章《學習ES6筆記──工作中常用到的ES6語法》?

3、?indexOf去重

新建一個空的結(jié)果數(shù)組，for 循環(huán)原數(shù)組，判斷結(jié)果數(shù)組是否存在當前元素，如果有相同的值則跳過，不相同則push進數(shù)組

4、利用sort()

利用sort()排序方法，然后根據(jù)排序后的結(jié)果進行遍歷及相鄰元素比對?

?5、利用對象的屬性不能相同的特點進行去重（這種數(shù)組去重的方法有問題，不建議用，有待改進）

6、利用includes

7、利用hasOwnProperty?

利用hasOwnProperty 判斷是否存在對象屬性

function unique(arr) {var obj = {};return arr.filter(function(item, index, arr){return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)}) } var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]; console.log(unique(arr)) //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了

?8、利用filter

9、利用遞歸去重

?10、利用Map數(shù)據(jù)結(jié)構(gòu)去重

創(chuàng)建一個空Map數(shù)據(jù)結(jié)構(gòu)，遍歷需要去重的數(shù)組，把數(shù)組的每一個元素作為key存到Map中。由于Map中不會出現(xiàn)相同的key值，所以最終得到的就是去重后的結(jié)果。

11、?利用reduce+includes

12、[...new Set(arr)]

[...new Set(arr)] //代碼就是這么少----（其實，嚴格來說并不算是一種，相對于第一種方法來說只是簡化了代碼）

?有些文章提到了foreach+indexOf數(shù)組去重的方法，個人覺得都是大同小異

四、數(shù)據(jù)結(jié)構(gòu)

1.樹和圖的遍歷方式

數(shù)的遍歷方式

前中后序遍歷遞歸||非遞歸非遞歸用棧

層次遍歷(層次遍歷可以設(shè)一個隊列，把元素放在隊列里，每次輸出隊頭元素。)

圖的遍歷方式

DFS BFS

2.數(shù)組和鏈表的區(qū)別

數(shù)組是將元素在內(nèi)存中連續(xù)存放，

由于每個元素占用內(nèi)存相同，可以通過下標迅速訪問任何元素

鏈表中的元素在內(nèi)存中不是順序存儲的，而是通過元素中的指針聯(lián)系到一起。

數(shù)組遍歷方便插入刪除麻煩鏈表恰好相反
?

五、計網(wǎng)?

1.ios七層模型

?2.TCP 和 UDP 的區(qū)別。

3.HTTP 2.0 新增

二進制協(xié)議，多路復(fù)用(共享連接)，數(shù)據(jù)流，信息頭壓縮，客戶端推送

4.HTTP狀態(tài)碼
200 請求成功

301 永久重定向

302 臨時重定向

304 not Modified 未修改

400 客戶端錯誤

401 當前身份驗證

403 服務(wù)器已經(jīng)得到請求，但是拒絕執(zhí)行

404 not found

500 客戶端在執(zhí)行時發(fā)生錯誤，無法完成請求。

六、ES6

1.export和import

模塊化開發(fā)?

?Export

如果希望從外界獲取某個文件內(nèi)部的變量，必須通過export輸出，

?Import命令

export定義了模塊的對外接口后，其他JS文件就可以通過import來加載這個模塊，

2.Promise

Promise回顧
首先來回顧一下Promise是什么。

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案回調(diào)函數(shù)和事件更合理和更強大。

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。

（1）Promise的實例有三個狀態(tài):

Pending（進行中）
Resolved（已完成）
Rejected（已拒絕）
當把一件事情交給promise時，它的狀態(tài)就是Pending，任務(wù)完成了狀態(tài)就變成了Resolved、沒有完成失敗了就變成了Rejected。

（2）Promise的實例有兩個過程：

pending -> fulfilled : Resolved（已完成）
pending -> rejected：Rejected（已拒絕）
需要注意：一旦從進行狀態(tài)變成為其他狀態(tài)就永遠不能更改狀態(tài)了。

特點：

將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)。流程更加清晰，代碼更加優(yōu)雅。
Promise對象提供統(tǒng)一的接口，使得控制異步操作更加容易。
缺點：

無法取消Promise，一旦新建它就會立即執(zhí)行，無法中途取消。
如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯誤，不會反應(yīng)到外部。
當處于pending狀態(tài)時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

3.let、const和var的概念與區(qū)別

?區(qū)別

let有塊級作用域不存在變量提升不存在重復(fù)定義不可能提前使用。

const固定的，一開始就要聲明好，后面不能更改

4.變量提升與暫時性死區(qū)

?變量提升:var命令會發(fā)生“變量提升”現(xiàn)象，即變量可以在聲明之前使用，值為undefined。

暫時性死區(qū):只要塊級作用域內(nèi)存在let聲明，它所聲明的變量就“綁定”（binding）這個區(qū)域，不再受外部的影響。

var tmp = 123;if (true) {undefinedtmp = 'abc'; // ReferenceErrorlet tmp;}

5. Symbol

Symbol是ES6中新增的一種數(shù)據(jù)類型, 被劃分到了基本數(shù)據(jù)類型中

? ? 基本數(shù)據(jù)類型: 字符串、數(shù)值、布爾、undefined、null、Symbol

? ? 引用數(shù)據(jù)類型: Object

? ? Symbol的作用

? ? 用來表示一個獨一無二的值 ? let xxx = Symbol();

6.Object.keys()方法

?獲取對象的所有屬性名或方法名（不包括原形的內(nèi)容），返回一個數(shù)組。

7.Object.assign()

?Object.assign()方法將多個原對象的屬性和方法都合并到了目標對象上面。可以接收多個參數(shù)，第一個參數(shù)是目標對象，后面的都是源對象。

如果在這個過程中出現(xiàn)同名的屬性（方法）后面的會覆蓋之前的。

var o1 = 'abc'; //字符串 string var o2 = true; //布爾型 boolean var o3 = 10; //數(shù)值 numbervar obj = Object.assign(o1, o2, o3);//字符串會轉(zhuǎn)換對象屬性 index作為鍵字符串作為內(nèi)容 //布爾型和數(shù)值不轉(zhuǎn) console.log(obj); // { 0: a, 1: b, 2: c }//assign的合并的目標對象會被修改 console.log(o1); // { a: 1, b: 2, c: 3 }

8.set數(shù)據(jù)結(jié)構(gòu)

?Set數(shù)據(jù)結(jié)構(gòu)，類似數(shù)組。所有的數(shù)據(jù)都是唯一的，沒有重復(fù)的值。

9.Map數(shù)據(jù)結(jié)構(gòu)

?它類似與對象，也是鍵值對集合，但是”鍵”的范圍不限于字符串，對象也可以當作鍵

10.Proxy

?Proxy 對象用于創(chuàng)建一個對象的代理，從而實現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

const p = new Proxy(target, handler)

targe：t要使用 Proxy 包裝的目標對象（可以是任何類型的對象，包括原生數(shù)組，函數(shù)，甚至另一個代理）。

handler：一個通常以函數(shù)作為屬性的對象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時代理 p 的行為

11.Reflect

設(shè)計目的：

①將Object屬于語言內(nèi)部的方法放到Reflect上

let obj = {}let newVal = ''Reflect.defineProperty(obj, 'name', {undefinedget() {undefinedreturn newVal},set(val) {undefinedconsole.log('set')// this.name = valnewVal = val}})obj.name = 'es'console.log(obj.name)

?②修改某些Object方法的返回結(jié)果，讓其變得更合理

③讓Object操作變成函數(shù)行為

// 老寫法

'assign' in Object // true

// 新寫法

Reflect.has(Object, 'assign') // true

④Reflect對象的方法與Proxy對象的方法一一對應(yīng)，只要是Proxy對象的方法，就能在Reflect對象上找到對應(yīng)的方法

12.模板字符串

用一對反引號(`)標識，它可以當作普通字符串使用，也可以用來定義多行字符串，也可以在字符串中嵌入變量，js表達式或函數(shù)，變量、js表達式或函數(shù)需要寫在${ }中。即完成拼接?

13.箭頭函數(shù)（=>）

箭頭函數(shù)中this的使用跟普通函數(shù)也不一樣，在JavaScript的普通函數(shù)中，都會有一個自己的this值

普通函數(shù)：
1、函數(shù)作為全局函數(shù)被調(diào)用時，this指向全局對象
2、函數(shù)作為對象中的方法被調(diào)用時，this指向該對象
3、函數(shù)作為構(gòu)造函數(shù)的時候，this指向構(gòu)造函數(shù)new出來的新對象
4、還可以通過call，apply，bind改變this的指向
箭頭函數(shù)：
1、箭頭函數(shù)沒有this，函數(shù)內(nèi)部的this來自于父級最近的非箭頭函數(shù)，并且不能改變this的指向。
2、箭頭函數(shù)沒有super
3、箭頭函數(shù)沒有arguments
4、箭頭函數(shù)沒有new.target綁定。
5、不能使用new
6、沒有原型
7、不支持重復(fù)的命名參數(shù)。

箭頭函數(shù)的簡單理解

參數(shù)=》函數(shù)實體

1、箭頭函數(shù)的左邊表示輸入的參數(shù)，右邊表示輸出的結(jié)果。

const s = a => a console.log(s(2)) // 2

2、在箭頭函數(shù)中，this屬于詞法作用域，直接由上下文確定，對于普通函數(shù)中指向不定的this，箭頭函數(shù)中處理this無疑更加簡單，如下：?

//ES5普通函數(shù) function Man(){this.age=22;return function(){this.age+1;} } var cala=new Man(); console.log(cala())//undefined//ES6箭頭函數(shù) function Man(){this.age=22;return () => this.age+1; } var cala=new Man(); console.log(cala())//23

3、箭頭函數(shù)中沒有arguments(我們可以用rest參數(shù)替代),也沒有原型，也不能使用new 關(guān)鍵字，例如：

//沒有arguments var foo=(a,b)=>{return arguments[0]*arguments[1]} console.log(foo(3,5)) //arguments is not defined//沒有原型 var Obj = () => {}; console.log(Obj.prototype); // undefined//不能使用new 關(guān)鍵字 var Obj = () => {"hello world"}; var o = new Obj(); // TypeError: Obj is not a constructor

4、箭頭函數(shù)給數(shù)組排序

const arr = [10, 50, 30, 40, 20] const s = arr.sort((a, b) => a - b) console.log(s) // [10,20,30,40,50]

14.for…of 循環(huán)

用于對象遍歷

for (variable of iterable) {undefined

? ? statement

}

15.jQuery的選擇器怎么實現(xiàn)的

?jquery原型里面有一個init初始化的方法，將傳入的值進行解析，比如傳入的id還是class還是標簽名。然后通過相應(yīng)的方法返回數(shù)組型對象。既可以通過對象直接調(diào)用方法，也可以使用數(shù)組的length。

八.VUE

1、說說你對 SPA 單頁面的理解，它的優(yōu)缺點分別是什么？

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應(yīng)的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會因為用戶的操作而進行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機制實現(xiàn) HTML 內(nèi)容的變換，UI 與用戶的交互，避免頁面的重新加載。

優(yōu)點：

用戶體驗好、快，內(nèi)容的改變不需要重新加載整個頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染；

基于上面一點，SPA 相對對服務(wù)器壓力小；

前后端職責分離，架構(gòu)清晰，前端進行交互邏輯，后端負責數(shù)據(jù)處理；

缺點：

初次加載耗時多：為實現(xiàn)單頁 Web 應(yīng)用功能及顯示效果，需要在加載頁面的時候?qū)?JavaScript、CSS 統(tǒng)一加載，部分頁面按需加載；

前進后退路由管理：由于單頁應(yīng)用在一個頁面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進后退功能，所有的頁面切換需要自己建立堆棧管理；

SEO 難度較大：由于所有的內(nèi)容都在一個頁面中動態(tài)替換顯示，所以在 SEO 上其有著天然的弱勢。

2、v-show 與 v-if 有什么區(qū)別？

答: 共同點：都能控制元素的顯示和隱藏；
不同點：實現(xiàn)本質(zhì)方法不同，v-show本質(zhì)就是通過控制css中的display設(shè)置為none，控制隱藏，只會編譯一次；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素，若初始值為false，就不會編譯了。而且v-if不停的銷毀和創(chuàng)建比較消耗性能。
總結(jié)：如果要頻繁切換某節(jié)點，使用v-show(切換開銷比較小，初始開銷較大)。如果不需要頻繁切換某節(jié)點使用v-if（初始渲染開銷較小，切換開銷比較大）。

3、Class 與 Style 如何動態(tài)綁定？

Class 可以通過對象語法和數(shù)組語法進行動態(tài)綁定：

對象語法：<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

數(shù)組語法：<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

Style 也可以通過對象語法和數(shù)組語法進行動態(tài)綁定：

對象語法：<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

數(shù)組語法：<div v-bind:style="[styleColor, styleSize]"></div>

4、怎樣理解Vue的單向數(shù)據(jù)流？

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。?

這樣會防止從子組件意外改變父級組件的狀態(tài)，從而導致你的應(yīng)用的數(shù)據(jù)流向難以理解。

額外的，每次父級組件發(fā)生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應(yīng)該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。

子組件想修改時，只能通過 $emit 派發(fā)一個自定義事件，父組件接收到后，由父組件修改。

有兩種常見的試圖改變一個 prop 的情形 :

這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用。在這種情況下，最好定義一個本地的 data 屬性并將這個 prop 用作其初始值：

????????props: ['initialCounter'],
?

這個 prop 以一種原始的值傳入且需要進行轉(zhuǎn)換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性

?????????props: ['size'],

5、computed 和 watch 的區(qū)別和運用的場景？

computed：是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；

watch：更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作；

運用場景：

當我們需要進行數(shù)值計算，并且依賴于其它數(shù)據(jù)時，應(yīng)該使用 computed，因為可以利用 computed 的緩存特性，避免每次獲取值時，都要重新計算；

當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，應(yīng)該使用 watch，使用 watch 選項允許我們執(zhí)行異步操作 ( 訪問一個 API )，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計算屬性無法做到的。

【web前端面試必問1】vue中 methods、computed、watch的區(qū)別_studyer網(wǎng)的博客-CSDN博客

6、直接給一個數(shù)組項賦值，Vue 能檢測到變化嗎？

由于 JavaScript 的限制，Vue 不能檢測到以下數(shù)組的變動：

當你利用索引直接設(shè)置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue

當你修改數(shù)組的長度時，例如：vm.items.length = newLength

為了解決第一個問題，Vue 提供了以下操作方法：

// Vue.set

為了解決第二個問題，Vue 提供了以下操作方法：?

// Array.prototype.splice?

7、談?wù)勀銓?Vue 生命周期的理解？

（1）生命周期是什么？

Vue 實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載 Dom -> 渲染、更新 -> 渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。

（2）各個生命周期的作用

8、Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序？

Vue 的父組件和子組件生命周期鉤子函數(shù)執(zhí)行順序可以歸類為以下 4 部分：

加載渲染過程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子組件更新過程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父組件更新過程

父 beforeUpdate -> 父 updated

銷毀過程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

9、在哪個生命周期內(nèi)調(diào)用異步請求？

可以在鉤子函數(shù) created、beforeMount、mounted 中進行調(diào)用，因為在這三個鉤子函數(shù)中，data 已經(jīng)創(chuàng)建，可以將服務(wù)端端返回的數(shù)據(jù)進行賦值。但是本人推薦在 created 鉤子函數(shù)中調(diào)用異步請求，因為在 created 鉤子函數(shù)中調(diào)用異步請求有以下優(yōu)點：

能更快獲取到服務(wù)端數(shù)據(jù)，減少頁面 loading 時間；

ssr 不支持 beforeMount 、mounted 鉤子函數(shù)，所以放在 created 中有助于一致性；

10、在什么階段才能訪問操作DOM？

在鉤子函數(shù) mounted 被調(diào)用前，Vue 已經(jīng)將編譯好的模板掛載到頁面上，所以在 mounted 中可以訪問操作 DOM。vue 具體的生命周期示意圖可以參見如下，理解了整個生命周期各個階段的操作，關(guān)于生命周期相關(guān)的面試題就難不倒你了。

11、父組件可以監(jiān)聽到子組件的生命周期嗎？

比如有父組件 Parent 和子組件 Child，如果父組件監(jiān)聽到子組件掛載 mounted 就做一些邏輯處理，可以通過以下寫法實現(xiàn)：

// Parent.vue
以上需要手動通過 $emit 觸發(fā)父組件的事件，更簡單的方式可以在父組件引用子組件時通過 @hook 來監(jiān)聽即可，如下所示：

// ?Parent.vue
當然 @hook 方法不僅僅是可以監(jiān)聽 mounted，其它的生命周期事件，例如：created，updated 等都可以監(jiān)聽。

12、談?wù)勀銓?keep-alive 的了解？

keep-alive 是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，避免重新渲染，其有以下特性：?

一般結(jié)合路由和動態(tài)組件一起使用，用于緩存組件；

提供 include 和 exclude 屬性，兩者都支持字符串或正則表達式， include 表示只有名稱匹配的組件會被緩存，exclude 表示任何名稱匹配的組件都不會被緩存，其中 exclude 的優(yōu)先級比 include 高；

對應(yīng)兩個鉤子函數(shù) activated 和 deactivated ，當組件被激活時，觸發(fā)鉤子函數(shù) activated，當組件被移除時，觸發(fā)鉤子函數(shù) deactivated。

13、組件中 data 為什么是一個函數(shù)？

為什么組件中的 data 必須是一個函數(shù)，然后 return 一個對象，而 new Vue 實例里，data 可以直接是一個對象？

// data
因為組件是用來復(fù)用的，且 JS 里對象是引用關(guān)系，如果組件中 data 是一個對象，那么這樣作用域沒有隔離，子組件中的 data 屬性值會相互影響，如果組件中 data 選項是一個函數(shù)，那么每個實例可以維護一份被返回對象的獨立的拷貝，組件實例之間的 data 屬性值不會互相影響；而 new Vue 的實例，是不會被復(fù)用的，因此不存在引用對象的問題。

14、v-model 的原理？

我們在 vue 項目中主要使用 v-model 指令在表單 input、textarea、select 等元素上創(chuàng)建雙向數(shù)據(jù)綁定，我們知道 v-model 本質(zhì)上不過是語法糖，v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：

text 和 textarea 元素使用 value 屬性和 input 事件；

checkbox 和 radio 使用 checked 屬性和 change 事件；

select 字段將 value 作為 prop 并將 change 作為事件。

以 input 表單元素為例：

<input v-model='something'>
如果在自定義組件中，v-model 默認會利用名為 value 的 prop 和名為 input 的事件，如下所示：

15、Vue 組件間通信有哪幾種方式？

Vue 組件間通信是面試常考的知識點之一，這題有點類似于開放題，你回答出越多方法當然越加分，表明你對 Vue 掌握的越熟練。Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信，下面我們分別介紹每種通信方式且會說明此種方法可適用于哪類組件間通信。?

（1）props / $emit 適用父子組件通信

這種方法是 Vue 組件的基礎(chǔ)，相信大部分同學耳聞能詳，所以此處就不舉例展開介紹。

（2）ref 與 children 適用父子組件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例

children：訪問父 / 子實例

（3）EventBus （on）適用于父子、隔代、兄弟組件通信

這種方法通過一個空的 Vue 實例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件，從而實現(xiàn)任何組件間的通信，包括父子、隔代、兄弟組件。

（4）listeners 適用于隔代組件通信

attrs" 傳入內(nèi)部組件。通常配合 inheritAttrs 選項一起使用。

listeners" 傳入內(nèi)部組件

（5）provide / inject 適用于隔代組件通信

祖先組件中通過 provider 來提供變量，然后在子孫組件中通過 inject 來注入變量。provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態(tài)，跨級組件間建立了一種主動提供與依賴注入的關(guān)系。

（6）Vuex 適用于父子、隔代、兄弟組件通信

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個 Vuex 應(yīng)用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。

Vuex 的狀態(tài)存儲是響應(yīng)式的。當 Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。

改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化。

16、你使用過 Vuex 嗎？

（1）Vuex 的狀態(tài)存儲是響應(yīng)式的。當 Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。

（2）改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化。

主要包括以下幾個模塊：

State：定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)，可以在這里設(shè)置默認的初始狀態(tài)。

Getter：允許組件從 Store 中獲取數(shù)據(jù)，mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性。

Mutation：是唯一更改 store 中狀態(tài)的方法，且必須是同步函數(shù)。

Action：用于提交 mutation，而不是直接變更狀態(tài)，可以包含任意異步操作。

Module：允許將單一的 Store 拆分為多個 store 且同時保存在單一的狀態(tài)樹中。

17、使用過 Vue SSR 嗎？說說 SSR？

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染為服務(wù)端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標記"激活"為客戶端上完全可交互的應(yīng)用程序。

即：SSR大致的意思就是vue在客戶端將標簽渲染成的整個 html 片段的工作在服務(wù)端完成，服務(wù)端形成的html 片段直接返回給客戶端這個過程就叫做服務(wù)端渲染。

服務(wù)端渲染 SSR 的優(yōu)缺點如下：

（1）服務(wù)端渲染的優(yōu)點：

更好的 SEO：因為 SPA 頁面的內(nèi)容是通過 Ajax 獲取，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內(nèi)容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內(nèi)容；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中），所以搜索引擎爬取工具可以抓取渲染好的頁面；

更快的內(nèi)容到達時間（首屏加載更快）：SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進行頁面的渲染，文件下載等需要一定的時間等，所以首屏渲染需要一定的時間；SSR 直接由服務(wù)端渲染好頁面直接返回顯示，無需等待下載 js 文件及再去渲染等，所以 SSR 有更快的內(nèi)容到達時間；

（2) 服務(wù)端渲染的缺點：

更多的開發(fā)條件限制：例如服務(wù)端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)，這會導致一些外部擴展庫需要特殊處理，才能在服務(wù)端渲染應(yīng)用程序中運行；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 SPA 不同，服務(wù)端渲染應(yīng)用程序，需要處于 Node.js server 運行環(huán)境；

更多的服務(wù)器負載：在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預(yù)料在高流量環(huán)境 ( high traffic ) 下使用，請準備相應(yīng)的服務(wù)器負載，并明智地采用緩存策略。

如果沒有 SSR 開發(fā)經(jīng)驗的同學，可以參考本文作者的另一篇 SSR 的實踐文章《Vue SSR 踩坑之旅》，里面 SSR 項目搭建以及附有項目源碼。

18、vue-router 路由模式有幾種？

vue-router 有 3 種路由模式：hash、history、abstract，對應(yīng)的源碼如下所示：

switch (mode) {
其中，3 種路由模式的說明如下：

hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；

history : 依賴 HTML5 History API 和服務(wù)器配置。具體可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 運行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會自動強制進入這個模式.

19、能說下 vue-router 中常用的 hash 和 history 路由模式實現(xiàn)原理嗎？

（1）hash 模式的實現(xiàn)原理

早期的前端路由的實現(xiàn)就是基于 location.hash 來實現(xiàn)的。其實現(xiàn)原理很簡單，location.hash 的值就是 URL 中 # 后面的內(nèi)容。比如下面這個網(wǎng)站，它的 location.hash 的值為 '#search'：

https://www.word.com#search
hash 路由模式的實現(xiàn)主要是基于下面幾個特性：

URL 中 hash 值只是客戶端的一種狀態(tài)，也就是說當向服務(wù)器端發(fā)出請求時，hash 部分不會被發(fā)送；

hash 值的改變，都會在瀏覽器的訪問歷史中增加一個記錄。因此我們能通過瀏覽器的回退、前進按鈕控制hash 的切換；

可以通過 a 標簽，并設(shè)置 href 屬性，當用戶點擊這個標簽后，URL 的 hash 值會發(fā)生改變；或者使用 JavaScript 來對 loaction.hash 進行賦值，改變 URL 的 hash 值；

我們可以使用 hashchange 事件來監(jiān)聽 hash 值的變化，從而對頁面進行跳轉(zhuǎn)（渲染）。

（2）history 模式的實現(xiàn)原理

HTML5 提供了 History API 來實現(xiàn) URL 的變化。其中做最主要的 API 有以下兩個：history.pushState() 和 history.repalceState()。這兩個 API 可以在不進行刷新的情況下，操作瀏覽器的歷史紀錄。唯一不同的是，前者是新增一個歷史記錄，后者是直接替換當前的歷史記錄，如下所示：

window.history.pushState(null, null, path);
history 路由模式的實現(xiàn)主要基于存在下面幾個特性：

pushState 和 repalceState 兩個 API 來操作實現(xiàn) URL 的變化；

我們可以使用 popstate 事件來監(jiān)聽 url 的變化，從而對頁面進行跳轉(zhuǎn)（渲染）；

history.pushState() 或 history.replaceState() 不會觸發(fā) popstate 事件，這時我們需要手動觸發(fā)頁面跳轉(zhuǎn)（渲染）。

20、什么是 MVVM？

Model–View–ViewModel （MVVM）是一個軟件架構(gòu)設(shè)計模式，由微軟 WPF 和 Silverlight 的架構(gòu)師 Ken Cooper 和 Ted Peters 開發(fā)，是一種簡化用戶界面的事件驅(qū)動編程方式。由 John Gossman（同樣也是 WPF 和 Silverlight 的架構(gòu)師）于2005年在他的博客上發(fā)表?

MVVM 源自于經(jīng)典的 Model–View–Controller（MVC）模式，MVVM 的出現(xiàn)促進了前端開發(fā)與后端業(yè)務(wù)邏輯的分離，極大地提高了前端開發(fā)效率，MVVM 的核心是 ViewModel 層，它就像是一個中轉(zhuǎn)站（value converter），負責轉(zhuǎn)換 Model 中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用，該層向上與視圖層進行雙向數(shù)據(jù)綁定，向下與 Model 層通過接口請求進行數(shù)據(jù)交互，起呈上啟下作用。如下圖所示：

圖片

（1）View 層

View 是視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構(gòu)建。

（2）Model 層

Model 是指數(shù)據(jù)模型，泛指后端進行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控，對于前端來說就是后端提供的 api 接口。

（3）ViewModel 層

ViewModel 是由前端開發(fā)人員組織生成和維護的視圖數(shù)據(jù)層。在這一層，前端開發(fā)者對從后端獲取的 Model 數(shù)據(jù)進行轉(zhuǎn)換處理，做二次封裝，以生成符合 View 層使用預(yù)期的視圖數(shù)據(jù)模型。

需要注意的是 ViewModel 所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分，而 Model 層的數(shù)據(jù)模型是只包含狀態(tài)的，比如頁面的這一塊展示什么，而頁面加載進來時發(fā)生什么，點擊這一塊發(fā)生什么，這一塊滾動時發(fā)生什么這些都屬于視圖行為（交互），視圖狀態(tài)和行為都封裝在了 ViewModel 里。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。

MVVM 框架實現(xiàn)了雙向綁定，這樣 ViewModel 的內(nèi)容會實時展現(xiàn)在 View 層，前端開發(fā)者再也不必低效又麻煩地通過操縱 DOM 去更新視圖，MVVM 框架已經(jīng)把最臟最累的一塊做好了，我們開發(fā)者只需要處理和維護 ViewModel，更新數(shù)據(jù)視圖就會自動得到相應(yīng)更新。

這樣 View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)，而是 ViewModel 的數(shù)據(jù)，由 ViewModel 負責與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個解耦是至關(guān)重要的，它是前后端分離方案實施的重要一環(huán)。

我們以下通過一個 Vue 實例來說明 MVVM 的具體實現(xiàn)，有 Vue 開發(fā)經(jīng)驗的同學應(yīng)該一目了然：

（1）View 層

<div id="app">
（2）ViewModel 層

var app = new Vue({
（3） Model 層

21、Vue 雙向綁定原理

Vue 數(shù)據(jù)雙向綁定主要是指：數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)，如下圖所示：

即：

輸入框內(nèi)容變化時，Data 中的數(shù)據(jù)同步變化。即 View => Data 的變化。

Data 中的數(shù)據(jù)變化時，文本節(jié)點的內(nèi)容同步變化。即 Data => View 的變化。

其中，View 變化更新 Data ，可以通過事件監(jiān)聽的方式來實現(xiàn)，所以 Vue 的數(shù)據(jù)雙向綁定的工作主要是如何根據(jù) Data 變化更新 View。

Vue 主要通過以下 4 個步驟來實現(xiàn)數(shù)據(jù)雙向綁定的：

實現(xiàn)一個監(jiān)聽器 Observer：對數(shù)據(jù)對象進行遍歷，包括子屬性對象的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter。這樣的話，給這個對象的某個值賦值，就會觸發(fā) setter，那么就能監(jiān)聽到了數(shù)據(jù)變化。

實現(xiàn)一個解析器 Compile：解析 Vue 模板指令，將模板中的變量都替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，調(diào)用更新函數(shù)進行數(shù)據(jù)更新。

實現(xiàn)一個訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁，主要的任務(wù)是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時，觸發(fā)解析器 Compile 中對應(yīng)的更新函數(shù)。

實現(xiàn)一個訂閱器 Dep：訂閱器采用發(fā)布-訂閱設(shè)計模式，用來收集訂閱者 Watcher，對監(jiān)聽器 Observer 和訂閱者 Watcher 進行統(tǒng)一管理。

以上四個步驟的流程圖表示如下，如果有同學理解不大清晰的，可以查看作者專門介紹數(shù)據(jù)雙向綁定的文章《0 到 1 掌握：Vue 核心之數(shù)據(jù)雙向綁定》，有進行詳細的講解、以及代碼 demo 示例。

22、Vue 框架怎么實現(xiàn)對象和數(shù)組的監(jiān)聽？

如果被問到 Vue 怎么實現(xiàn)數(shù)據(jù)雙向綁定，大家肯定都會回答通過 Object.defineProperty() 對數(shù)據(jù)進行劫持，但是 Object.defineProperty() 只能對屬性進行數(shù)據(jù)劫持，不能對整個對象進行劫持，同理無法對數(shù)組進行劫持，但是我們在使用 Vue 框架中都知道，Vue 能檢測到對象和數(shù)組（部分方法的操作）的變化，那它是怎么實現(xiàn)的呢？我們查看相關(guān)代碼如下：

通過以上 Vue 源碼部分查看，我們就能知道 Vue 框架是通過遍歷數(shù)組和遞歸遍歷對象，從而達到利用 Object.defineProperty() 也能對對象和數(shù)組（部分方法的操作）進行監(jiān)聽。

23、Proxy 與 Object.defineProperty 優(yōu)劣對比

Proxy 的優(yōu)勢如下:

Proxy 可以直接監(jiān)聽對象而非屬性；

Proxy 可以直接監(jiān)聽數(shù)組的變化；

Proxy 有多達 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；

Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改；

Proxy 作為新標準將受到瀏覽器廠商重點持續(xù)的性能優(yōu)化，也就是傳說中的新標準的性能紅利；

Object.defineProperty 的優(yōu)勢如下:

兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個大版本( 3.0 )才能用 Proxy 重寫。

24、Vue 怎么用 vm.$set() 解決對象新增屬性不能響應(yīng)的問題？

受現(xiàn)代 JavaScript 的限制，Vue 無法檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。

但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 來實現(xiàn)為對象添加響應(yīng)式屬性，那框架本身是如何實現(xiàn)的呢？

我們查看對應(yīng)的 Vue 源碼：vue/src/core/instance/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
我們閱讀以上源碼可知，vm.$set 的實現(xiàn)原理是：

如果目標是數(shù)組，直接使用數(shù)組的 splice 方法觸發(fā)相應(yīng)式；

如果目標是對象，會先判讀屬性是否存在、對象是否是響應(yīng)式，最終如果要對屬性進行響應(yīng)式處理，則是通過調(diào)用 defineReactive 方法進行響應(yīng)式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調(diào)用的方法）

25、虛擬 DOM 的優(yōu)缺點？

優(yōu)點：

保證性能下限：框架的虛擬 DOM 需要適配任何上層 API 可能產(chǎn)生的操作，它的一些 DOM 操作的實現(xiàn)必須是普適的，所以它的性能并不是最優(yōu)的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虛擬 DOM 至少可以保證在你不需要手動優(yōu)化的情況下，依然可以提供還不錯的性能，即保證性能的下限；

無需手動操作 DOM：我們不再需要手動去操作 DOM，只需要寫好 View-Model 的代碼邏輯，框架會根據(jù)虛擬 DOM 和數(shù)據(jù)雙向綁定，幫我們以可預(yù)期的方式更新視圖，極大提高我們的開發(fā)效率；

跨平臺：虛擬 DOM 本質(zhì)上是 JavaScript 對象,而 DOM 與平臺強相關(guān)，相比之下虛擬 DOM 可以進行更方便地跨平臺操作，例如服務(wù)器渲染、weex 開發(fā)等等。

缺點:

無法進行極致優(yōu)化：雖然虛擬 DOM + 合理的優(yōu)化，足以應(yīng)對絕大部分應(yīng)用的性能需求，但在一些性能要求極高的應(yīng)用中虛擬 DOM 無法進行針對性的極致優(yōu)化。

26、虛擬 DOM 實現(xiàn)原理？

虛擬 DOM 的實現(xiàn)原理主要包括以下 3 部分：

用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；

diff 算法 — 比較兩棵虛擬 DOM 樹的差異；

pach 算法 — 將兩個虛擬 DOM 對象的差異應(yīng)用到真正的 DOM 樹。

如果對以上 3 個部分還不是很了解的同學，可以查看本文作者寫的另一篇詳解虛擬 DOM 的文章《深入剖析：Vue核心之虛擬DOM》

27、Vue 中的 key 有什么作用？

key 是為 Vue 中 vnode 的唯一標記，通過這個 key，我們的 diff 操作可以更準確、更快速。

Vue 的 diff 過程可以概括為：oldCh 和 newCh 各有兩個頭尾的變量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它們會新節(jié)點和舊節(jié)點會進行兩兩對比，即一共有4種比較方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，如果以上 4 種比較都沒匹配，如果設(shè)置了key，就會用 key 再進行比較，在比較的過程中，遍歷會往中間靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一個已經(jīng)遍歷完了，就會結(jié)束比較。具體有無 key 的 diff 過程，可以查看作者寫的另一篇詳解虛擬 DOM 的文章《深入剖析：Vue核心之虛擬DOM》

所以 Vue 中 key 的作用是：key 是為 Vue 中 vnode 的唯一標記，通過這個 key，我們的 diff 操作可以更準確、更快速

更準確：因為帶 key 就不是就地復(fù)用了，在 sameNode 函數(shù) a.key === b.key 對比中可以避免就地復(fù)用的情況。所以會更加準確。

更快速：利用 key 的唯一性生成 map 對象來獲取對應(yīng)節(jié)點，比遍歷方式更快，源碼如下：

function createKeyToOldIdx (children, beginIdx, endIdx) {

28、你有對 Vue 項目進行哪些優(yōu)化？

如果沒有對 Vue 項目沒有進行過優(yōu)化總結(jié)的同學，可以參考本文作者的另一篇文章《 Vue 項目性能優(yōu)化 — 實踐指南》，文章主要介紹從 3 個大方面，22 個小方面詳細講解如何進行 Vue 項目的優(yōu)化。

（1）代碼層面的優(yōu)化

v-if 和 v-show 區(qū)分使用場景

computed 和 watch 區(qū)分使用場景

v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if

長列表性能優(yōu)化

事件的銷毀

圖片資源懶加載

路由懶加載

第三方插件的按需引入

優(yōu)化無限列表性能

服務(wù)端渲染 SSR or 預(yù)渲染

（2）Webpack 層面的優(yōu)化

Webpack 對圖片進行壓縮

減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼

提取公共代碼

模板預(yù)編譯

提取組件的 CSS

優(yōu)化 SourceMap

構(gòu)建結(jié)果輸出分析

Vue 項目的編譯優(yōu)化

（3）基礎(chǔ)的 Web 技術(shù)的優(yōu)化

開啟 gzip 壓縮

瀏覽器緩存

CDN 的使用

使用 Chrome Performance 查找性能瓶頸

29、對于即將到來的 vue3.0 特性你有什么了解的嗎？

Vue 3.0 正走在發(fā)布的路上，Vue 3.0 的目標是讓 Vue 核心變得更小、更快、更強大，因此 Vue 3.0 增加以下這些新特性：

（1）監(jiān)測機制的改變

3.0 將帶來基于代理 Proxy 的 observer 實現(xiàn)，提供全語言覆蓋的反應(yīng)性跟蹤。這消除了 Vue 2 當中基于 Object.defineProperty 的實現(xiàn)所存在的很多限制：

只能監(jiān)測屬性，不能監(jiān)測對象

檢測屬性的添加和刪除；

檢測數(shù)組索引和長度的變更；

支持 Map、Set、WeakMap 和 WeakSet。

新的 observer 還提供了以下特性：

用于創(chuàng)建 observable 的公開 API。這為中小規(guī)模場景提供了簡單輕量級的跨組件狀態(tài)管理解決方案。

默認采用惰性觀察。在 2.x 中，不管反應(yīng)式數(shù)據(jù)有多大，都會在啟動時被觀察到。如果你的數(shù)據(jù)集很大，這可能會在應(yīng)用啟動時帶來明顯的開銷。在 3.x 中，只觀察用于渲染應(yīng)用程序最初可見部分的數(shù)據(jù)。

更精確的變更通知。在 2.x 中，通過 Vue.set 強制添加新屬性將導致依賴于該對象的 watcher 收到變更通知。在 3.x 中，只有依賴于特定屬性的 watcher 才會收到通知。

不可變的 observable：我們可以創(chuàng)建值的“不可變”版本（即使是嵌套屬性），除非系統(tǒng)在內(nèi)部暫時將其“解禁”。這個機制可用于凍結(jié) prop 傳遞或 Vuex 狀態(tài)樹以外的變化。

更好的調(diào)試功能：我們可以使用新的 renderTracked 和 renderTriggered 鉤子精確地跟蹤組件在什么時候以及為什么重新渲染。

（2）模板

模板方面沒有大的變更，只改了作用域插槽，2.x 的機制導致作用域插槽變了，父組件會重新渲染，而 3.0 把作用域插槽改成了函數(shù)的方式，這樣只會影響子組件的重新渲染，提升了渲染的性能。

同時，對于 render 函數(shù)的方面，vue3.0 也會進行一系列更改來方便習慣直接使用 api 來生成 vdom 。

（3）對象式的組件聲明方式

vue2.x 中的組件是通過聲明的方式傳入一系列 option，和 TypeScript 的結(jié)合需要通過一些裝飾器的方式來做，雖然能實現(xiàn)功能，但是比較麻煩。

3.0 修改了組件的聲明方式，改成了類式的寫法，這樣使得和 TypeScript 的結(jié)合變得很容易。

此外，vue 的源碼也改用了 TypeScript 來寫。其實當代碼的功能復(fù)雜之后，必須有一個靜態(tài)類型系統(tǒng)來做一些輔助管理。

現(xiàn)在 vue3.0 也全面改用 TypeScript 來重寫了，更是使得對外暴露的 api 更容易結(jié)合 TypeScript。靜態(tài)類型系統(tǒng)對于復(fù)雜代碼的維護確實很有必要。

（4）其它方面的更改

vue3.0 的改變是全面的，上面只涉及到主要的 3 個方面，還有一些其他的更改：

支持自定義渲染器，從而使得 weex 可以通過自定義渲染器的方式來擴展，而不是直接 fork 源碼來改的方式。

支持 Fragment（多個根節(jié)點）和 Protal（在 dom 其他部分渲染組建內(nèi)容）組件，針對一些特殊的場景做了處理。

總結(jié)

以上是生活随笔為你收集整理的Web 前端基础知识面试大全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： GPS数据格式处理
下一篇：计算机一级操作题题库在线,全国计算机一级

HTML

Web 前端基础知识面试大全

一、HTML

1.對 HTML 語義化的理解

2.區(qū)別：src 和 href

3.DOCTYPE 的作用

4.HTML5 的新特性

5.script 標簽中的 defer 和 async

6. 行內(nèi)元素 塊級元素 空元素

7.meta 標簽

8.JPG和PNG的區(qū)別

二、CSS

1.CSS 選擇器，優(yōu)先級

2.CSS 動畫

3.CSS選擇器效率從高到低的排序如下：

4.flex 布局

5.雙飛翼布局

6.position 有幾個值，absolute 是相對于誰的定位。

三.Javascript

1.原始值和引用值類型及區(qū)別

2.JavaScript 數(shù)據(jù)類型以及 typeof 返回值

3.如何判斷一個對象是 Array 還是 Object？

4.類數(shù)組與數(shù)組的區(qū)別：

5.數(shù)組常用的api

6.bind、call、apply的區(qū)別：

7.new原理

8.閉包

9.原型和原型鏈

10.實現(xiàn)繼承的幾種方式以及他們的優(yōu)缺點

11.淺拷貝與深拷貝

12.作用域

13.防抖與節(jié)流

14.Dom節(jié)點操作常用方法

15.BOM屬性對象方法

16.ajax的請求過程

17.總結(jié)JS中string、math、array的常用的方法

18.js中“==”與"==="的區(qū)別

19.JS事件綁定（addEventListener）和普通事件（onclick）有什么區(qū)別

20.重繪和回流

21.函數(shù)柯里化及其通用封裝

22.JS中EventLoop事件循環(huán)機制

23.前端性能優(yōu)化

24.Object.create 和new?

25.Location 對象

26.跨域解決方案?

27.JS 垃圾回收機制?

28.前端進階之setTimeout 倒計時為什么會出現(xiàn)誤差？?

29.get請求和post請求的區(qū)別

30.數(shù)組去重的12中方法?

四、數(shù)據(jù)結(jié)構(gòu)

五、計網(wǎng)?

1.ios七層模型

?2.TCP 和 UDP 的區(qū)別。

3.HTTP 2.0 新增

六、ES6

1.export和import

2.Promise

3.let、const和var的概念與區(qū)別

4.變量提升與暫時性死區(qū)

5. Symbol

6.Object.keys()方法

7.Object.assign()

8.set數(shù)據(jù)結(jié)構(gòu)

9.Map數(shù)據(jù)結(jié)構(gòu)

10.Proxy

11.Reflect

12.模板字符串

13.箭頭函數(shù)（=>）

14.for…of 循環(huán)

15.jQuery的選擇器怎么實現(xiàn)的

八.VUE

1、說說你對 SPA 單頁面的理解，它的優(yōu)缺點分別是什么？

2、v-show 與 v-if 有什么區(qū)別？

3、Class 與 Style 如何動態(tài)綁定？

4、怎樣理解Vue的單向數(shù)據(jù)流？

5、computed 和 watch 的區(qū)別和運用的場景？

6、直接給一個數(shù)組項賦值，Vue 能檢測到變化嗎？

7、談?wù)勀銓?Vue 生命周期的理解？

（1）生命周期是什么？

（2）各個生命周期的作用

6. 行內(nèi)元素塊級元素空元素

24、Vue 怎么用 vm.$set() 解決對象新增屬性不能響應(yīng)的問題？