金三銀四，這些JavaScript、ES6前端面試題及答案決議您看了嗎？

1、js基本資料型別有哪些？

答：字串String，數值Number，布爾 boolean，null，undefined，物件，陣列

2、Ajax如何使用

一個完整的AJAX請求包括五個步驟：

1. 創建XMLHTTPRequest物件

2. 使用open方法創建http請求，并設定請求地址:
   xhr.open(get/post , url , async , true(異步) )經常使用前三個引數

3. 設定發送的資料，用send發送請求

4. 注冊事件（給ajax設定事件）

5. 獲取相應并更新頁面

3、如何判斷一個資料型別是NaN？

NaN 非數字 但是用typeof 檢測是 Number 型別

• 利用NaN的定義，用typeof判斷是否為Number型別并且判斷是否滿足isnan
• 利用NaN是唯一一個不等于任何自身的特點 n！ == n
• 利用ES6中提供的Object.is()方法（判斷兩個值是否相等）n==nan

js中null與undefined的區別：

相同點：用if判斷時，；兩者都會被轉為false
不同點：

• number轉換的值不同 number（null）為0 number（undefined）為NaN
• null表示一個被值被定義了，但是這個值是空值
• undefined 變數宣告但未賦值

4、閉包是什么？有什么特性？對頁面有什么影響？

閉包可以簡單理解成：定義在一個函式內部的函式，其中一個內部函式在包含他們的外部函式之外被呼叫時，就會形成閉包，
特點：

• 函式嵌套函式，
• 函式內部可以參考外部的引數和變數，
• 引數和變數不會被垃圾回識訓制回收，
  使用：
• 讀取函式內部的變數；
• 這些變數的值始終保存在記憶體中，不會再外層函式呼叫后被自動清除，
  優點：
• 變數長期駐扎在記憶體中；
• 避免全域變數的污染；
• 私有成員的存在；
  **缺點：**會造成記憶體泄漏

5、談談js中常見的記憶體泄漏：

• 意外的全域變數
• 被遺忘的計時器或回呼函式
• 脫離DOM的參考
• 閉包

6、事件委托是什么？如何確定事件源（Event.target 誰呼叫誰就是事件源）

js高程上將：事件委托就是利用事件冒泡，只制定一個時間處理程式，就可以管理某一型別的所有事件，

事件委托，稱事件代理，是js中很常見的系結事件的技巧，事件委托就是把原本需要系結在子元素的所有回應事件委托給父元素，讓父元素擔當事件監聽的職務，事件委托的原理是DOM元素的事件冒泡，

7、什么是事件冒泡？怎么阻止事件冒泡？

一個事件觸發后，會在子元素和父元素之間傳播，這種傳播分為三個階段：

• 捕獲階段：從window物件傳導到目標節點（從里到外）
• 目標階段：在目標節點上觸發
• 冒泡階段：從目標節點傳回到window物件（從里到外）

事件委托/事件代理就是利用事件冒泡的機制把里層需要回應的事件系結到外層

阻止事件冒泡

1. 標準寫法：e.stopPropagation()
2. IE6-8的非標準寫法：e.cancelBubble = true

8、本地存盤與cookie的區別

cookie是小餅干的意思，說以cookie確實非常小，他的大小限制為4kb左右，他的主要用途有保存用戶登錄資訊，

localStorage

localStorage是HTML5標準中新加入的技術，他并不是什么劃時代的新東西，早在IE6時代，就有一個叫userData的東西用于本地存盤，而當時考慮到瀏覽器的兼容性，更通用的方案是Flsah，而如今，localStorage北大多數瀏覽器所支持，如果你的網站需要兼容IE6+，那么使用userData方案是不錯的選擇

sessionStorage

sessionStorage與localStorage的介面類似，但保存資料的生命周期與localStorage不同，session這個詞的翻譯的意思就是“會話”，而sessionStorage是一個前端的概念，他只是可以將一部分資料在當前會話中保存下來，重繪頁面資料依舊存在，但當頁面關閉后，
sessionStorage中的資料就會被清空，

