總結JS知識點
事件委託:
給父元素繫結事件監聽,子元素通過事件冒泡觸發事件 好處:1.記憶體佔用減少 2.刪除子元素時不需要解綁事件
===========================
this物件:基於執行環境繫結
匿名函式執行環境具有全域性性,所以this指向window
===========================
閉包:在一個函式內部定義的函式會將包含函式的活動物件新增到它的作用域鏈中
為什麼使用
1.利用閉包實現資料私有化或模擬私有方法
2.柯里化
===========================
原型繼承:
===========================
(function foo(){ })()
和(function foo(){ }())
。以上函式不會暴露到全域性作用域
===========================
null
、undefined
和未宣告變數之間有什麼區別:
1.沒有提前使用var
、let
或const
宣告變數,就為一個變數賦值時,該變數是未宣告變數,未宣告變數會脫離當前作用域,成為全域性作用域下定義的變數。
2.當一個變數已經宣告,但沒有賦值時,該變數的值是undefined
。如果一個函式的執行結果被賦值給一個變數,但是這個函式卻沒有返回任何值,那麼該變數的值是undefined
。
3.null
只能被顯式賦值給變數。它表示空值
===========================
.forEach
和.map()
的主要區別在於.map()
返回一個新的陣列。如果你想得到一個結果,但不想改變原始陣列,用.map()
。如果你只需要在陣列上做迭代修改,用forEach
。
===========================
匿名函式可以在 IIFE 中使用,來封裝區域性作用域內的程式碼,以便其宣告的變數不會暴露到全域性作用域。
匿名函式可以作為只用一次,不需要在其他地方使用的回撥函式。當處理函式在呼叫它們的程式內部被定義時,程式碼具有更好地自閉性和可讀性
匿名函式可以用於函數語言程式設計或 Lodash(類似於回撥函式)
===========================
Object.creat()與new
===========================
Ajax(asynchronous JavaScript and XML)是使用客戶端上的許多 Web 技術,建立非同步 Web 應用的一種 Web 開發技術。藉助 Ajax,Web 應用可以非同步(在後臺)向伺服器傳送資料和從伺服器檢索資料,而不會干擾現有頁面的顯示和行為。通過將資料交換層與表示層分離,Ajax 允許網頁和擴充套件 Web 應用程式動態更改內容,而無需重新載入整個頁面。實際上,現在通常將 XML 替換為 JSON,因為 JavaScript 對 JSON 有原生支援優勢。
優點
- 互動性更好。來自伺服器的新內容可以動態更改,無需重新載入整個頁面。
- 減少與伺服器的連線,因為指令碼和樣式只需要被請求一次。
- 狀態可以維護在一個頁面上。JavaScript 變數和 DOM 狀態將得到保持,因為主容器頁面未被重新載入。
- 基本上包括大部分 SPA 的優點。
缺點
- 動態網頁很難收藏。
- 如果 JavaScript 已在瀏覽器中被禁用,則不起作用。
- 有些網路爬蟲不執行 JavaScript,也不會看到 JavaScript 載入的內容。
- 基本上包括大部分 SPA 的缺點
===========================
JS模板:Handlebars、Underscore、Lodash、AngularJS 和 JSX
===========================
“Attribute” 是在 HTML 中定義的,而 “property” 是在 DOM 上定義的。
===========================
'use strict' 是用於對整個指令碼或單個函式啟用嚴格模式的語句。嚴格模式是可選擇的一個限制 JavaScript 的變體一種方式 。
優點:
- 無法再意外建立全域性變數。
- 會使引起靜默失敗(silently fail,即:不報錯也沒有任何效果)的賦值操丟擲異常。
- 試圖刪除不可刪除的屬性時會丟擲異常(之前這種操作不會產生任何效果)。
- 要求函式的引數名唯一。
- 全域性作用域下,
this
的值為undefined
。 - 捕獲了一些常見的編碼錯誤,並丟擲異常。
- 禁用令人困惑或欠佳的功能。
缺點:
- 缺失許多開發人員已經習慣的功能。
- 無法訪問
function.caller
和function.arguments
。 - 以不同嚴格模式編寫的指令碼合併後可能導致問題。
===========================
在現代的 SPA 中,客戶端渲染取而代之。瀏覽器從伺服器載入初始頁面、整個應用程式所需的指令碼(框架、庫、應用程式碼)和樣式表。當用戶導航到其他頁面時,不會觸發頁面重新整理。該頁面的 URL 通過 HTML5 History API 進行更新。瀏覽器通過 AJAX 請求向伺服器檢索新頁面所需的資料(通常採用 JSON 格式)。然後,SPA 通過 JavaScript 來動態更新頁面,這些 JavaScript 在初始頁面載入時已經下載。這種模式類似於原生移動應用的工作方式。
好處:
- 使用者感知響應更快,使用者切換頁面時,不再看到因頁面重新整理而導致的白屏。
- 對伺服器進行的 HTTP 請求減少,因為對於每個頁面載入,不必再次下載相同的資源。
- 客戶端和伺服器之間的關注點分離。可以為不同平臺(例如手機、聊天機器人、智慧手錶)建立新的客戶端,而無需修改伺服器程式碼。只要 API 沒有修改,可以單獨修改客戶端和伺服器上的程式碼。
壞處:
- 由於載入了多個頁面所需的框架、應用程式碼和資源,導致初始頁面載入時間較長。
- 伺服器還需要進行額外的工作,需要將所有請求路由配置到單個入口點,然後由客戶端接管路由。
- SPA 依賴於 JavaScript 來呈現內容,但並非所有搜尋引擎都在抓取過程中執行 JavaScript,他們可能會在你的頁面上看到空的內容。這無意中損害了應用的搜尋引擎優化(SEO)。然而,當你構建應用時,大多數情況下,搜尋引擎優化並不是最重要的因素,因為並非所有內容都需要通過搜尋引擎進行索引。為了解決這個問題,可以在伺服器端渲染你的應用,或者使用諸如 Prerender 的服務來“在瀏覽器中呈現你的 javascript,儲存靜態 HTML,並將其返回給爬蟲”。
===========================
Promise
代替回撥函式有什麼優缺點?
優點:
- 避免可讀性極差的回撥地獄。
- 使用
.then()
編寫的順序非同步程式碼,既簡單又易讀。 - 使用
Promise.all()
編寫並行非同步程式碼變得很容易。
缺點:
- 輕微地增加了程式碼的複雜度(這點存在爭議)。
- 在不支援 ES2015 的舊版瀏覽器中,需要引入 polyfill 才能使用。
===========================、
你使用什麼語句遍歷物件的屬性和陣列的元素?
物件:
for
迴圈:for (var property in obj) { console.log(property); }
。但是,這還會遍歷到它的繼承屬性,在使用之前,你需要加入obj.hasOwnProperty(property)
檢查。Object.keys()
:Object.keys(obj).forEach(function (property) { ... })
。Object.keys()
方法會返回一個由一個給定物件的自身可列舉屬性組成的陣列。Object.getOwnPropertyNames()
:Object.getOwnPropertyNames(obj).forEach(function (property) { ... })
。Object.getOwnPropertyNames()
方法返回一個由指定物件的所有自身屬性的屬性名(包括不可列舉屬性但不包括 Symbol 值作為名稱的屬性)組成的陣列。
陣列:
for
loops:for (var i = 0; i < arr.length; i++)
。這裡的常見錯誤是var
是函式作用域而不是塊級作用域,大多數時候你想要迭代變數在塊級作用域中。ES2015 引入了具有塊級作用域的let
,建議使用它。所以就變成了:for (let i = 0; i < arr.length; i++)
。forEach
:arr.forEach(function (el, index) { ... })
。這個語句結構有時會更精簡,因為如果你所需要的只是陣列元素,你不必使用index
。還有every
和some
方法可以讓你提前終止遍歷。
大多數情況下,我更喜歡.forEach
方法,但這取決於你想要做什麼。for
迴圈有更強的靈活性,比如使用break
提前終止迴圈,或者遞增步數大於一。
===========================
柯里化(currying)是一種模式,其中具有多個引數的函式被分解為多個函式,當被串聯呼叫時,將一次一個地累積所有需要的引數。這種技術幫助編寫函式式風格的程式碼,使程式碼更易讀、緊湊。值得注意的是,對於需要被 curry 的函式,它需要從一個函式開始,然後分解成一系列函式,每個函式都需要一個引數。
===========================
===========================
===========================