[[411949]]

廢話不多說，直接安排上。

1.使用數字分隔符

當我需要處理大的數字時，這是最常用的運算符之一。當在數字中使用分隔符(只有一個_)時，它看起來比沒有分隔的數字要好。例如：

let number = 98234567 

可以這么寫

let number = 98_234_567 

而且它也適用于任何其他進制數。

const binary = 0b1000_0101; 
const hex = 0x12_34_56_78; 

幾個注意事項：

在前導0后不能使用。

let num= 0_12 

不允許出現在數字的末尾。

let num= 500_ 

2.始終使用分號

使用分號終止行是一種很好的做法。如果忘記了，不會被警告，因為在大多數情況下，它將被JavaScript解析器插入，但依賴于自動分號插入(ASI)是不鼓勵的。

谷歌，Airbnb和jQuery的JS風格指南，也推薦使用分號終止行。

3.不要忘記var

當你第一次為一個變量賦值時，一定要確保你沒有對一個未聲明的變量進行賦值。

對未聲明的變量的賦值會自動導致一個全局變量的創建。避免全局變量?

全局變量很容易被其他腳本覆蓋。例如，如果應用程序的兩個獨立部分定義了具有相同名稱但用途不同的全局變量，那么可能會導致不可預測的錯誤，調試此類問題將是一個可怕的經歷。

通常函數中的變量應該是局部的，這樣當你執行完函數時它們就會釋放。

4. Delete vs Splice

使用splice而不是使用delete從一個數組中刪除一個項。使用delete會刪除對象的屬性，但不會重置索引數組或更新其長度。

Delete

> myArray = ['a', 'b', 'c', 'd'] 
  ["a", "b", "c", "d"] 
> delete myArray[0] 
  true 
> myArray[0] 
  undefined 

請注意，事實上它并沒有被設置為undefined的值，而是將該屬性從數組中移除，使其看起來undefined。這個大家可以在控制把 myArray 打印就出看就知道 了。

Splice

Splice() 實際上刪除了元素，重置了索引，并改變了數組的長度。

> myArray = ['a', 'b', 'c', 'd'] 
  ["a", "b", "c", "d"] 
> myArray.splice(0, 2) 
  ["a", "b"] 
> myArray 
  ["c", "d"] 

delete方法應該用于刪除對象屬性。

5. map vs for loop

使用map()函數遍歷數組的項

var squares = [1,2,3,4].map(function (val) {   
    return val * val;   
});  
 
//  [1, 4, 9, 16] 

**Immutability ** - 原來的數組將不受影響。在其他地方仍然需要原始數組的情況下，這是有好處的。for 循環當然也可以實現，但是這需要更多的代碼，并且需要更新我們的新數組作為循環操作的一部分。另一方面，map()可以保持這種清潔，因為你只需要在一個作用哉內工作，仍然可以保持不變性。

Cleaner code - 當做相同的事情時，map幾乎總是可以用比for更少的代碼來寫。它有時可以清楚地寫在一行上，而for至少需要兩行或一般需要三行，并包括括號。另外，作用域隔離和減少你所需要的變量數量以及減少的大小都使代碼客觀上更干凈。

6. 四舍五入的數字

toFixed() 方法使用定點表示法來格式化一個數值。

var pi =3.1415; 
pi = pi.toFixed(2);  // pi will be equal to 3.14 

注意:toFixed()返回的是字符串而不是數字。

7.使用 console.table

table=[{state: "Texas"},{state: "New York"},{state: "Chicago"}] 
console.table(table) 

可以使用console.table來以表格的形式顯示對象。

8. 避免在循環中使用 try-catch

每次執行catch子句時，try-catch結構都會在當前作用域內創建一個新的變量，其中捕獲的異常對象被分配給一個變量。

var object = ['foo', 'bar'], i;   
for (i = 0, len = object.length; i <len; i++) {   
    try {   
        // do something that throws an exception  
    }   
    catch (e) {    
        // handle exception   
    }  
} 

第二種寫法

var object = ['foo', 'bar'], i;   
try {  
    for (i = 0, len = object.length; i <len; i++) {   
        // do something that throws an exception  
    }  
}  
catch (e) {    
    // handle exception   
}  

當一個錯誤發生時，第一個讓你繼續循環，而第二個則退出循環。如果你的代碼拋出的異常沒有嚴重到足以停止整個程序，那么第一個適合。

9. 多個條件檢查

對于多值匹配，我們可以把所有的值放在一個數組中，并使用indexOf()或includes()方法。

if (value === 1 || value === 'one' || value === 2 || value === 'two') {  
 
}  

indexOf():

if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {  
 
} 

includes():

if ([1, 'one', 2, 'two'].includes(value)) {  
 
} 

10. 雙非位運算符(~~)

雙非位運算符是可以看作是Math.floor()方法的替代品。

const floor = Math.floor(6.8); // 6  

也可以這樣寫：

const floor = ~~6.8; // 6 

雙非位操作符方法只適用于32位整數。因此，對于任何比這更高的數字，建議使用Math.floor()

總結

最后的建議 - 不要使用隨意的編碼風格。要有一個執行標準。

~完，我是小智，整理完，準備來盤 LoL ，記得點贊關注，發財致富哦~

作者：Apoorv Tyagi 譯者：前端小智 來源：dev

 

原文：https://dev.to/apoorvtyagi/javacript-tips-and-best-practices-48ma