散著的異同

9、ES6新特性

const和let、模板字串、箭頭函式、函式的引數默認值、物件和陣列解構、for…of 和 for…in、ES6中的類

10、談談對let、var與const的區別的理解

• var宣告的變數會掛載在window上，而let 和const 宣告的變數不會
• var 宣告的變數存在變數提升，let和const不存在變數提升
• 同一作用域下var 可以宣告同名變數，let 和const 不可以
• let 和const 宣告會形成塊級作用域
• let 暫存死區
• const 一旦宣告必須賦值，不能用null占位，宣告后不能在修改，如果宣告的是復合資料型別，可以修改屬性

11、陣列方法有哪些？請簡述：

• push() 從后面添加元素，回傳值為添加完后新陣列的長度
• arr.pop() 從后面洗掉元素，只能是一個，回傳值是洗掉的元素
• arr.shift() 從前面洗掉元素，只能洗掉一個 回傳值是洗掉的元素
• arr.unshift() 從前面添加元素，回傳值添加完后的陣列的長度
• arr.splice(i,n) 洗掉從i(索引值)開始之后的那個元素，回傳值是洗掉的元素
• arr.concat() 連接兩個陣列 回傳值為連接后的新陣列
• str.split() 將字串轉化為陣列
• arr.sort() 將陣列進行排序，回傳值是排好的陣列，默認是按照最左邊的數字進行排序，不是按照數字大小進行排序的
• arr.reverse() 將陣列反轉，回傳值是反轉后的陣列
• arr.slice(start,end) 切去索引值start到索引值end的陣列，不包含end索引值的值，回傳值是切出來的陣列
• arr.forEach(callback) 遍歷陣列，無return 即使有return，也不會回傳任何值，并且會影響原來的陣列
• arr.map(callback) 映射陣列(遍歷陣列)，有return 回傳一個新的陣列
• arr.filter(callback) 過濾陣列，回傳一個滿足要求的陣列

12、說出兩種以上陣列去重的方法

• 使用indexof（）方法
• 使用lastindexof() 方法和indexof() 方法一樣 indexof從頭部開始匹配 lastindexof從尾部匹配
• ES6的set結構 set不接受重復資料
• 使用sort方法先將陣列升序排序，然后與相鄰的比較，如果不同則存入新陣列
• 使用filter和indexof方法
• 使用ES6的set和擴展運算子
• 使用set和Array.from() 方法 array.from可以將set結構轉成陣列
• 使用splice 和雙重回圈
• 使用includes方法

13、什么是面試物件（OOP）請簡述

面向物件是一種思想，是基于面向程序而言的，就是說面向物件是將功能等通過物件來實作，將功能封裝進物件之中，讓物件去實作具體的細節；這種思想是將資料作為第一位，這是對資料的一種優化，操作起來更加的方便，簡化了程序，
js本身是沒有class型別的，但是每個函式都有一個prototype屬性，prototype指向一個物件，當函式作為建構式時，prototype就起到類似class的作用

面向物件有三個特點

• 封裝（隱藏物件的屬性和實作細節，對外提供公共訪問方式）
• 繼承（提高代碼復用性，繼承是多型的前提）
• 多型（是父類或介面定義的參考變數可以指向子類或具體實作類的實體物件）

14、說說普通函式和建構式的區別

• 建構式也是一個函式，創建方式和普通函式一樣，但是建構式習慣上首字母大寫
• 呼叫方式不一樣，普通函式直接呼叫，建構式要用關鍵字new來呼叫
• 呼叫時，建構式內部會創建一個新物件，就是實體，普通函式不回創建新的物件
• 建構式內部的this指向實體，普通函式內部的this指向呼叫函式的物件（如果沒有呼叫，默認為window）
• 建構式默認的回傳值是創建的物件（也就是實體），普通函式的回傳值有return陳述句決定
• 建構式的函式名與類名相同

15、請簡述原型、原型鏈、（原型）繼承

