前言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

因?yàn)榭赡艽嬖谙∈钄?shù)組關(guān)系，reduce需要保證跳過稀疏元素，遍歷正確的元素和下標(biāo)。

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

因?yàn)閟elfFlat依賴這個(gè)指向，所以在減少遍歷的時(shí)候需要指定這個(gè)指向selfFlat，否則會(huì)默認(rèn)指向一個(gè)窗口，會(huì)報(bào)錯(cuò)。

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

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

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

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

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

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

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

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

10.函數(shù)柯里化

用法：

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

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

讓我們看另一個(gè)例子：

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

用法：

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

12. 部分函數(shù)

用法：

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

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

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

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

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

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

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

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

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

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

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

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

16.簡單的CO模塊

用法：

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

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

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

17. 去抖動(dòng)

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

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

18. 節(jié)流

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

19. 圖像延遲加載

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

實(shí)現(xiàn)一個(gè)intersectionObserver，實(shí)例化IntersectionObserver，讓它觀察所有img標(biāo)簽。

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

每當(dāng)元素進(jìn)入可見區(qū)域時(shí)，將真實(shí)圖像分配給當(dāng)前的img標(biāo)簽并釋放其觀察。

20. new 關(guān)鍵字

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

22.實(shí)現(xiàn)instanceof

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

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

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

以閉包的形式保存私有變量，缺點(diǎn)是類的所有實(shí)例都訪問同一個(gè)私有變量。

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

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

24. 洗牌算法

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

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

25. 單例模式

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

26.Promisify

用法：

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

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

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

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

用法：

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

28. EventEmitter

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

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

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

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

? Array

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

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

? Object

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

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

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

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

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

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

實(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個(gè)關(guān)于JavaScript的技能，如果你覺得有用的話，請記得點(diǎn)贊我，關(guān)注我，并將它分享給你身邊的朋友，也許能夠幫助到他。

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