自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧

開發(fā) 前端
和許多其他語言一樣,JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經(jīng)廣為人知,有的卻可能會(huì)讓你感到有些迷惑。接下來先介紹27個(gè)馬上就能用起來的 JavaScript 小技巧,下面和小編一起來看看吧!
和許多其他語言一樣,JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經(jīng)廣為人知,有的卻可能會(huì)讓你感到有些迷惑。接下來先介紹27個(gè)馬上就能用起來的 JavaScript 小技巧,下面和小編一起來看看吧!

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用 Object.prototype.toString 配合閉包,在保證判斷數(shù)據(jù)類型的準(zhǔn)確性時(shí),同時(shí)能讓這個(gè)函數(shù)非常靈活,通過傳入不同的判斷類型來返回不同的判斷函數(shù)(注意傳入 type 參數(shù)時(shí)首字母大寫)。

2. ES5 實(shí)現(xiàn)數(shù)組 map 方法

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

值得一提的是,map 的第二個(gè)參數(shù)為第一個(gè)參數(shù)回調(diào)中的 this 指向,如果第一個(gè)參數(shù)為箭頭函數(shù),那設(shè)置第二個(gè) this 會(huì)因?yàn)榧^函數(shù)的詞法綁定而失效。

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

4. ES5 實(shí)現(xiàn)數(shù)組 filter 方法

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

 

6. ES5 實(shí)現(xiàn)數(shù)組的 some 方法

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

執(zhí)行 some 方法的數(shù)組如果是一個(gè)空數(shù)組,最終始終會(huì)返回 false,而另一個(gè)數(shù)組的 every 方法中的數(shù)組如果是一個(gè)空數(shù)組,會(huì)始終返回 true。

7. ES5 實(shí)現(xiàn)數(shù)組的 reduce 方法

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

因?yàn)?selfFlat 是依賴 this 指向的,所以在 reduce 遍歷時(shí)需要指定 selfFlat 的 this 指向,否則會(huì)默認(rèn)指向 window 從而發(fā)生錯(cuò)誤。

原理通過 reduce 遍歷數(shù)組,遇到數(shù)組的某個(gè)元素仍是數(shù)組時(shí),通過 ES6 的擴(kuò)展運(yùn)算符對(duì)其進(jìn)行降維(ES5 可以使用 concat 方法),而這個(gè)數(shù)組元素可能內(nèi)部還嵌套數(shù)組,所以需要遞歸調(diào)用 selfFlat。

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

傳入 Inifity 會(huì)將傳入的數(shù)組變成一個(gè)一維數(shù)組。

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

原理是每遞歸一次將 depth 參數(shù)減 1,如果 depth 參數(shù)為 0 時(shí),直接返回原數(shù)組。

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

ES6 的 class 內(nèi)部是基于寄生組合式繼承,它是目前最理想的繼承方式,通過 Object.create 方法創(chuàng)造一個(gè)空對(duì)象,并將這個(gè)空對(duì)象繼承 Object.create 方法的參數(shù),再讓子類(subType)的原型對(duì)象等于這個(gè)空對(duì)象,就可以實(shí)現(xiàn)子類實(shí)例的原型等于這個(gè)空對(duì)象,而這個(gè)空對(duì)象的原型又等于父類原型對(duì)象(superType.prototype)的繼承關(guān)系。

而 Object.create 支持第二個(gè)參數(shù),即給生成的空對(duì)象定義屬性和屬性描述符/訪問器描述符,我們可以給這個(gè)空對(duì)象定義一個(gè) constructor 屬性更加符合默認(rèn)的繼承行為,同時(shí)它是不可枚舉的內(nèi)部屬性(enumerable:false)。

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

10. 函數(shù)柯里化

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用方法:

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

柯里化是函數(shù)式編程的一個(gè)重要技巧,將使用多個(gè)參數(shù)的一個(gè)函數(shù)轉(zhuǎn)換成一系列使用一個(gè)參數(shù)的函數(shù)的技術(shù)。

函數(shù)式編程另一個(gè)重要的函數(shù) compose,能夠?qū)⒑瘮?shù)進(jìn)行組合,而組合的函數(shù)只接受一個(gè)參數(shù),所以如果有接受多個(gè)函數(shù)的需求并且需要用到 compose 進(jìn)行函數(shù)組合,就需要使用柯里化對(duì)準(zhǔn)備組合的函數(shù)進(jìn)行部分求值,讓它始終只接受一個(gè)參數(shù)。

