9個實用的JavaScript開發(fā)技巧，你一定要看下
英文 | https://javascript.plainenglish.io/9-javascript-hacks-nobody-talks-about-f15445e301ca
翻譯 | web前端開發(fā)公眾號
1、快速調(diào)整大小和清空數(shù)組
const array = [1,2,3,4,5];console.log（array）; // 5array.length--;console.log（array）; // 4array.length + = 15;console.log（array）; // 19
該代碼段的輸出為：
[][][]undefined
你還可以通過將長度設置為0來刪除數(shù)組的所有元素。
let arr= ['a', 'b', 'c'];arr.length = 0;console.log(arr.length); // Ouput=> 0console.log(arr); // Output=> []
2、有條件的快捷方式
在編程過程中，當滿足特定條件時，你可能需要一段特定的代碼。
例如，你可能想要向未登錄的用戶顯示登錄頁面，而當用戶登錄時，你想要顯示主頁。可以使用條件語句來實現(xiàn)這種邏輯。
var x=1;if(x==1){console.log(x)}else{console.log("Error")}
但是，可以使用三元運算符（?和:）輕松實現(xiàn)這種邏輯。
它需要三個操作數(shù)：一個條件，后跟一個?，如果條件為true，則要執(zhí)行的表達式，然后是a :，然后是條件為false時必須執(zhí)行的表達式。
讓我們看一下代碼，以更好地理解它。
var x=1;console.log( x==1? x: "Error"); //Output: 1
3、動態(tài)導入
導入模塊的標準方法很簡單，但是當你需要動態(tài)導入函數(shù)時又會怎樣呢？
import defaultExport from "module-name";import { export1 as alias1 } from "module-name";import { export1 , export2 } from "module-name";import { export1 , export2 as alias2 , [...] } from "module-name";import defaultExport, { export1 [ , [...] ] } from "module-name";import defaultExport, * as name from "module-name";
你可能僅在滿足某些條件時才需要導入某些特定模塊，而這正是動態(tài)導入起作用的地方。你可以使用import功能動態(tài)導入模塊。
要動態(tài)導入，請使用關鍵字import作為函數(shù)并傳入模塊名稱。
import（'some-module'）.then（obj => ...）. catch（err => console.log（err））
如你所見，它返回一個promise，解析為一個模塊對象。
靜態(tài)導入可用于導入關鍵和必要的模塊，而動態(tài)導入可提供一些好處：
靜態(tài)導入會增加代碼的加載時間，也可能導致未使用的模塊。
靜態(tài)導入說明符字符串不能動態(tài)生成。
靜態(tài)導入會導致不必要的內(nèi)存使用。
4、空位合并運算符
如果需要檢查某個值是否為null，然后分配一個默認值，則空值合并運算符（??）可以是實時保存程序。這樣可以防止應用程序出現(xiàn)無法預料的錯誤和意外行為。
const name = null ?? 'Anonymous';console.log(name); // Output=> 'Anonymous'const age= undefined?? 18;console.log(bar); // Output=> 18
換句話說，當左側操作數(shù)為undefined（或null）時，此運算符將返回右側操作數(shù)。
該操作員提供的巨大優(yōu)勢立即顯現(xiàn)出來。
它不僅會導致更多的無錯誤代碼，而且還將有助于避免可能導致崩潰的意外情況。
值得注意的是，可以使用OR運算符（||）來實現(xiàn)相同的目的。
let firstName = null;let lastName = null;let nickName = "Guest";// shows the first truthy value:alert(firstName || lastName || nickName || "Anonymous");//Guest
OR（||）和無效合并運算符（??）略有不同，即|| 運算符返回第一個真實值，而?? 運算符返回第一個指定值。
5、合并數(shù)組
數(shù)據(jù)集越大，合并兩個數(shù)組時所需的計算能力就越大。
最簡單和常用的方法是使用該Array.prototype.concat()方法。
const array1 = ['a'，'b'，'c'];const array2 = ['a'，'e'，'f'];const array3 = array1.concat（array2）;console.log（array3）;//輸出=>數(shù)組[“ a”，“ b”，“ c”，“ a”，“ e”，“ f”]
但是，在處理龐大的數(shù)據(jù)集時，Array.prototype.concat()并不是最有效的選擇，因為這是一個內(nèi)存密集型任務，因為它會創(chuàng)建一個新數(shù)組。
在這種情況下，使用該Array.push.apply(arr1, arr2)方法是更好的選擇，因為它合并了兩個數(shù)組而不創(chuàng)建一個新數(shù)組。
let list1 = ['a', 'b', 'c'];let list2 = ['a', 'e', 'f'];list1.push.apply(list1, list2);console.log(list1);//Output=> Array ["a", "b", "c", "a", "e", "f"]
6、最少的評估
如果要將變量分配給另一個變量，則可能要檢查要分配的變量的值是否不為null。
使用一條if語句可以簡單地執(zhí)行此操作，但是，編寫if具有多個條件評估的語句可能很麻煩，甚至可能導致錯誤。
if (var1 !== null || var1 !== undefined || var1 !=='') {var2 = var1;}
但是，實現(xiàn)此目的的簡捷方法存在于JavaScript中。
var2 = var1 || 'Some value';7、默認參數(shù)值
你的應用可能會允許用戶選擇輸入自定義值或使用默認值。
這在計算器應用中很常見，在該應用中，除非用戶提供了不同的默認利率，否則使用默認利率（例如6.5％）。
同樣，可以使用if語句簡單地實現(xiàn)此邏輯。
function calculator(principle,rate,time) {if (principle === undefined)principle = 5000;if (rate === undefined)rate = 6;if (time===undefined)time = 3;....}
實際上，實現(xiàn)此目的的簡便方法非常簡單。
function calculator(principle=5000, rate=6, time=3){...}
你基本上是在函數(shù)聲明本身中分配默認值。
8、in 運算符
如果要檢查對象或其原型鏈中是否存在指定的屬性，則in運算符將為你提供便利。
換句話說，in運算符使檢查對象或其原型鏈中是否存在已定義的屬性變得更加容易。
const car = { make: 'Honda', model: 'Accord', year: 1998 };console.log('make' in car);// expected output: truedelete car.make;if ('make' in car === false) {car.make = 'Suzuki';}console.log(car.make);// expected output: "Suzuki"
該運算符返回true 或false。
當使用DOM（文檔對象模型）時，此屬性將非常有用。
var q= "onrender" in document.createElement("div");if(q){...}else{...}
9、強制參數(shù)檢查
有時，你需要具有某些值才能成功完成任務。
例如，登錄電子郵件帳戶時，你必須提供電子郵件地址。
同樣，注冊某些社交媒體平臺時，可能需要提供姓名，年齡，電子郵件和電話號碼。在這里，平臺無法提供默認值。
從開發(fā)人員的角度來看，檢查是否提供了強制性值，而不是null，令人厭煩的檢查，如果需要多次執(zhí)行檢查并且涉及多個這樣的強制性值，則更加麻煩。
function submitName(name) {if(name=== undefined) {throw new Error('Missing parameter');}return name;}
幸運的是，快速檢查參數(shù)值是否為null的簡便方法是通過在此列表上實施＃7 hack（即默認參數(shù)值）來完成。
你需要創(chuàng)建一個僅引發(fā)錯誤的函數(shù)，以解決缺少的參數(shù)問題。
創(chuàng)建此功能后，需要將其分配為必填參數(shù)的默認值。
mandatory = () => {throw new Error('Missing parameter');}submitName= (name= mandatory()) => {return name;}
如果未提供默認參數(shù)，mandatory()則會返回并執(zhí)行引發(fā)錯誤的函數(shù)。
結論
JavaScript正在越來越廣泛地用于各種場景中，并且當涉及到新的JavaScript框架時，似乎還看不到盡頭。
但是，所有這些框架和庫都有一個共同的事實，那就是它們都基于JavaScript，并且在嘗試使用這些框架中的任何一個時，精通JavaScript總是會做得更好。
但是，通過不斷學習新的技巧和功能，你一定可以熟練掌握JavaScript。
感謝閱讀，希望你喜歡閱讀本文！