[[388022]]

本文已經過原作者 Taimoor Sattar 授權翻譯。

Javascript 是瀏覽器可以理解的語言，它用于加載動態內容而無需刷新頁面。今天列舉一些用用更少的代碼又更具可讀性方式來編寫 JS，肝貨開始。

使用模板字符串

模板字符串是可以嵌入表達式中的字符串(變量)，它可以讓代碼更加簡單和易讀。

var code = "javascript"; 
var str = ` I love ${code} I love ${code} `; 

如果沒有模板字符串，我們需要這么寫：

var code = "javascript"; 
var str1 = "n I love " +  code + "n I love " +  code + "n"; 

使用三元運算符

在編程中，會遇到邏輯操作。如果要在兩條語句之間執行邏輯，三元操作符的可讀性要高得多。

let price= isMember ? '$2.00' : '$10.00' 

使用Include語句

JS 中的 include 語句是一種在數組和句子中搜索字符串的更簡單的方法。

var str = "I love JavaScript."; 
var word = str.includes("javaScript"); // result: true 

數組也可以使用 include 方法：

var str = ["taimoor", "ali", "umer"]; 
var n = str.includes("taimoor"); // result: true 

空合并運算符

如果我們使用的是第三方API，可能會遇到相同的key-value不會出現在每個查詢中。這樣我們必須檢查JSON中的空鍵，以免出現錯誤。

要檢查空鍵，可以使用以下方法：

• 條件語句
• 空合并運算符(??)-(推薦)

例如，我們有如下JSON:

var person = { 
  name: "Taimoor Sattar", 
  age: 21, 
  metadata: { 
    hobby: "football, blog" 
  } 
} 

使用條件語句，我們可以訪問JSON的 matadata 中的 hobby 屬性，如下所示

let hobby = ""; 
if (person.metadata){ 
  hobby = person.metadata.hobby ? person.metadata.hobby : ""; 
} 

使用空合并操作符，我們只需要這樣做：

let hobby = person.metadata?.hobby ?? ""; 

上面的代碼檢查JSON元數據中的 hobby 鍵，如果可用，則返回值，否則返回空字符串。

函數默認參數

JS 中的一些函數允許我們發送選項參數。根據可選參數，函數的返回值可以更改。

function outputName(name="taimoor"){ 
  return name; 
} 
 
let string1 = outputName(); // result: taimoor 
let string2 = outputName("ali"); // result: ali 

參數的類型檢查

在某些情況下，函數參數要有類型的限制，我們可以這樣檢查函數的類型：

function sum(a, b){ 
  let result = (typeof a == "number" && typeof b == "number") ? a + b :  null; 
  return result 
} 
 
sum("s", 6) // result: null 
sum(4, 6) // result: 10 

使用 Try/Catch 包裝代碼

Try/Catch 語句用于檢查代碼中的錯誤。如果出錯，將運行catch語句。

try{ 
  functionnotexist(); 
}catch(e){ 
  console.log("error"); 
} 

解構

通過解構，我們可以將復雜的結構提取我們需要的部分。

function outputName({name = "taimoor"}){ // De-structuring 
  return name; 
} 
 
var person = { 
  name: "Taimoor Sattar", 
  age: 21, 
  metadata: { 
    hobby: "football, blog" 
  } 
} 
 
let str = outputName(person); // Taimoor Sattar 

編寫DRY代碼

DRY(不要重復自己)，避免在代碼中重復以免造成混淆。為避免代碼混亂，可以遵循以下規則。

• 編寫可重用函數
• 為變量和函數定義明確的名稱

我是小智，我們下期見!

作者：Taimoor Sattar 譯者：前端小智 來源：valentinog

原文：https://taimoorsattar.dev/blogs/better-code-with-javascript