前言

如果你走過了前端的入門初級階段，那么接下來就是向中高級進階，當然，關(guān)于這個初中高級的分界線，也沒有一個標準固定的指標，但是，不管怎么樣，努力讓自己變得強，是每個技術(shù)人的底氣。

我們其他不多說，我們現(xiàn)在就開今天的內(nèi)容吧。

另外，就是今天文章中代碼對應(yīng)的詳細注釋和具體使用方法放在我的GitHub上，源碼可以在底部找到，希望這對你的工作和面試有所幫助。

1.判斷對象的數(shù)據(jù)類型

使用 Object.prototype.toString 配合閉包，通過傳入不同的判斷類型來返回不同的判斷函數(shù)，一行代碼，簡潔優(yōu)雅靈活（注意傳入 type 參數(shù)時首字母大寫）

不推薦將這個函數(shù)用來檢測可能會產(chǎn)生包裝類型的基本數(shù)據(jù)類型上,因為 call 始終會將第一個參數(shù)進行裝箱操作，導(dǎo)致基本類型和包裝類型無法區(qū)分。

2.循環(huán)實現(xiàn)數(shù)組map方法

使用方法：將selfMap注入到Array.prototype中（下面數(shù)組的迭代方法也是如此）。

值得一提的是，map的第二個參數(shù)就是第一個參數(shù)回調(diào)中的這個點。如果第一個參數(shù)是箭頭函數(shù)，則設(shè)置第二個 this 將無效，因為箭頭函數(shù)的詞法綁定。

另一個是稀疏數(shù)組的處理，HasOwnProperty 用于判斷當前下標的元素是否存在于數(shù)組中，歡迎大家在評論區(qū)交流。

3.使用reduce實現(xiàn)數(shù)組map方法

4.循環(huán)實現(xiàn)數(shù)組filter方法

5.使用reduce實現(xiàn)數(shù)組filter方法

6.循環(huán)實現(xiàn)數(shù)組的some方法

如果執(zhí)行某個方法的數(shù)組是一個空數(shù)組，它總是返回false，如果另一個數(shù)組的每個方法中的數(shù)組都是一個空數(shù)組，它總是返回true。

7.循環(huán)實現(xiàn)數(shù)組的reduce方法

因為可能存在稀疏數(shù)組關(guān)系，reduce需要保證跳過稀疏元素，遍歷正確的元素和下標。

8.使用reduce實現(xiàn)數(shù)組的flat方法

因為selfFlat依賴這個指向，所以在減少遍歷的時候需要指定這個指向selfFlat，否則會默認指向一個窗口，會報錯。

原理是通過歸約來遍歷數(shù)組。當數(shù)組的一個元素還是數(shù)組的時候，通過ES6展開操作符（ES5可以使用concat方法）對其進行降維處理，而這個數(shù)組元素內(nèi)部也可能有嵌套數(shù)組，所以，需要遞歸調(diào)用selfFlat。

同時，原生的flat方法支持一個depth參數(shù)來表示降維的深度。默認值為 1，將數(shù)組的維度減少一層。

傳入 Infinity 會將傳入的數(shù)組變成一維數(shù)組。

原理是每次遞歸將深度參數(shù)減1。如果depth參數(shù)為0，直接返回原數(shù)組。

9. 實現(xiàn) ES6 的Class語法

ES6的Class內(nèi)部是基于寄生組合式繼承，是目前最理想的繼承方式。通過 Object.create() 方法創(chuàng)建一個空對象，并從 Object.create() 方法的參數(shù)中繼承該空對象，然后，讓子類（subType）如果原型對象等于這個空對象，則子類實例的prototype可以實現(xiàn)等于這個空對象，這個空對象的原型就等于父類原型對象（superType.prototype）的繼承關(guān)系。

Object.create() 支持第二個參數(shù)，即為生成的空對象定義屬性和屬性描述符/訪問器描述符。我們可以為這個空對象定義一個構(gòu)造函數(shù)屬性，更符合默認的繼承行為，不可枚舉，可枚舉的內(nèi)部屬性（可枚舉：false）。

ES6類允許子類繼承父類的靜態(tài)方法和靜態(tài)屬性，而普通的寄生組合繼承只能實現(xiàn)實例之間的繼承。對于類之間的繼承，需要定義額外的方法。這里使用 Object.setPrototypeOf() 將 superType 設(shè)置為 subType 的原型，以便能夠從父類繼承靜態(tài)方法和靜態(tài)屬性。

10.函數(shù)柯里化

用法：

柯里化是函數(shù)式編程中的一項重要技術(shù)，該技術(shù)將一個接受多個參數(shù)的函數(shù)轉(zhuǎn)換為一系列接受一個參數(shù)的函數(shù)。

函數(shù)式編程的另一個重要功能，compose，可以組合函數(shù)，而組合函數(shù)只接受一個參數(shù)，所以，如果需要接受多個函數(shù)并且需要使用compose進行函數(shù)組合，則需要對函數(shù)使用currying 要組成的部分被評估，因此它總是只需要一個參數(shù)。

