這篇文章主要講解了“需要掌握的JavaScript技巧有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“需要掌握的JavaScript技巧有哪些”吧！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比清澗網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式清澗網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋清澗地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

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

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

不推薦將這個(gè)函數(shù)用來檢測(cè)可能會(huì)產(chǎn)生包裝類型的基本數(shù)據(jù)類型上,因?yàn)?call 會(huì)將第一個(gè)參數(shù)進(jìn)行裝箱操作

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

image

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

另外就是對(duì)稀疏數(shù)組的處理，通過 hasOwnProperty 來判斷當(dāng)前下標(biāo)的元素是否存在與數(shù)組中(感謝評(píng)論區(qū)的朋友)

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

image

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

image

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

image

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

image

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

如果你對(duì)前端開發(fā)這門技術(shù)感興趣，這里推薦一下我的前端學(xué)習(xí)交流群：767273102，里面都是學(xué)習(xí)前端的從最基礎(chǔ)的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動(dòng)端HTML5的項(xiàng)目實(shí)戰(zhàn)的資料都有整理，送給每一位前端小伙伴。最新技術(shù)，與企業(yè)需求同步。好友都在里面學(xué)習(xí)交流，每天都會(huì)有大牛定時(shí)講解前端技術(shù)!

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

image

因?yàn)榭赡艽嬖谙∈钄?shù)組的關(guān)系，所以 reduce 實(shí)現(xiàn)略有點(diǎn)復(fù)雜，需要保證跳過稀疏元素，遍歷正確的元素和下標(biāo)，有更簡(jiǎn)潔的寫法歡迎評(píng)論區(qū)留言

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

image

因?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ù)組降一層維度

image

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

image

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

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

image

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ù)柯里化

image

使用方法：

image

柯里化是函數(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è)例子

image

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

image

使用方法：

image

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

12. 偏函數(shù)

image

使用方法：

image

偏函數(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)化

image

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

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

image

函數(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 方法

image

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

16. 簡(jiǎn)易的 CO 模塊

image

使用方法：

image

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ù)防抖

image

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é)流

image

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

19. 圖片懶加載

image

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

image

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)鍵字

image

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

image

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

22. instanceof

image

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

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

image

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

image

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

image

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

image

通過 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ì)于亂序的問題仍沒有解決

image

image

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

25. 單例模式

image

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

26. promisify

image

使用方法：

image

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

image

使用方法：

image

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

28. 發(fā)布訂閱 EventEmitter

image

通過 on 方法注冊(cè)事件，trigger 方法觸發(fā)事件，來達(dá)到事件之間的松散解耦，并且額外添加了 once 和 off 輔助函數(shù)用于注冊(cè)只觸發(fā)一次的事件以及注銷事件

感謝各位的閱讀，以上就是“需要掌握的JavaScript技巧有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)需要掌握的JavaScript技巧有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

標(biāo)題名稱：需要掌握的JavaScript技巧有哪些-創(chuàng)新互聯(lián)
分享URL：http://www.yijiale78.com/article8/pcgip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、云服務(wù)器、網(wǎng)站導(dǎo)航、定制開發(fā)、移動(dòng)網(wǎng)站建設(shè)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)