借用冴羽博客中的一個(gè)例子:

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用方法:

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

通過占位符能讓柯里化更加靈活,實(shí)現(xiàn)思路是,每一輪傳入的參數(shù)先去填充上一輪的占位符,如果當(dāng)前輪參數(shù)含有占位符,則放到內(nèi)部保存的數(shù)組末尾,當(dāng)前輪的元素不會(huì)去填充當(dāng)前輪參數(shù)的占位符,只會(huì)填充之前傳入的占位符。

12. 偏函數(shù)

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用方法:

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

Function.prototype.bind 函數(shù)就是一個(gè)偏函數(shù)的典型代表,它接受的第二個(gè)參數(shù)開始,為預(yù)先添加到綁定函數(shù)的參數(shù)列表中的參數(shù),與 bind 不同的是,上面的這個(gè)函數(shù)同樣支持占位符。

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

利用函數(shù)記憶,將之前運(yùn)算過的結(jié)果保存下來,對(duì)于頻繁依賴之前結(jié)果的計(jì)算能夠節(jié)省大量的時(shí)間,例如斐波那契數(shù)列,缺點(diǎn)就是閉包中的 obj 對(duì)象會(huì)額外占用內(nèi)存。

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

函數(shù)的 bind 方法核心是利用 call,同時(shí)考慮了一些其他情況,例如:

  • bind 返回的函數(shù)被 new 調(diào)用作為構(gòu)造函數(shù)時(shí),綁定的值會(huì)失效并且改為 new 指定的對(duì)象
  • 定義了綁定后函數(shù)的 length 屬性和 name 屬性(不可枚舉屬性)
  • 綁定后函數(shù)的原型需指向原來的函數(shù)

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

16. 簡易的 CO 模塊

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用方法:

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

run 函數(shù)接受一個(gè)生成器函數(shù),每當(dāng) run 函數(shù)包裹的生成器函數(shù)遇到 yield 關(guān)鍵字就會(huì)停止,當(dāng) yield 后面的 promise 被解析成功后會(huì)自動(dòng)調(diào)用 next 方法執(zhí)行到下個(gè) yield 關(guān)鍵字處,最終就會(huì)形成每當(dāng)一個(gè) promise 被解析成功就會(huì)解析下個(gè) promise,當(dāng)全部解析成功后打印所有解析的結(jié)果,衍變?yōu)楝F(xiàn)在用的最多的 async/await 語法。

17. 函數(shù)防抖

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

leading 為是否在進(jìn)入時(shí)立即執(zhí)行一次, trailing 為是否在事件觸發(fā)結(jié)束后額外再觸發(fā)一次,原理是利用定時(shí)器,如果在規(guī)定時(shí)間內(nèi)再次觸發(fā)事件會(huì)將上次的定時(shí)器清除,即不會(huì)執(zhí)行函數(shù)并重新設(shè)置一個(gè)新的定時(shí)器,直到超過規(guī)定時(shí)間自動(dòng)觸發(fā)定時(shí)器中的函數(shù)。

同時(shí)通過閉包向外暴露了一個(gè) cancel 函數(shù),使得外部能直接清除內(nèi)部的計(jì)數(shù)器。

18. 函數(shù)節(jié)流

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

和函數(shù)防抖類似,區(qū)別在于內(nèi)部額外使用了時(shí)間戳作為判斷,在一段時(shí)間內(nèi)沒有觸發(fā)事件才允許下次事件觸發(fā)。

19. 圖片懶加載

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

getBoundClientRect 的實(shí)現(xiàn)方式,監(jiān)聽 scroll 事件(建議給監(jiān)聽事件添加節(jié)流),圖片加載完會(huì)從 img 標(biāo)簽組成的 DOM 列表中刪除,最后所有的圖片加載完畢后需要解綁監(jiān)聽事件。

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

intersectionObserver 的實(shí)現(xiàn)方式,實(shí)例化一個(gè) IntersectionObserver ,并使其觀察所有 img 標(biāo)簽。

