JS面試總結

時間 2020-07-20

原文原文鏈接

ES6新特性

let變量，const常量。javascript

let和const都是塊級做用域。
    const定義後不能修改常量。
    let和const不存在變量提高
    暫存死區
    const一旦聲明必須賦值,不能使用null佔位

字符串

箭頭函數css

不須要 function 關鍵字來建立函數  
    省略 return 關鍵字  
    繼承當前上下文的 this 關鍵字

解構

展開運算符

import和export
import導入模塊、export導出模塊
class類
Promise前端

promise

1.Promise 是一個 構造函數，是一個異步操做，它有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。一旦狀態改變，就不會再改變。
2.Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是resolve（成功以後的回調函數）和reject （失敗以後的回調函數）
3.在 Promise 構造函數的 Prototype 屬性上，有一個 .then() 方法，也就是說，只要是 Promise 構造函數建立的實例，均可以訪問到 .then() 方法
4.Promise還有 .all方法，它能夠將多個 Promise 實例，包裝成一個新的 Promise 實例。
5.promise主要是一個異步轉同步這樣同樣函數，他是把異步操做用同步的方式寫出來

async,await函數

函數前面多了一個aync關鍵字。await關鍵字只能用在aync定義的函數內。async函數會隱式地返回一個promise，該promise的reosolve值就是函數return的值。
不能在最外層代碼中使用await，由於不在async函數內

使用async函數可讓代碼簡潔不少，不須要像Promise同樣須要些then，不須要寫匿名函數處理Promise的resolve值，也不須要定義多餘的data變量，還避免了嵌套代碼。java

跨域、怎麼解決跨域

出於瀏覽器的同源策略限制，請求url的協議、域名、端口三者之間任意一個與當前頁面url不一樣即爲跨域。
解決方法：jsonp、CORS、反向代理、跨文檔通訊 API：window.postMessage()、設置document.domain解決沒法讀取非同源網頁的 Cookie問題。
反向代理配置：
json

緩存

cookie、localStorage、sessionStorage
都在本地（瀏覽器端）存儲數據
localStorage是永久存儲，除非手動刪除。
sessionStorage當會話結束（當前頁面關閉的時候，自動銷燬）
cookie的數據會在每一次發送http請求的時候，同時發送給服務器而localStorage、sessionStorage不會。跨域

原型、原型鏈

原型：數組

全部引用類型都有一個__proto__(隱式原型)屬性，屬性值是一個普通的對象
全部函數都有一個prototype(原型)屬性，屬性值是一個普通的對象
全部引用類型的__proto__屬性指向它構造函數的prototype

原型鏈：promise

原型鏈是原型對象建立過程的歷史記錄，當訪問一個對象的某個屬性時，會先在這個對象自己屬性上查找，若是沒有找到，則會去它的__proto__隱式原型上查找，即它的構造函數的prototype，若是尚未找到就會再在構造函數的prototype的__proto__中查找，這樣一層一層向上查找就會造成一個鏈式結構

JavaScript的繼承

ES6 class 繼承瀏覽器
- class繼承其實是構造函數的繼承和原型鏈繼承的綜合封裝
構造函數繼承緩存
- 構造函數與構造函數之間的繼承，實質是改變函數的this指向，利用blind
原型繼承
- 利用函數的prototype相等去實現;

null和undefined的區別

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。
變量被聲明瞭，但沒有賦值時，就等於undefined。
調用函數時，應該提供的參數沒有提供，該參數等於undefined。
對象沒有賦值的屬性，該屬性的值爲undefined。
函數沒有返回值時，默認返回undefined。
null表示"沒有對象"，即該處不該該有值。
做爲函數的參數，表示該函數的參數不是對象。
做爲對象原型鏈的終點。

js延遲加載的方式有哪些

defer和async、動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js

call，apply，bind

相同點

都用來改變this指向，第一個參數都是this指向的對象(指定運行函數做用域)，均可以利用後面的參數傳參

不一樣點
1.call() 方法和apply() 方法做用相同, 區別在於接收參數的方式不一樣, call() 須要列舉全部傳入的全部參數
2.apply第二個是參數數組,Array實例，arguments對象
3.bind() 方法和前二者不一樣在於： bind() 方法會返回執行上下文被改變的函數而不會當即執行，而前二者是直接執行該函數，他的參數和call()相同

call() 方法
- 是一個屬於函數的方法
- 語法：
  函數名.call()
  對象.函數名.call()
- 第一個參數：就是你要改變的 this 指向
  - 你寫的是誰，那麼這個函數裏面的 this 就是誰
- 從第二個參數開始，依次是給函數傳遞的參數
apply() 方法
- 是一個屬於函數的方法
- 語法：
  函數名.apply()
  對象.函數名.apply()
- 第一個參數：就是你要改變的 this 指向
  - 你寫的是誰，那麼這個函數裏面的 this 就是誰
- 第二個參數：是一個數組或者僞數組
  - 數組或者僞數組裏面的每一項，依次是給函數傳遞的參數
bind()
- 是一個屬於函數的方法
- 語法：
  函數名.bind()
  對象.函數名.bind()
- 返回值：是已經改變好的 this 指向的新函數
- 第一個參數：就是你要改變的 this 指向
  - 你寫的是誰，那麼這個函數裏面的 this 就是誰
  - bind() 不會把函數執行，而是返回一個新的函數，這個新的函數內部的 this 是改變好的