什么是原型？
??任何物件實體都有一個原型，也叫原型物件，這個原型物件由物件的內置屬性proto指向它的建構式的prototype指向的物件，即任何物件都是由一個建構式創建的，但是不是每一個物件都有prototype，只有方法才有prototype，

什么是原型鏈？
??原型鏈基本思想是利用利用原型讓一個參考型別繼承另一個參考型別的屬性和方法，我們知道，每個建構式都有一個原型物件，每個原型物件都有一個指向建構式的指標，而實體又包含一個指向原型物件的內部指標

??原型鏈的核心就是依賴物件的proto的指向，當自身不存在的屬性時，就一層層的扒出創建物件的建構式，直至到Object時，就沒有proto指向了，

??因為proto實質找的是prototype，所以我們只要找到這個鏈條上的建構式的prototype，其中Obiect.prototype是沒有proto屬性的，它==null，

??每個建構式都有一個原型物件，原型物件都包含一個指向建構式物件內部的指標，我們讓原型物件（1）等于另一個原型物件（2），此時原型物件（2）將包含一個指向原型物件（1）的指標，再讓原型物件（2）的實體等于原型物件（3），如此層層遞進就構成了實體和原型的鏈條，這就是原型練得概念

什么是原型繼承？
??每個建構式都有一個原型物件，原型物件都包含一個指向建構式理想指標（constructor），而實體物件都包含一個指向原型物件的內部指標（proto），如果讓原型物件等于另一個原型物件的實體，此時的原型物件將包含一個指向另一個原型的指標（proto），另一個原型也包含著一個指向另一個建構式的指標
(constructor)，假如另一個原型又是另一個型別的實體……這就構成了實體與原型的鏈條，也叫原型鏈
原型繼承是js的一種繼承方式，原型鏈作為實作繼承的主要方法,其基本思路是利用原型讓一個參考型別
繼承另一個參考型別的屬性和方法,

**原型繼承：**利用原型中的成員可以被和其他相關的物件共享這一特性，可以實作繼承，這種實作繼承的方式，就叫原型繼承，

16、Promise的理解

1. 什么是Promise？我們用Promise來解決什么問題？
   我們都知道，Promise是承諾的意思，承諾它過一段時間會給你一個結果，
   Promise是一種解決異步操作編程的方案，相比回呼函式和事件更合理和更強大，
   從語法上講，promise是一個物件，從它可以獲取異步操作的資訊，

2. Promise有三種狀態
   1、pending 初始狀態也叫等待狀態
   2、fulfiled成功轉態
   3、rejected失敗狀態

3. Promise的兩個特點
   1、Promise物件的狀態不受外界影響
   2、Promise的狀態一旦改變，就不會再變，任何時候都可以得到這個結果，狀態不可逆

4. Promise的三個缺點
   1、無法取消Promise，一旦新建他就會立即執行，無法中途取消
   2、如果不設定回呼函式，Promise內部拋出的錯誤，不會映到外部
   3、當處于pending（等待）狀態時，無法得知目前進展到哪一個階段，是剛剛開始還是即將完成

5. Promise是用來解決兩個問題的
   1、回呼地獄，代碼難以維護，嘗嘗第一個的函式的輸出是第二個函式的輸入這種現象
   2、promise可以支持多并發的請求，獲取并發請求中的資料這個

這個Promise可以解決異步的問題嗎，本身不能說Promise是異步的

17、請簡述async的用法

Async就是generation和Promise的語法糖，async就是將generation的 * 換成async，將yiled換成awite，

函式前必須加一個async，異步操作方法前加一個await關鍵字，意思就是等一下，執行完了再繼續走，注意：await只能在async函式中運行，否則會報錯

Promise如果回傳的是一個錯誤的結果，如果沒有做例外處理就會報錯，所以try…catch捕獲一下例外就可以了，

18、一個頁面從輸入url到頁面加載顯示完成，這個程序都發生了什么？

分四個步驟

