10個(gè)實(shí)用的Javascript技巧
前言
?由于近年來(lái)推出了許多 JavaScript 框架，它已成為開(kāi)發(fā) Web 應(yīng)用程序的明確選擇。以下是一些最流行的 JavaScript 框架
?
ReactJS VueJS AngularJS Express.JS Svelte Backbone.JS jQuery
考慮到這一點(diǎn)，是時(shí)候看看一些易于實(shí)現(xiàn)并保證提高代碼可讀性（和完整性）的實(shí)用技巧了。
1. 將參數(shù)作為對(duì)象傳遞
這種傳遞參數(shù)的方式有很多好處：
參數(shù)的順序不再重要，讓你可以專(zhuān)注于交付高質(zhì)量的代碼，而不是反復(fù)檢查函數(shù)定義。 自動(dòng)完成變得更容易，因?yàn)?IDE將專(zhuān)注于你提供的特定參數(shù)。 此方法以清晰的方式傳達(dá)意圖，因?yàn)楹瘮?shù)調(diào)用指定了每個(gè)屬性的值。 有利于大型項(xiàng)目的維護(hù)
使用生成器創(chuàng)建順序ID
隨著 ES6 中引入的生成器，生成無(wú)限的、不可重復(fù)的序列從未如此簡(jiǎn)單！如果你不知道生成器是什么，它們是通過(guò)使用yield關(guān)鍵字按需處理和返回?cái)?shù)據(jù)來(lái)使用惰性求值的函數(shù)。
看起來(lái)生成器函數(shù)會(huì)在無(wú)限循環(huán)中消耗 CPU 周期，但是，生成器描述了一個(gè)狀態(tài)機(jī)，允許通過(guò)提供的代碼（通過(guò)后續(xù)的產(chǎn)量）發(fā)生到前向狀態(tài)的轉(zhuǎn)換。每當(dāng)調(diào)用next方法時(shí)，這些轉(zhuǎn)換都會(huì)按需發(fā)生，因此稱(chēng)為惰性求值！
?有了這個(gè)技巧，你不再需要依賴(lài)全局/類(lèi)范圍的變量來(lái)記住狀態(tài)！
?
3.用空格格式化JSON輸出
一個(gè)簡(jiǎn)單但非常有效的工具，通過(guò)在第三個(gè)參數(shù)中提供用于縮進(jìn)的空格量來(lái)導(dǎo)出可讀的 JSON。
第二個(gè)參數(shù)是替換器，它可以是控制字符串化過(guò)程的函數(shù)，也可以是數(shù)組，在這種情況下，它指示應(yīng)包含在字符串化輸出中的屬性的名稱(chēng)。
4. 使用可選鏈操作符
由于大多數(shù)瀏覽器都支持可選鏈接，現(xiàn)在可以更輕松地解析復(fù)雜對(duì)象。以前，開(kāi)發(fā)人員會(huì)求助于使用短路或嵌套 if 語(yǔ)句來(lái)與 undefined 進(jìn)行比較。
現(xiàn)在，使用可選鏈運(yùn)算符完成相同的驗(yàn)證更容易（更干凈！）。更好的是，你甚至可以使用括號(hào)表示法將可選鏈接與表達(dá)式一起使用，或者，如果你有一個(gè)深度嵌套的對(duì)象，你可以堆疊可選鏈接運(yùn)算符來(lái)檢查更深層次的屬性。
5.利用解構(gòu)賦值語(yǔ)法
另一個(gè)快速簡(jiǎn)便的技巧，它允許你從 JavaScript 對(duì)象中提取與你最相關(guān)的信息。
使用解構(gòu)語(yǔ)法，開(kāi)發(fā)人員能夠快速將數(shù)組中的值或?qū)ο笾械膶傩越鈮嚎s到指定的變量中。
這種語(yǔ)法允許使用多種技巧，例如變量交換單行或僅解析返回對(duì)象中有意義的屬性。
6. 使用擴(kuò)展運(yùn)算符淺拷貝對(duì)象（和數(shù)組！）
隨著 JavaScript 中擴(kuò)展語(yǔ)法的引入，現(xiàn)在擴(kuò)展對(duì)象或數(shù)組并執(zhí)行復(fù)制變得比以往任何時(shí)候都容易。
當(dāng)你必須執(zhí)行反應(yīng)或做出反應(yīng)的天然狀態(tài)的管理，因?yàn)樗心阈枰龅木褪菑?fù)制當(dāng)前狀態(tài)與對(duì)象字面這是特別有用的，修改你所選擇的屬性，并與所提供的狀態(tài)鉤改變狀態(tài)ü本身狀態(tài).
這也是連接數(shù)組或使用單行合并對(duì)象的一種非常好的方法，而不必遍歷每個(gè)實(shí)例并手動(dòng)合并。
7. 使用 Set 從數(shù)組中刪除重復(fù)項(xiàng)
一種使用簡(jiǎn)單的單行從數(shù)組中刪除重復(fù)項(xiàng)的簡(jiǎn)單但非常有效的方法。在這個(gè)例子中，我們還使用了最近展示的擴(kuò)展運(yùn)算符來(lái)擴(kuò)展集合并構(gòu)造一個(gè)數(shù)組。
這個(gè)技巧適用于任何類(lèi)型的值，它甚至可以處理 JavaScript 的一些奇怪的相等行為。
你還可以使用集合從復(fù)雜對(duì)象的數(shù)組中刪除重復(fù)項(xiàng)。
8.等待多個(gè)promise完成
每當(dāng)你需要啟動(dòng)多個(gè)任務(wù)并等待它們完成時(shí)，這個(gè)技巧就會(huì)發(fā)揮作用。由于每個(gè)任務(wù)都是異步運(yùn)行的，因此它們可以并行處理，并且一旦所有promise都得到解決，就可以使用返回的數(shù)據(jù)。
請(qǐng)記住，如果單個(gè)promise被拒絕，Promise.all也會(huì)立即返回一個(gè)被拒絕的promise。
如果你正在開(kāi)發(fā)微服務(wù)架構(gòu)并且需要盡快從多個(gè)端點(diǎn)獲取重要的非順序數(shù)據(jù)，則可以使用此技巧。
一旦所有promise都解決了，Promise.all將返回一個(gè)promise，該promise解決了最初提供的promise結(jié)果的數(shù)組。
你還可以像任何promise一樣指定then回調(diào)來(lái)處理結(jié)果。
9. 使用 map 在數(shù)組中轉(zhuǎn)換值
這可能是本文中最簡(jiǎn)單的技巧之一，但它提供了一種非常優(yōu)雅的解決方案，用于將表示為字符串的數(shù)值數(shù)組轉(zhuǎn)換為 JavaScript 數(shù)字（所有 JavaScript 數(shù)字都是 64 位浮點(diǎn)數(shù)）。
這利用了Array的map方法，并通過(guò)將Number作為參數(shù)傳遞，對(duì)于數(shù)組中的每個(gè)值，它將調(diào)用Number的構(gòu)造函數(shù)并返回結(jié)果。
10. 為代碼的執(zhí)行計(jì)時(shí)
對(duì)于尋求提供高性能代碼的開(kāi)發(fā)人員來(lái)說(shuō)，這是一個(gè)無(wú)價(jià)的工具，time方法將計(jì)時(shí)器名稱(chēng)作為參數(shù)，并期望通過(guò)調(diào)用timeEnd來(lái)滿足，其中提供了相同的計(jì)時(shí)器名稱(chēng)。
該timeEnd方法打印在兩個(gè)函數(shù)調(diào)用之間的毫秒所經(jīng)過(guò)的時(shí)間，它允許程序員迅速觀察他們的代碼重構(gòu)和輕松的瓶頸。
這種方法比手動(dòng)計(jì)算執(zhí)行時(shí)間要好得多，因?yàn)樗莾?nèi)置的，并且在現(xiàn)代瀏覽器中得到廣泛支持。
參考文獻(xiàn)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
https://developer.mozilla.org/en-US/docs/Web/API/Console