讓我們看另一個例子：

11.函數(shù)柯里化（支持占位符）

用法：

使用占位符可以使柯里化更加靈活， 這個想法是用每一輪的傳入?yún)?shù)填充上一輪的占位符。 如果當前輪的參數(shù)包含一個占位符，它們將被放置在內(nèi)部存儲的數(shù)組中。 最后，當前輪的元素不會填充當前輪參數(shù)的占位符，只會填充之前傳入的占位符。

12. 部分函數(shù)

用法：

偏函數(shù)的概念和柯里化類似。 我個人認為它們的區(qū)別在于偏函數(shù)會固定傳入的幾個參數(shù)，然后，一次性接受剩下的參數(shù)，而函數(shù)柯里化會根據(jù)傳入函數(shù)的參數(shù)不斷返回，直到參數(shù)個數(shù)在被柯里化之前滿足函數(shù)的參數(shù)數(shù)量。

Function.prototype.bind 函數(shù)是偏函數(shù)的典型代表。 它接受的第二個參數(shù)以預(yù)先添加到綁定函數(shù)的參數(shù)列表中的參數(shù)開始。 與bind不同的是，上述函數(shù)還支持記帳位字符。

13. 斐波那契數(shù)列及其優(yōu)化

使用函數(shù)內(nèi)存來保存之前運算的結(jié)果，可以為頻繁依賴之前結(jié)果的計算節(jié)省大量時間，比如斐波那契數(shù)列， 缺點是閉包中的obj對象會占用額外的內(nèi)存。

另外，使用動態(tài)規(guī)劃的空間復(fù)雜度比前者低，也是比較推薦的方案。

14.實現(xiàn)函數(shù)bind方法

實現(xiàn)函數(shù)bind方法的核心是使用調(diào)用綁定this指針，同時，考慮到其他一些情況，比如：

? 當bind 返回的函數(shù)被new 調(diào)用構(gòu)造函數(shù)時，綁定的值將失效并變?yōu)閚ew 指定的對象。

? 定義綁定函數(shù)的長度屬性和名稱屬性（不可枚舉的屬性）。

? 綁定函數(shù)的原型需要指向原函數(shù)的原型（實際情況下，綁定函數(shù)沒有原型。而是綁定函數(shù)中有一個內(nèi)部屬性[[TargetFunction]]來保存原函數(shù)。當final函數(shù)作為構(gòu)造函數(shù)時，創(chuàng)建實例的__proto__指向[[TargetFunction]]的原型，這里無法模擬內(nèi)部屬性，所以直接聲明一個原型屬性）。

15.實現(xiàn)函數(shù)call方法

原理是將函數(shù)作為傳入的上下文參數(shù)（context）的一個屬性來執(zhí)行。 這里使用 ES6 Symbol 類型來防止屬性沖突。

16.簡單的CO模塊

用法：

run函數(shù)接受一個生成器函數(shù)，只要run函數(shù)包裹的生成器函數(shù)遇到y(tǒng)ield關(guān)鍵字就停止。

當后面的yield的promise成功resolve后，會自動調(diào)用next方法執(zhí)行到下一個yield關(guān)鍵字，最終，只要一個promise成功resolve，就會resolve下一個promise。

當所有解析成功后，打印所有解析的結(jié)果，演變成現(xiàn)在最常用的async/await語法

17. 去抖動

Leading進入時是否執(zhí)行一次，原理是使用的定時器。 如果在指定時間內(nèi)再次觸發(fā)事件，則清除最后一個定時器，即不執(zhí)行該函數(shù)，并重新設(shè)置一個新的定時器，直到超過指定時間， 時間自動觸發(fā)定時器中的功能。

同時，通過閉包暴露了一個取消函數(shù)，使得外部可以直接清除內(nèi)部計數(shù)器。

18. 節(jié)流

與防抖功能類似，不同之處在于額外使用內(nèi)部時間戳作為判斷，如果在一段時間內(nèi)沒有觸發(fā)事件，則允許觸發(fā)下一個事件。 同時增加了一個尾隨選項，表示最后是否觸發(fā)附加時間。

19. 圖像延遲加載

getBoundClientRect 的實現(xiàn)方法是監(jiān)聽滾動事件（建議在監(jiān)聽事件中加入節(jié)流），圖片加載后會從img標簽組成的DOM列表中刪除，最后需要解除所有圖片的綁定加載監(jiān)視器事件后。

實現(xiàn)一個intersectionObserver，實例化IntersectionObserver，讓它觀察所有img標簽。

當img標簽進入可見區(qū)域時，執(zhí)行實例化回調(diào)，并傳入一個entry參數(shù)給回調(diào)，其中保存了實例觀察到的所有元素的一些狀態(tài)，比如，每個元素的邊界信息，DOM節(jié)點 對應(yīng)于當前元素，當前元素進入可見區(qū)域的速率。