1. 當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個執行緒來處理這個請求，同時在遠程DNS服務器上啟動一個DNS查詢，這能使瀏覽器獲得請求對應的IP地址，
2. 瀏覽器與遠程Web服務器通過TCP三次握手協商來建立一個TCP/IPl連接，該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在瀏覽器和服務端之間傳遞，該握手首先由客戶端嘗試建立起通信，然后服務器回應并接收客戶端的請求，最后由客戶端最后由客戶端發出請求已被接受的報文，
3. 一旦TCPIP連接建立，瀏覽器會通過該連接向遠程服務器發送HTTP的GET請求，遠程服務器找到資源并使用HTTP回應回傳該資源
4. 此時，Web服務器提供資源服務，客戶端開始下載資源，

19、請簡述js中 .call()與 .apply() 的區別，

• apply：呼叫一個物件的一個方法，用另一個物件替換當前物件，
• call：呼叫一個物件的一個方法，用另一個物件替當前物件

??從定義中可以看出，call和apply都是呼叫物件的一個方法，用另一個物件替換當前物件，而不同之處在于傳遞的引數，apply最多只能有兩個引數—新this物件和一個陣列argArray，如果arg不是陣列則會報錯，

??相同點：兩個方法產生的作用是完全一樣的，call，apply作用就是借用別人的方法來呼叫，就像呼叫自己的一樣，

??不同點：方法傳遞的引數不同，

20、為什么會造成跨域？請簡述同源策略，

出現跨域問題的原因：
在前后端分離的模式下，前后端的域名是不一致的，此時就會發生跨域訪問問題，在請求的程序中我們要想獲取資料一般都是post/get請求，所以…跨域問題出現，

同源策略：
是由NetScape提出的一個著名的安全策略，所謂的同源，指的是協議，域名，埠號相同，瀏覽器出于安全方面的考慮，只允許本域名下的介面互動，不同源的客戶端腳本，在沒有明授權的情況下，不能讀寫對方的資源，

21、請說說This的指向問題

在JavaScript中，this通常指向我們正在執行的函式本身，或者是指向該函式所屬的物件，

• 全域的this → 指向的是Window
• 物件中的this → 指向其本身
• 事件中的this → 指向事件物件

22、什么是jsonp 作業原理是什么？他為什么不是真正的ajax？

jsonp其實就是一個跨域解決方案，

js跨域請求資料是不可以的，但是js跨域請求js腳本是可以的，
所以可以把要請求的資料封裝成一個js陳述句，做一個方法的呼叫，
跨域請求js腳本可以得到此腳本，得到js腳本之后立即執行，
可以把資料作為引數傳遞到方法中，就可以獲得資料，從而解決跨域問題，

jsonp原理（動態創建scrpit標簽，回呼函式）
瀏覽器在js請求中，是允許通過script標簽的src跨域請求，可以在請求的結果中添加回呼方法名，在請求頁面中定義方法，就可以獲取到跨域請求的資料，

為什么不是真正的ajax？

• ajax和jsonp這兩種技術在呼叫方式上“看起來”很像，目的也不一樣，都是請求一個url，然后把服務器回傳的資料進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；
• 但ajax和jsonp其實本質上是不同的東西，ajax的核心是通過XmlHttpRequest獲取本頁面，而jsonp的核心則是動態添加
  < script>標簽來呼叫服務器提供的js腳本，
• 所以說ajsx和jsonp的區別不在于是否跨域，ajax通過服務端代理一樣可以實作跨域，jsonp本身也不排斥同域的資料的獲取，
• 還有就是，jsonp是一種方式或者說非強制協議，如同ajax一樣，他也不一定非要json格式來傳遞資料，如果你愿意，字串也行，只不過這樣不利于jsonp提供公開服務，

23、請說出簡單的類與繼承

創建類有三種：

• 使用function和this關鍵字
• 原型物件 用prototype和this關鍵字
• 使用Object，create()方法構造

繼承有六種：

• 原型繼承
• 借用建構式繼承
• 組合繼承
• 原型式繼承
• 寄生式繼承
• 寄生組合式繼承

24、簡述同步與異步的區別，阻塞與非阻塞的區別

同步（阻塞的）
異步（非阻塞的）

