[TOC] # 第二部分總結（專題系列） ## 防抖與節流 防抖和節流的作用都是防止函數多次調用，區別在于，假設一個用戶一直觸發這個函數，且每次觸發函數的時間間隔小于wait，防抖的情況下只會調用一次，而節流的情況會每隔一定時間調用函數 ~~~ // 防抖 function debounce(func, wait, immediate) { var timeout, result; var debounced = function () { var context = this; var args = arguments; if (timeout) clearTimeout(timeout); if (immediate) { // 如果已經執行過，不再執行 var callNow = !timeout; timeout = setTimeout(function(){ timeout = null; }, wait) if (callNow) result = func.apply(context, args) } else { timeout = setTimeout(function(){ func.apply(context, args) }, wait); } return result; }; debounced.cancel = function() { clearTimeout(timeout); timeout = null; }; return debounced; } ~~~ 這個防抖函數和最普通的防抖函數相比關注了以下幾個需求： - this 和 event 的指向都要正確 - 允許立即執行 - 能返回函數的執行結果 - 能取消然后重新觸發 ~~~ // 節流 function throttle(func, wait) { var timeout; return function() { context = this; args = arguments; if (!timeout) { timeout = setTimeout(function(){ timeout = null; }, wait) // 立即執行 func.apply(context, args) } } } ~~~ 這樣實現的節流函數滿足了這樣一個需求：鼠標移入能立刻執行，停止觸發的時候還能再執行一次（假設事件處理程序是 onmousemove） ## 數組去重 嘗試寫一個名為 unique 的工具函數，我們根據一個參數 isSorted 判斷傳入的數組是否是已排序的，如果為 true，我們就判斷相鄰元素是否相同，如果為 false，我們就使用 indexOf 進行判斷 ~~~ var array1 = [1, 2, '1', 2, 1]; var array2 = [1, 1, '1', 2, 2]; // unique 工具函數用于數組去重 function unique(array, isSorted) { var res = []; var seen = []; for (var i = 0, len = array.length; i < len; i++) { var value = array[i]; if (isSorted) { // 如果數組是排序過的，判斷當前元素與前一個元素是否相等 if (!i || seen !== value) { res.push(value) } seen = value; } else if (res.indexOf(value) === -1) { // 如果數組是未排序的，使用 indexOf 方法 res.push(value); } } return res; } console.log(unique(array1)); // [1, 2, "1"] console.log(unique(array2, true)); // [1, "1", 2] ~~~ 在數組中元素有一些特殊類型如對象、NaN的情況下，不同的數組去重方法可能會有不同的返回值 ~~~js // demo1 var arr = [1, 2, NaN]; arr.indexOf(NaN); // -1 ~~~ indexOf 底層還是使用 === 進行判斷，因為 NaN === NaN的結果為 false，所以使用 indexOf 查找不到 NaN 元素 ~~~js // demo2 function unique(array) { return Array.from(new Set(array)); } console.log(unique([NaN, NaN])) // [NaN] ~~~ Set 認為盡管 NaN === NaN 為 false，但是這兩個元素是重復的。 ## 快速獲取數組的最大值和最小值 使用 `Math.max()`函數需要注意的問題： 1. 如果有任一參數不能被轉換為數值，則結果為 NaN。 2. max 是 Math 的靜態方法，所以應該像這樣使用：Math.max()，而不是作為 Math 實例的方法 (簡單的來說，就是不使用 new ) 3. 如果沒有參數，則結果為`-Infinity`(注意是負無窮大) 1.如果任一參數不能被轉換為數值，這就意味著如果參數可以被轉換成數字，就是可以進行比較的，比如： ~~~js Math.max(true, 0) // 1 Math.max(true, '2', null) // 2 Math.max(1, undefined) // NaN Math.max(1, {}) // NaN ~~~ 2.如果沒有參數，則結果為 -Infinity，對應的，Math.min 函數，如果沒有參數，則結果為 Infinity，所以： ``` var min = Math.min(); var max = Math.max(); console.log(min > max); ``` 結合ES6的擴展運算符使用 ``` var arr = [6, 4, 1, 8, 2, 11, 23]; console.log(Math.max(...arr)) ``` ## 惰性函數 我們看下面的這個例子，在 DOM 中添加事件時需要兼容現代瀏覽器和 IE 瀏覽器（IE < 9），方法就是對瀏覽器環境進行判斷，看瀏覽器是否支持，簡化寫法如下。 ~~~js // 簡化寫法 function addEvent (type, el, fn, capture = false) { if (window.addEventListener) { el.addEventListener(type, fn, capture); } else if(window.attachEvent){ el.attachEvent('on' + type, fn); } } ~~~ 但是這種寫法有一個問題，就是每次添加事件都會調用做一次判斷，那么有沒有什么辦法只判斷一次呢？可以利用閉包和立即調用函數表達式（IIFE）來處理。 ~~~js const addEvent = (function(){ if (window.addEventListener) { return function (type, el, fn, capture) { el.addEventListener(type, fn, capture); } } else if(window.attachEvent){ return function (type, el, fn) { el.attachEvent('on' + type, fn); } } })(); ~~~ 也可以使用惰性函數來處理 ~~~ function addEvent (type, el, fn, capture = false) { // 重寫函數 if (window.addEventListener) { addEvent = function (type, el, fn, capture) { el.addEventListener(type, fn, capture); } } else if(window.attachEvent){ addEvent = function (type, el, fn) { el.attachEvent('on' + type, fn); } } addEvent(type, el, fn, capture); // 這一步是關鍵 } ~~~ 第一次調用`addEvent`函數后，會進行一次環境判斷，在這之后`addEvent`函數被重寫，所以下次調用時就不會再次判斷環境。