每當元素進入可見區(qū)域時，將真實圖像分配給當前的img標簽并釋放其觀察。

20. new 關(guān)鍵字

21. 實現(xiàn) Object.assign

22.實現(xiàn)instanceof

原理是遞歸遍歷右參數(shù)的原型鏈，每次與左參數(shù)比較，遍歷到原型鏈末端返回false，找到返回true。

23.私有變量的實現(xiàn)

使用Proxy代理所有以_開頭的變量，使其無法被外部訪問。

以閉包的形式保存私有變量，缺點是類的所有實例都訪問同一個私有變量。

閉包的另一種實現(xiàn)解決了上述閉包的缺點，每個實例都有自己的私有變量。 缺點是拋棄了類語法的簡單性，拋棄了所有特權(quán)方法（訪問私有變量的方法）， 存儲在構(gòu)造函數(shù)中。

通過WeakMap和閉包，在每次實例化時保存當前實例和所有私有變量組成的對象，而閉包中的WeakMap無法從外部訪問。 使用 WeakMap 的好處是當實例沒有變量引用時，會自動釋放， 實例保存的私有變量，減少內(nèi)存溢出問題。

24. 洗牌算法

早期的chrome對少于10個元素的數(shù)組使用了插入排序，這樣會導(dǎo)致數(shù)組亂序，并不是真的亂序，即使最新版的chrome使用了in-place算法，使得排序成為一種穩(wěn)定的算法， 亂序問題仍未解決。

真正的無序可以通過shuffle算法來實現(xiàn)， 洗牌算法分為原位和非原位。 圖1是原位改組算法，無需聲明額外的數(shù)組來節(jié)省內(nèi)存使用。 原則是按順序遍歷。 數(shù)組的元素，隨機選擇當前元素和所有后續(xù)元素中的一個，進行交換。

25. 單例模式

ES6的Proxy實現(xiàn)的單例模式攔截構(gòu)造函數(shù)的執(zhí)行方法。

26.Promisify

用法：

promisify 函數(shù)是將回調(diào)函數(shù)變成promise的輔助函數(shù)，適用于錯誤優(yōu)先風格（nodejs）的回調(diào)函數(shù)。

原理是無論error-first風格的回調(diào)成功還是失敗，執(zhí)行完后都會執(zhí)行最后一個回調(diào)函數(shù)。 我們需要做的就是讓這個回調(diào)函數(shù)控制 Promise 的狀態(tài)。

這里也使用proxy來代理整個fs模塊，攔截get方法，這樣就不用手動把fs模塊的所有方法都用promisify函數(shù)包裹起來，比較靈活。

27. 優(yōu)雅地處理 async/await

用法：

不需要每次使用 async/await 時都包裹一層 try/catch，更加優(yōu)雅。 這是另一個想法。 如果使用webpack，可以寫一個loader，分析AST語法樹，遇到await語法時自動注入try/catch， 這樣你甚至不需要使用輔助函數(shù)。

28. EventEmitter

on 方法用于注冊事件，trigger 方法觸發(fā)事件實現(xiàn)事件之間的松散解耦，并增加了額外的once and off 輔助功能來注冊僅觸發(fā)一次的事件和注銷事件。

29. 實現(xiàn) JSON.stringify

使用 JSON.stringify 將對象轉(zhuǎn)換為 JSON 字符串時，一些非法數(shù)據(jù)類型會被扭曲，主要如下：

? 如果對象包含 toJSON 方法，將調(diào)用 toJSON。

? Array

1.有Undefined/Symbol/Function數(shù)據(jù)類型時會變?yōu)閚ull。

2. Infinity/NaN 的存在也將變?yōu)?null。

? Object

1.當屬性值為Undefined/Symbol/Function數(shù)據(jù)類型時，屬性和值都不會轉(zhuǎn)為字符串。

2.如果屬性值為Infinity/NaN，屬性值會變?yōu)閚ull。

? 日期數(shù)據(jù)類型值調(diào)用 toISOString。

? 不是數(shù)組/對象/函數(shù)/日期的復(fù)雜數(shù)據(jù)類型變?yōu)榭諏ο蟆?/strong>

? 循環(huán)引用引發(fā)錯誤。

此外，JSON.stringify 還可以傳入第二個和第三個可選參數(shù)，有興趣的朋友可以詳細了解一下。

實現(xiàn)代碼比較長，這里我直接貼上對應(yīng)的源碼地址 JSON.stringify：https://github.com/yeyan1996/practical-javascript/blob/master/json.js

文章中源代碼地址：

https://github.com/yeyan1996/practical-javascript

總結(jié)

以上就是今天我跟你分享的29個關(guān)于JavaScript的技能，如果你覺得有用的話，請記得點贊我，關(guān)注我，并將它分享給你身邊的朋友，也許能夠幫助到他。

最后，感謝你的閱讀，祝編程愉快！