比如：同步，你在看電影，到吃飯時間了，但是你的電影沒有看完，你就等電影看完再去吃飯
??異步：你在看電影，到吃飯時間了，但是你的電影雖然沒有看完，但是你的點了外賣一邊吃一邊看

同步（阻塞）異步（非阻塞）這兩個關注的是程式在等待呼叫結果時的狀態

25、為什么js是弱型別語言？

弱型別語言實作相當于強型別語言來說，在強型別語言中，變數型別有很多種，比如int char float Boolean 不同型別的相互轉換有時需要強制轉換，而javascript只有一種型別var，為變數賦值時會自動判斷型別并轉換，所以是弱型別語言，

26、箭頭函式與普通函式的區別

• 箭頭函式是匿名函式，不能作為建構式，不能使用new
• 箭頭函式不能系結arguments，要用rest引數來解決
• 箭頭函式沒有原型屬性
• 箭頭函式的this永遠指向其背景關系的this
• 箭頭函式不能系結this，會捕獲其所在的背景關系的this值，作為自己的this值

27、For回圈與map回圈的區別？

For遍歷物件自身的和繼承可列舉的屬性，也就是說會包括那些原型鏈上的屬性
Map方法不會對空陣列進行檢測，map會回傳一個新陣列，不會對原陣列產生影響

28、原型和繼承，prototype，call和apply繼承的區別（第一個引數是相同的，第二個的區別在哪）

apply() 接收兩個引數，一個是函式運行的作用域（this），另一個是引數陣列，
call() 方法第一個引數與apply() 方法相同，但傳遞給函式的引數必須列舉出來，

29、深淺拷貝是什么？如何實作？

• 深拷貝：指標賦值，并且內容拷貝，
• 淺拷貝：只是簡單地指標賦值，
• 陣列淺拷貝：如果是陣列，可以使用陣列的一些方法實作：slice(),concat()回傳一個新陣列的特性實作拷貝，用擴展運算子spread實作
• 陣列深拷貝：JSON.parse(JSON.stringify())不僅適用于陣列還適用于物件，不能拷貝函式，undefined，symbol，

30、什么時候用深拷貝/淺拷貝？

無論深淺，都是需要的，當深拷貝發生時通常表明存在著一個聚合關系，當淺拷貝發生時，通常表明存在著相識關系
舉個簡單的例子：當實作一個組合模式Composite Pattern時通常都會實作深拷貝
當實作一個觀察者模式Observe Pattern時，就需要淺拷貝

31、什么是js記憶體泄露？

記憶體泄漏是指一塊被分配的記憶體既不能使用也不能回收，知道瀏覽器行程結束
釋放記憶體的方法：賦值為null

32、什么是csrf攻擊？

csrf（跨站點請求偽造）攻擊者在用戶已經登錄目標網站之后，有使用戶訪問一個攻擊頁面，利用目標網站對用戶的信任，以用戶身份再攻擊頁面對目標網站發起偽造用戶操作的請求，達到攻擊目的

33、預加載和懶加載的區別，預加載在什么時候加載合適？

預加載是指頁面完成加載之前，提前將所需資源下載，之后使用的時候從快取中呼叫

懶加載是延遲加載，按照一定的條件或者需求等到滿足條件的時候在加載對應的資源，

兩者主要區別是一個是提前加載，一個是延遲加載甚至不加載， 懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力，

34、談談Js的函式節流和函式防抖的區別

• 函式節流是指一定時間內js方法只執行一次，
• 函式防抖是指頻繁觸發的情況下，只有足夠的空閑時間，才執行代碼一次
• 函式節流是宣告一個變數當標志位，記錄當前代碼是否在執行，如果正在執行，取消這次方法執行，直return，如果空閑，正常觸發方法執行
• 函式防抖是需要一個延時器來輔助實作，延遲執行需要執行的代碼，如果方法多次觸發，把上次記錄的延遲執行代碼用cleartimeout清除掉，重新開始，如果計時完畢，沒有方法來訪問觸發，則執行代碼，