[[388022]]

本文已經(jīng)過原作者 Taimoor Sattar 授權(quán)翻譯。

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

使用模板字符串

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

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"; 

使用三元運(yùn)算符

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

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

使用Include語句

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

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

數(shù)組也可以使用 include 方法：

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

空合并運(yùn)算符

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

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

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

例如，我們有如下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元數(shù)據(jù)中的 hobby 鍵，如果可用，則返回值，否則返回空字符串。

函數(shù)默認(rèn)參數(shù)

JS 中的一些函數(shù)允許我們發(fā)送選項(xiàng)參數(shù)。根據(jù)可選參數(shù)，函數(shù)的返回值可以更改。

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

參數(shù)的類型檢查

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

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 語句用于檢查代碼中的錯(cuò)誤。如果出錯(cuò)，將運(yùn)行catch語句。

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

解構(gòu)

通過解構(gòu)，我們可以將復(fù)雜的結(jié)構(gòu)提取我們需要的部分。

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(不要重復(fù)自己)，避免在代碼中重復(fù)以免造成混淆。為避免代碼混亂，可以遵循以下規(guī)則。

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

我是小智，我們下期見!

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

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