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