建站
咨詢
售后
建站咨詢
新聞中心
前言
如果你走過(guò)了前端的入門初級(jí)階段，那么接下來(lái)就是向中高級(jí)進(jìn)階，當(dāng)然，關(guān)于這個(gè)初中高級(jí)的分界線，也沒有一個(gè)標(biāo)準(zhǔn)固定的指標(biāo)，但是，不管怎么樣，努力讓自己變得強(qiáng)，是每個(gè)技術(shù)人的底氣。
創(chuàng)新互聯(lián)專注于惠山企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)?；萆骄W(wǎng)站建設(shè)公司,為惠山等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
我們其他不多說(shuō)，我們現(xiàn)在就開今天的內(nèi)容吧。
另外，就是今天文章中代碼對(duì)應(yīng)的詳細(xì)注釋和具體使用方法放在我的GitHub上，源碼可以在底部找到，希望這對(duì)你的工作和面試有所幫助。
1.判斷對(duì)象的數(shù)據(jù)類型
使用 Object.prototype.toString 配合閉包，通過(guò)傳入不同的判斷類型來(lái)返回不同的判斷函數(shù)，一行代碼，簡(jiǎn)潔優(yōu)雅靈活（注意傳入 type 參數(shù)時(shí)首字母大寫）
不推薦將這個(gè)函數(shù)用來(lái)檢測(cè)可能會(huì)產(chǎn)生包裝類型的基本數(shù)據(jù)類型上,因?yàn)?call 始終會(huì)將第一個(gè)參數(shù)進(jìn)行裝箱操作，導(dǎo)致基本類型和包裝類型無(wú)法區(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 將無(wú)效，因?yàn)榧^函數(shù)的詞法綁定。
另一個(gè)是稀疏數(shù)組的處理，HasOwnProperty 用于判斷當(dāng)前下標(biāo)的元素是否存在于數(shù)組中，歡迎大家在評(píng)論區(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需要保證跳過(guò)稀疏元素，遍歷正確的元素和下標(biāo)。
8.使用reduce實(shí)現(xiàn)數(shù)組的flat方法
因?yàn)閟elfFlat依賴這個(gè)指向，所以在減少遍歷的時(shí)候需要指定這個(gè)指向selfFlat，否則會(huì)默認(rèn)指向一個(gè)窗口，會(huì)報(bào)錯(cuò)。
原理是通過(guò)歸約來(lái)遍歷數(shù)組。當(dāng)數(shù)組的一個(gè)元素還是數(shù)組的時(shí)候，通過(guò)ES6展開操作符（ES5可以使用concat方法）對(duì)其進(jìn)行降維處理，而這個(gè)數(shù)組元素內(nèi)部也可能有嵌套數(shù)組，所以，需要遞歸調(diào)用selfFlat。
同時(shí)，原生的flat方法支持一個(gè)depth參數(shù)來(lái)表示降維的深度。默認(rèn)值為 1，將數(shù)組的維度減少一層。
傳入 Infinity 會(huì)將傳入的數(shù)組變成一維數(shù)組。
原理是每次遞歸將深度參數(shù)減1。如果depth參數(shù)為0，直接返回原數(shù)組。
9. 實(shí)現(xiàn) ES6 的Class語(yǔ)法
ES6的Class內(nèi)部是基于寄生組合式繼承，是目前最理想的繼承方式。通過(guò) Object.create() 方法創(chuàng)建一個(gè)空對(duì)象，并從 Object.create() 方法的參數(shù)中繼承該空對(duì)象，然后，讓子類（subType）如果原型對(duì)象等于這個(gè)空對(duì)象，則子類實(shí)例的prototype可以實(shí)現(xiàn)等于這個(gè)空對(duì)象，這個(gè)空對(duì)象的原型就等于父類原型對(duì)象（superType.prototype）的繼承關(guān)系。
Object.create() 支持第二個(gè)參數(shù)，即為生成的空對(duì)象定義屬性和屬性描述符/訪問(wèn)器描述符。我們可以為這個(gè)空對(duì)象定義一個(gè)構(gòu)造函數(shù)屬性，更符合默認(rèn)的繼承行為，不可枚舉，可枚舉的內(nèi)部屬性（可枚舉：false）。
ES6類允許子類繼承父類的靜態(tài)方法和靜態(tài)屬性，而普通的寄生組合繼承只能實(shí)現(xiàn)實(shí)例之間的繼承。對(duì)于類之間的繼承，需要定義額外的方法。這里使用 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ù)組合，則需要對(duì)函數(shù)使用currying 要組成的部分被評(píng)估，因此它總是只需要一個(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)存來(lái)保存之前運(yùn)算的結(jié)果，可以為頻繁依賴之前結(jié)果的計(jì)算節(jié)省大量時(shí)間，比如斐波那契數(shù)列， 缺點(diǎn)是閉包中的obj對(duì)象會(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 指定的對(duì)象。
? 定義綁定函數(shù)的長(zhǎng)度屬性和名稱屬性（不可枚舉的屬性）。
? 綁定函數(shù)的原型需要指向原函數(shù)的原型（實(shí)際情況下，綁定函數(shù)沒有原型。而是綁定函數(shù)中有一個(gè)內(nèi)部屬性[[TargetFunction]]來(lái)保存原函數(shù)。當(dāng)final函數(shù)作為構(gòu)造函數(shù)時(shí)，創(chuàng)建實(shí)例的__proto__指向[[TargetFunction]]的原型，這里無(wú)法模擬內(nèi)部屬性，所以直接聲明一個(gè)原型屬性）。
15.實(shí)現(xiàn)函數(shù)call方法
原理是將函數(shù)作為傳入的上下文參數(shù)（context）的一個(gè)屬性來(lái)執(zhí)行。 這里使用 ES6 Symbol 類型來(lái)防止屬性沖突。
16.簡(jiǎn)單的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語(yǔ)法
17. 去抖動(dòng)
Leading進(jìn)入時(shí)是否執(zhí)行一次，原理是使用的定時(shí)器。 如果在指定時(shí)間內(nèi)再次觸發(fā)事件，則清除最后一個(gè)定時(shí)器，即不執(zhí)行該函數(shù)，并重新設(shè)置一個(gè)新的定時(shí)器，直到超過(guò)指定時(shí)間， 時(shí)間自動(dòng)觸發(fā)定時(shí)器中的功能。
同時(shí)，通過(guò)閉包暴露了一個(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) 對(duì)應(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代理所有以_開頭的變量，使其無(wú)法被外部訪問(wèn)。
以閉包的形式保存私有變量，缺點(diǎn)是類的所有實(shí)例都訪問(wèn)同一個(gè)私有變量。
閉包的另一種實(shí)現(xiàn)解決了上述閉包的缺點(diǎn)，每個(gè)實(shí)例都有自己的私有變量。 缺點(diǎn)是拋棄了類語(yǔ)法的簡(jiǎn)單性，拋棄了所有特權(quán)方法（訪問(wèn)私有變量的方法）， 存儲(chǔ)在構(gòu)造函數(shù)中。
通過(guò)WeakMap和閉包，在每次實(shí)例化時(shí)保存當(dāng)前實(shí)例和所有私有變量組成的對(duì)象，而閉包中的WeakMap無(wú)法從外部訪問(wèn)。 使用 WeakMap 的好處是當(dāng)實(shí)例沒有變量引用時(shí)，會(huì)自動(dòng)釋放， 實(shí)例保存的私有變量，減少內(nèi)存溢出問(wèn)題。
24. 洗牌算法
早期的chrome對(duì)少于10個(gè)元素的數(shù)組使用了插入排序，這樣會(huì)導(dǎo)致數(shù)組亂序，并不是真的亂序，即使最新版的chrome使用了in-place算法，使得排序成為一種穩(wěn)定的算法， 亂序問(wèn)題仍未解決。
真正的無(wú)序可以通過(guò)shuffle算法來(lái)實(shí)現(xiàn)， 洗牌算法分為原位和非原位。 圖1是原位改組算法，無(wú)需聲明額外的數(shù)組來(lái)節(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ù)。
原理是無(wú)論error-first風(fēng)格的回調(diào)成功還是失敗，執(zhí)行完后都會(huì)執(zhí)行最后一個(gè)回調(diào)函數(shù)。 我們需要做的就是讓這個(gè)回調(diào)函數(shù)控制 Promise 的狀態(tài)。
這里也使用proxy來(lái)代理整個(gè)fs模塊，攔截get方法，這樣就不用手動(dòng)把fs模塊的所有方法都用promisify函數(shù)包裹起來(lái)，比較靈活。
27. 優(yōu)雅地處理 async/await
用法：
不需要每次使用 async/await 時(shí)都包裹一層 try/catch，更加優(yōu)雅。 這是另一個(gè)想法。 如果使用webpack，可以寫一個(gè)loader，分析AST語(yǔ)法樹，遇到await語(yǔ)法時(shí)自動(dòng)注入try/catch， 這樣你甚至不需要使用輔助函數(shù)。
28. EventEmitter
on 方法用于注冊(cè)事件，trigger 方法觸發(fā)事件實(shí)現(xiàn)事件之間的松散解耦，并增加了額外的once and off 輔助功能來(lái)注冊(cè)僅觸發(fā)一次的事件和注銷事件。
29. 實(shí)現(xiàn) JSON.stringify
使用 JSON.stringify 將對(duì)象轉(zhuǎn)換為 JSON 字符串時(shí)，一些非法數(shù)據(jù)類型會(huì)被扭曲，主要如下：
? 如果對(duì)象包含 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ù)組/對(duì)象/函數(shù)/日期的復(fù)雜數(shù)據(jù)類型變?yōu)榭諏?duì)象。
? 循環(huán)引用引發(fā)錯(cuò)誤。
此外，JSON.stringify 還可以傳入第二個(gè)和第三個(gè)可選參數(shù)，有興趣的朋友可以詳細(xì)了解一下。
實(shí)現(xiàn)代碼比較長(zhǎng)，這里我直接貼上對(duì)應(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的技能，如果你覺得有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將它分享給你身邊的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，祝編程愉快！
網(wǎng)站欄目：29個(gè)合格前端工程師需要掌握的JavaScript技能
URL鏈接：http://www.dlmjj.cn/article/dpjgphc.html