- 給函數傳遞參數，有兩個方式
  - bind() 的第二個參數開始，依次給函數傳遞參數
  - 再調用返回的那個函數的時候，直接傳參
  - 當你再兩個位置都寫參數的時候，以 bind 第二個參數開始的哪些內容爲準
- 按個方法的第一個參數都是改變 this 指向
- 這個參數能夠不寫或者寫null
- 你不寫或者寫 null 的時候，函數內部的 this 都是 window
call和apply對函數是直接調用，bind返回的還是函數，須要再次調用

閉包

能夠訪問另外一個函數做用域中變量的函數

特性
- 函數內嵌套函數
- 內部函數能夠引用外層的參數和變量
- 參數和變量不會被垃圾回收機制回收

缺點：會使函數中的變量保存在內存中，內存消耗很大，致使內存泄漏。
解決方法：在退出函數前，將不適用的局部函數變量刪除。

javascript對象的幾種建立方式

1，工廠模式
2，構造函數模式
3，原型模式
4，混合構造函數和原型模式
5，動態原型模式
6，寄生構造函數模式
7，穩妥構造函數模式

深拷貝與淺拷貝

深拷貝和淺拷貝最根本的區別在因而否真正獲取一個對象的複製實體，而不是引用。
假設B複製了A，修改A的時候，看B是否發生變化：
若是B跟着也變了，說明是淺拷貝，拿人手短！（修改堆內存中的同一個值）
若是B沒有改變，說明是深拷貝，自食其力！（修改堆內存中的不一樣的值） 
淺拷貝（shallowCopy）只是增長了一個指針指向已存在的內存地址，
深拷貝（deepCopy）是增長了一個指針而且申請了一個新的內存，使這個增長的指針指向這個新的內存，
使用深拷貝的狀況下，釋放內存的時候不會由於出現淺拷貝時釋放同一個內存的錯誤。
淺複製：僅僅是指向被複制的內存地址，若是原地址發生改變，那麼淺複製出來的對象也會相應的改變。
深複製：在計算機中開闢一塊新的內存地址用於存放複製的對象。

防抖節流

函數防抖（debounce）是指在必定時間內，在動做被連續頻繁觸發的狀況下，動做只會被執行一次，也就是說當調用動做過n毫秒後，纔會執行該動做，若在這n毫秒內又調用此動做則將從新計算執行時間，因此短期內的連續動做永遠只會觸發一次，

search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。

函數節流（throttle）是指必定時間內執行的操做只執行一次，也就是說即預先設定一個執行週期，當調用動做的時刻大於等於執行週期則執行該動做，而後進入下一個新週期，

鼠標不斷點擊觸發，mousedown(單位時間內只觸發一次)
監聽滾動事件，好比是否滑到底部自動加載更多，用throttle來判斷

函數防抖事件觸發後延遲執行動做，適用於頻繁觸發的事件，函數防抖的實現關鍵是對setTimeout函數的應用函數節流在固定時間內只觸發一次操做，在週期內新事件觸發不執行動做，實現關鍵是flag和setTimeout的應用
區別：函數防抖是將一個週期內的屢次操做經過重置計時器的方式合併到一次操做中，而函數節流是一個週期內只容許只執行一次操做，多餘的操做將直接return false。

懶加載

懶加載的主要目的就是做爲服務器前端的優化，減小請求次數或者延遲請求數。
實現原理:先加載一部分數據，當觸發某個條件時利用異步(async)加載剩餘的數據，新獲得的數據不會影響原有數據的顯示，同時最大幅度的減小服務器端資源耗用。
實現方式：

1.第一種是純粹的延遲加載，使用setTimeOut和setInterval進行加載延遲。
2.第二種是條件加載，符合某種條件，或是出發某些事件纔開始異步加載。
3.第三種是可視區加載，僅記載用戶的可視區域，這個主要監控滾動條來實現，通常會距用戶看到某些圖片前的一段距離時開始進行記載，這樣就可保證用戶拉下時正好能夠看到加載完畢後的圖片或是內容。

圖片懶加載

在圖片沒有進入可視區域時，先不給<img>的src賦值，這樣瀏覽器就不會發送請求了，等到圖片進入可視區域再給src賦值。

get和post區別

Es6對象新方法

Object.freeze()

Object.is()
它用來比較倆個值是否嚴格相等,與嚴格運算符(===) 的行爲基本一致。

Object.assign()
該方法用於對象合併,將源對象(source)的全部可枚舉屬性,複製到target目標對象裏

JS字符串經常使用方法

indexOf(): 返回某個指定的子字符串在字符串中第一次出現的位置。
lastIndexOf(): 返回某個指定的子字符串在字符串中最後出現的位置。
split(): 把字符串分割成字符串數組。
match(): 返回全部查找的關鍵字內容的數組。
substr(): 返回從指定下標開始指定長度的的子字符串。

js中數組經常使用方法

Array.map()
將數組中的每一個元素調用一個提供的函數，結果做爲一個新的數組返回，並無改變原來的數組
Array.forEach()
將數組中的每一個元素執行傳進提供的函數，沒有返回值
Array.filter()
將全部元素進行判斷，將知足條件的元素做爲一個新的數組返回
Array.push()
在數組的後面添加新加元素，此方法改變了數組的長度
Array.pop()
在數組後面刪除最後一個元素，並返回數組，此方法改變了數組的長度
Array.shift()
在數組後面刪除第一個元素，並返回數組，此方法改變了數組的長度
Array.toString()
此方法將數組轉化爲字符串
Array.splice(開始位置，刪除的個數，元素)
萬能方法，能夠實現增刪改