建站
咨詢
售后
建站咨詢
新聞中心
前言
如果你走過了前端的入門初級階段，那么接下來就是向中高級進(jìn)階，當(dāng)然，關(guān)于這個初中高級的分界線，也沒有一個標(biāo)準(zhǔn)固定的指標(biāo)，但是，不管怎么樣，努力讓自己變得強(qiáng)，是每個技術(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ù)
我們其他不多說，我們現(xiàn)在就開今天的內(nèi)容吧。
另外，就是今天文章中代碼對應(yīng)的詳細(xì)注釋和具體使用方法放在我的GitHub上，源碼可以在底部找到，希望這對你的工作和面試有所幫助。
1.判斷對象的數(shù)據(jù)類型
使用 Object.prototype.toString 配合閉包，通過傳入不同的判斷類型來返回不同的判斷函數(shù)，一行代碼，簡潔優(yōu)雅靈活（注意傳入 type 參數(shù)時(shí)首字母大寫）
不推薦將這個函數(shù)用來檢測可能會產(chǎn)生包裝類型的基本數(shù)據(jù)類型上,因?yàn)?call 始終會將第一個參數(shù)進(jìn)行裝箱操作，導(dǎo)致基本類型和包裝類型無法區(qū)分。
2.循環(huán)實(shí)現(xiàn)數(shù)組map方法
使用方法：將selfMap注入到Array.prototype中（下面數(shù)組的迭代方法也是如此）。
值得一提的是，map的第二個參數(shù)就是第一個參數(shù)回調(diào)中的這個點(diǎn)。如果第一個參數(shù)是箭頭函數(shù)，則設(shè)置第二個 this 將無效，因?yàn)榧^函數(shù)的詞法綁定。
另一個是稀疏數(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í)行某個方法的數(shù)組是一個空數(shù)組，它總是返回false，如果另一個數(shù)組的每個方法中的數(shù)組都是一個空數(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依賴這個指向，所以在減少遍歷的時(shí)候需要指定這個指向selfFlat，否則會默認(rèn)指向一個窗口，會報(bào)錯。
原理是通過歸約來遍歷數(shù)組。當(dāng)數(shù)組的一個元素還是數(shù)組的時(shí)候，通過ES6展開操作符（ES5可以使用concat方法）對其進(jìn)行降維處理，而這個數(shù)組元素內(nèi)部也可能有嵌套數(shù)組，所以，需要遞歸調(diào)用selfFlat。
同時(shí)，原生的flat方法支持一個depth參數(shù)來表示降維的深度。默認(rèn)值為 1，將數(shù)組的維度減少一層。
傳入 Infinity 會將傳入的數(shù)組變成一維數(shù)組。
原理是每次遞歸將深度參數(shù)減1。如果depth參數(shù)為0，直接返回原數(shù)組。
9. 實(shí)現(xiàn) ES6 的Class語法
ES6的Class內(nèi)部是基于寄生組合式繼承，是目前最理想的繼承方式。通過 Object.create() 方法創(chuàng)建一個空對象，并從 Object.create() 方法的參數(shù)中繼承該空對象，然后，讓子類（subType）如果原型對象等于這個空對象，則子類實(shí)例的prototype可以實(shí)現(xiàn)等于這個空對象，這個空對象的原型就等于父類原型對象（superType.prototype）的繼承關(guān)系。
Object.create() 支持第二個參數(shù)，即為生成的空對象定義屬性和屬性描述符/訪問器描述符。我們可以為這個空對象定義一個構(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ù)將一個接受多個參數(shù)的函數(shù)轉(zhuǎn)換為一系列接受一個參數(shù)的函數(shù)。
函數(shù)式編程的另一個重要功能，compose，可以組合函數(shù)，而組合函數(shù)只接受一個參數(shù)，所以，如果需要接受多個函數(shù)并且需要使用compose進(jìn)行函數(shù)組合，則需要對函數(shù)使用currying 要組成的部分被評估，因此它總是只需要一個參數(shù)。
讓我們看另一個例子：
11.函數(shù)柯里化（支持占位符）
用法：
使用占位符可以使柯里化更加靈活， 這個想法是用每一輪的傳入?yún)?shù)填充上一輪的占位符。 如果當(dāng)前輪的參數(shù)包含一個占位符，它們將被放置在內(nèi)部存儲的數(shù)組中。 最后，當(dāng)前輪的元素不會填充當(dāng)前輪參數(shù)的占位符，只會填充之前傳入的占位符。
12. 部分函數(shù)
用法：
偏函數(shù)的概念和柯里化類似。 我個人認(rèn)為它們的區(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)存來保存之前運(yùn)算的結(jié)果，可以為頻繁依賴之前結(jié)果的計(jì)算節(jié)省大量時(shí)間，比如斐波那契數(shù)列， 缺點(diǎn)是閉包中的obj對象會占用額外的內(nèi)存。
另外，使用動態(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ù)中有一個內(nèi)部屬性[[TargetFunction]]來保存原函數(shù)。當(dāng)final函數(shù)作為構(gòu)造函數(shù)時(shí)，創(chuàng)建實(shí)例的__proto__指向[[TargetFunction]]的原型，這里無法模擬內(nèi)部屬性，所以直接聲明一個原型屬性）。
15.實(shí)現(xiàn)函數(shù)call方法
原理是將函數(shù)作為傳入的上下文參數(shù)（context）的一個屬性來執(zhí)行。 這里使用 ES6 Symbol 類型來防止屬性沖突。
16.簡單的CO模塊
用法：
run函數(shù)接受一個生成器函數(shù)，只要run函數(shù)包裹的生成器函數(shù)遇到y(tǒng)ield關(guān)鍵字就停止。
當(dāng)后面的yield的promise成功resolve后，會自動調(diào)用next方法執(zhí)行到下一個yield關(guān)鍵字，最終，只要一個promise成功resolve，就會resolve下一個promise。
當(dāng)所有解析成功后，打印所有解析的結(jié)果，演變成現(xiàn)在最常用的async/await語法
17. 去抖動
Leading進(jìn)入時(shí)是否執(zhí)行一次，原理是使用的定時(shí)器。 如果在指定時(shí)間內(nèi)再次觸發(fā)事件，則清除最后一個定時(shí)器，即不執(zhí)行該函數(shù)，并重新設(shè)置一個新的定時(shí)器，直到超過指定時(shí)間， 時(shí)間自動觸發(fā)定時(shí)器中的功能。
同時(shí)，通過閉包暴露了一個取消函數(shù)，使得外部可以直接清除內(nèi)部計(jì)數(shù)器。
18. 節(jié)流
與防抖功能類似，不同之處在于額外使用內(nèi)部時(shí)間戳作為判斷，如果在一段時(shí)間內(nèi)沒有觸發(fā)事件，則允許觸發(fā)下一個事件。 同時(shí)增加了一個尾隨選項(xiàng)，表示最后是否觸發(fā)附加時(shí)間。
19. 圖像延遲加載
getBoundClientRect 的實(shí)現(xiàn)方法是監(jiān)聽滾動事件（建議在監(jiān)聽事件中加入節(jié)流），圖片加載后會從img標(biāo)簽組成的DOM列表中刪除，最后需要解除所有圖片的綁定加載監(jiān)視器事件后。
實(shí)現(xiàn)一個intersectionObserver，實(shí)例化IntersectionObserver，讓它觀察所有img標(biāo)簽。
當(dāng)img標(biāo)簽進(jìn)入可見區(qū)域時(shí)，執(zhí)行實(shí)例化回調(diào)，并傳入一個entry參數(shù)給回調(diào)，其中保存了實(shí)例觀察到的所有元素的一些狀態(tài)，比如，每個元素的邊界信息，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í)例都訪問同一個私有變量。
閉包的另一種實(shí)現(xiàn)解決了上述閉包的缺點(diǎn)，每個實(shí)例都有自己的私有變量。 缺點(diǎn)是拋棄了類語法的簡單性，拋棄了所有特權(quán)方法（訪問私有變量的方法）， 存儲在構(gòu)造函數(shù)中。
通過WeakMap和閉包，在每次實(shí)例化時(shí)保存當(dāng)前實(shí)例和所有私有變量組成的對象，而閉包中的WeakMap無法從外部訪問。 使用 WeakMap 的好處是當(dāng)實(shí)例沒有變量引用時(shí)，會自動釋放， 實(shí)例保存的私有變量，減少內(nèi)存溢出問題。
24. 洗牌算法
早期的chrome對少于10個元素的數(shù)組使用了插入排序，這樣會導(dǎo)致數(shù)組亂序，并不是真的亂序，即使最新版的chrome使用了in-place算法，使得排序成為一種穩(wěn)定的算法， 亂序問題仍未解決。
真正的無序可以通過shuffle算法來實(shí)現(xiàn)， 洗牌算法分為原位和非原位。 圖1是原位改組算法，無需聲明額外的數(shù)組來節(jié)省內(nèi)存使用。 原則是按順序遍歷。 數(shù)組的元素，隨機(jī)選擇當(dāng)前元素和所有后續(xù)元素中的一個，進(jìn)行交換。
25. 單例模式
ES6的Proxy實(shí)現(xiàn)的單例模式攔截構(gòu)造函數(shù)的執(zhí)行方法。
26.Promisify
用法：
promisify 函數(shù)是將回調(diào)函數(shù)變成promise的輔助函數(shù)，適用于錯誤優(yōu)先風(fēng)格（nodejs）的回調(diào)函數(shù)。
原理是無論error-first風(fēng)格的回調(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 時(shí)都包裹一層 try/catch，更加優(yōu)雅。 這是另一個想法。 如果使用webpack，可以寫一個loader，分析AST語法樹，遇到await語法時(shí)自動注入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ù)類型會被扭曲，主要如下：
? 如果對象包含 toJSON 方法，將調(diào)用 toJSON。
? Array
1.有Undefined/Symbol/Function數(shù)據(jù)類型時(shí)會變?yōu)閚ull。
2. Infinity/NaN 的存在也將變?yōu)?null。
? Object
1.當(dāng)屬性值為Undefined/Symbol/Function數(shù)據(jù)類型時(shí)，屬性和值都不會轉(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ù)，有興趣的朋友可以詳細(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個關(guān)于JavaScript的技能，如果你覺得有用的話，請記得點(diǎn)贊我，關(guān)注我，并將它分享給你身邊的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，祝編程愉快！
網(wǎng)站名稱：29個合格前端工程師需要掌握的JavaScript技能
分享網(wǎng)址：http://www.5511xx.com/article/dpjgphc.html