當(dāng) img 標(biāo)簽進(jìn)入可視區(qū)域時(shí)會(huì)執(zhí)行實(shí)例化時(shí)的回調(diào),同時(shí)給回調(diào)傳入一個(gè) entries 參數(shù),保存著實(shí)例觀察的所有元素的一些狀態(tài),比如每個(gè)元素的邊界信息,當(dāng)前元素對(duì)應(yīng)的 DOM 節(jié)點(diǎn),當(dāng)前元素進(jìn)入可視區(qū)域的比率,每當(dāng)一個(gè)元素進(jìn)入可視區(qū)域,將真正的圖片賦值給當(dāng)前 img 標(biāo)簽,同時(shí)解除對(duì)其的觀察。

20. new 關(guān)鍵字

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

Object.assign 的原理可以參考我另外一篇博客。

22. instanceof

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

原理是遞歸遍歷 right 參數(shù)的原型鏈,每次和 left 參數(shù)作比較,遍歷到原型鏈終點(diǎn)時(shí)則返回 false,找到則返回 true。

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用 Proxy 代理所有含有 _ 開頭的變量,使其不可被外部訪問。

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

另一種閉包的實(shí)現(xiàn),解決了上面那種閉包的缺點(diǎn),每個(gè)實(shí)例都有各自的私有變量,缺點(diǎn)是舍棄了 class 語法的簡潔性,將所有的特權(quán)方法(訪問私有變量的方法)都保存在構(gòu)造函數(shù)中。

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

通過 WeakMap 和閉包,在每次實(shí)例化時(shí)保存當(dāng)前實(shí)例和所有私有變量組成的對(duì)象,外部無法訪問閉包中的 WeakMap,使用 WeakMap 好處在于不需要擔(dān)心內(nèi)存溢出的問題。

24. 洗牌算法

早前的 chrome 對(duì)于元素小于 10 的數(shù)組會(huì)采用插入排序,這會(huì)導(dǎo)致對(duì)數(shù)組進(jìn)行的亂序并不是真正的亂序,即使最新的版本 chrome 采用了原地算法使得排序變成了一個(gè)穩(wěn)定的算法,對(duì)于亂序的問題仍沒有解決。

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

通過洗牌算法可以達(dá)到真正的亂序,洗牌算法分為原地和非原地,圖一是原地的洗牌算法,不需要聲明額外的數(shù)組從而更加節(jié)約內(nèi)存占用率,原理是依次遍歷數(shù)組的元素,將當(dāng)前元素和之后的所有元素中隨機(jī)選取一個(gè),進(jìn)行交換。

25. 單例模式

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

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

26. promisify

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用方法:

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

promisify 函數(shù)是將回調(diào)函數(shù)變?yōu)?promise 的輔助函數(shù),適合 error-first 風(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

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

使用方法:

干貨總結(jié):中級(jí)前端工程師必須要掌握的27個(gè)JavaScript 技巧 

無需每次使用 async/await 都包裹一層 try/catch ,更加的優(yōu)雅,這里提供另外一個(gè)思路,如果使用了 webpack 可以編寫一個(gè) loader,分析 AST 語法樹,遇到 await 語法,自動(dòng)注入 try/catch,這樣連輔助函數(shù)都不需要使用。

 

責(zé)任編輯:龐桂玉 來源: 今日頭條
相關(guān)推薦

2022-08-12 09:21:43

前端JavaScript代碼

2019-08-07 15:20:08

Git開源命令

2020-04-08 17:10:03

GitHub代碼開源

2023-08-11 13:25:00

JavaScript

2023-12-27 14:12:40

JavaScrip技巧

2015-05-07 15:13:22

JS實(shí)現(xiàn)JQueryJQuery

2021-12-03 18:04:06

命令 RabbitMQ Web

2012-04-09 13:16:20

DIVCSS

2021-12-08 23:16:02

Windows 11Windows微軟

2018-06-12 15:55:07

編程語言Java加密方式

2015-08-26 14:18:25

Web前端工程師價(jià)值

2017-03-30 16:03:06

Linux運(yùn)維工程師技能

2019-06-24 09:40:17

前端前端工程師開發(fā)工具

2015-09-30 10:25:03

前端工程師

2019-06-20 17:39:12

Android啟動(dòng)優(yōu)化

2020-07-22 14:50:35

Python數(shù)據(jù)分析

2024-04-09 16:24:18

Promise開發(fā)

2023-05-29 16:05:01

2019-08-15 09:35:03

2019-12-27 15:05:11

LinuxWindowsDNS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)