一個合格的中級前端工程師須要掌握的 28 個 JavaScript 技巧

時間 2019-11-05

標籤一個合格中級前端工程師須要掌握 javascript 技巧欄目 JavaScript 简体版

原文原文鏈接

前言

文中代碼對應的詳細註釋和具體使用方法都放在個人 github 上，源代碼在底部鏈接node

1.判斷對象的數據類型

使用 Object.prototype.toString 配合閉包，經過傳入不一樣的判斷類型來返回不一樣的判斷函數，一行代碼，簡潔優雅靈活（注意傳入 type 參數時首字母大寫）webpack

不推薦將這個函數用來檢測可能會產生包裝類型的基本數據類型上,由於 call 始終會將第一個參數進行裝箱操做，致使基本類型和包裝類型沒法區分git

2. 循環實現數組 map 方法

使用方法：將 selfMap 注入到 Array.prototype 上（下面數組的迭代方法同理）github

值得一提的是，map 的第二個參數爲第一個參數回調中的 this 指向，若是第一個參數爲箭頭函數，那設置第二個 this 會由於箭頭函數的詞法綁定而失效web

另外就是對稀疏數組的處理，經過 hasOwnProperty 來判斷當前下標的元素是否存在與數組中(感謝評論區的朋友)算法

3. 使用 reduce 實現數組 map 方法

4. 循環實現數組 filter 方法

5. 使用 reduce 實現數組 filter 方法

6. 循環實現數組的 some 方法

執行 some 方法的數組若是是一個空數組，最終始終會返回 false，而另外一個數組的 every 方法中的數組若是是一個空數組，會始終返回 truechrome

7. 循環實現數組的 reduce 方法

由於可能存在稀疏數組的關係，因此 reduce 須要保證跳過稀疏元素，遍歷正確的元素和下標(感謝@神三元的提供的代碼)編程

8. 使用 reduce 實現數組的 flat 方法

由於 selfFlat 是依賴 this 指向的，因此在 reduce 遍歷時須要指定 selfFlat 的 this 指向，不然會默認指向 window 從而發生錯誤json

原理經過 reduce 遍歷數組，遇到數組的某個元素還是數組時，經過 ES6 的擴展運算符對其進行降維（ES5 可使用 concat 方法），而這個數組元素可能內部還嵌套數組，因此須要遞歸調用 selfFlat數組

同時原生的 flat 方法支持一個 depth 參數表示降維的深度，默認爲 1 即給數組降一層維度

傳入 Inifity 會將傳入的數組變成一個一維數組

原理是每遞歸一次將 depth 參數減 1，若是 depth 參數爲 0 時，直接返回原數組

9. 實現 ES6 的 class 語法

ES6 的 class 內部是基於寄生組合式繼承，它是目前最理想的繼承方式，經過 Object.create 方法創造一個空對象，並將這個空對象繼承 Object.create 方法的參數，再讓子類（subType）的原型對象等於這個空對象，就能夠實現子類實例的原型等於這個空對象，而這個空對象的原型又等於父類原型對象（superType.prototype）的繼承關係

而 Object.create 支持第二個參數，即給生成的空對象定義屬性和屬性描述符/訪問器描述符，咱們能夠給這個空對象定義一個 constructor 屬性更加符合默認的繼承行爲，同時它是不可枚舉的內部屬性（enumerable:false）

而 ES6 的 class 容許子類繼承父類的靜態方法和靜態屬性，而普通的寄生組合式繼承只能作到實例與實例之間的繼承，對於類與類之間的繼承須要額外定義方法，這裏使用 Object.setPrototypeOf 將 superType 設置爲 subType 的原型，從而可以從父類中繼承靜態方法和靜態屬性

10. 函數柯里化

使用方法：

柯里化是函數式編程的一個重要技巧，將使用多個參數的一個函數轉換成一系列使用一個參數的函數的技術

函數式編程另外一個重要的函數 compose，可以將函數進行組合，而組合的函數只接受一個參數，因此若是有接受多個函數的需求而且須要用到 compose 進行函數組合，就須要使用柯里化對準備組合的函數進行部分求值，讓它始終只接受一個參數

借用冴羽博客中的一個例子

11. 函數柯里化（支持佔位符）

使用方法：

經過佔位符能讓柯里化更加靈活，實現思路是，每一輪傳入的參數先去填充上一輪的佔位符，若是當前輪參數含有佔位符，則放到內部保存的數組末尾，當前輪的元素不會去填充當前輪參數的佔位符，只會填充以前傳入的佔位符

12. 偏函數

使用方法：

偏函數和柯里化概念相似，我的認爲它們區別在於偏函數會固定你傳入的幾個參數，再一次性接受剩下的參數，而函數柯里化會根據你傳入參數不停的返回函數，直到參數個數知足被柯里化前函數的參數個數

Function.prototype.bind 函數就是一個偏函數的典型表明，它接受的第二個參數開始，爲預先添加到綁定函數的參數列表中的參數，與 bind 不一樣的是，上面的這個函數一樣支持佔位符

13. 斐波那契數列及其優化

利用函數記憶，將以前運算過的結果保存下來，對於頻繁依賴以前結果的計算可以節省大量的時間，例如斐波那契數列，缺點就是閉包中的 obj 對象會額外佔用內存

另外使用動態規劃比前者的空間複雜度更低，也是更推薦的解法

14. 實現函數 bind 方法

實現函數的 bind 方法核心是利用 call 綁定 this 指向，同時考慮了一些其餘狀況，例如

bind 返回的函數被 new 調用做爲構造函數時，綁定的值會失效而且改成 new 指定的對象
定義了綁定後函數的 length 屬性和 name 屬性（不可枚舉屬性）
綁定後函數的 prototype 需指向原函數的 prototype（真實狀況中綁定後的函數是沒有 prototype 的，取而代之在綁定後的函數中有個內部屬性 [[TargetFunction]] 保存原函數，當將綁定後函數做爲構造函數時，將建立的實例的 __proto__ 指向 [[TargetFunction]] 的 prototype，這裏沒法模擬內部屬性，因此直接聲明瞭一個 prototype 屬性）

15. 實現函數 call 方法

原理就是將函數做爲傳入的上下文參數（context）的屬性執行，這裏爲了防止屬性衝突使用了 ES6 的 Symbol 類型

16. 簡易的 CO 模塊

使用方法：

run 函數接受一個生成器函數，每當 run 函數包裹的生成器函數遇到 yield 關鍵字就會中止，當 yield 後面的 promise 被解析成功後會自動調用 next 方法執行到下個 yield 關鍵字處，最終就會造成每當一個 promise 被解析成功就會解析下個 promise，當所有解析成功後打印全部解析的結果，衍變爲如今用的最多的 async/await 語法