日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何編寫更好的JS代碼！

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

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

使用模板字符串

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

 
 
 
 
    
  
  
  
  
  1. var code = "javascript";
    2. 
  
  
  
  
  2. var str = ` I love ${code} I love ${code} `;
    3.

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

 
 
 
 
    
  
  
  
  
  1. var code = "javascript";
    2. 
  
  
  
  
  2. var str1 = "n I love " +  code + "n I love " +  code + "n";
    3.

使用三元運算符

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

 
 
 
 
    
  
  
  
  
  1. let price= isMember ? '$2.00' : '$10.00'
    2.

使用Include語句

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

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

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

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

空合并運算符

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

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

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

例如，我們有如下JSON:

 
 
 
 
    
  
  
  
  
  1. var person = {
    2. 
  
  
  
  
  2.   name: "Taimoor Sattar",
    3. 
  
  
  
  
  3.   age: 21,
    4. 
  
  
  
  
  4.   metadata: {
    5. 
  
  
  
  
  5.     hobby: "football, blog"
    6. 
  
  
  
  
  6.   }
    7. 
  
  
  
  
  7. }
    8.

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

 
 
 
 
    
  
  
  
  
  1. let hobby = "";
    2. 
  
  
  
  
  2. if (person.metadata){
    3. 
  
  
  
  
  3.   hobby = person.metadata.hobby ? person.metadata.hobby : "";
    4. 
  
  
  
  
  4. }
    5.

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

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

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

函數(shù)默認參數(shù)

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

 
 
 
 
    
  
  
  
  
  1. function outputName(name="taimoor"){
    2. 
  
  
  
  
  2.   return name;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. let string1 = outputName(); // result: taimoor
    6. 
  
  
  
  
  6. let string2 = outputName("ali"); // result: ali
    7.

參數(shù)的類型檢查

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

 
 
 
 
    
  
  
  
  
  1. function sum(a, b){
    2. 
  
  
  
  
  2.   let result = (typeof a == "number" && typeof b == "number") ? a + b :  null;
    3. 
  
  
  
  
  3.   return result
    4. 
  
  
  
  
  4. }
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. sum("s", 6) // result: null
    7. 
  
  
  
  
  7. sum(4, 6) // result: 10
    8.

使用 Try/Catch 包裝代碼

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

 
 
 
 
    
  
  
  
  
  1. try{
    2. 
  
  
  
  
  2.   functionnotexist();
    3. 
  
  
  
  
  3. }catch(e){
    4. 
  
  
  
  
  4.   console.log("error");
    5. 
  
  
  
  
  5. }
    6.

解構(gòu)

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

 
 
 
 
    
  
  
  
  
  1. function outputName({name = "taimoor"}){ // De-structuring
    2. 
  
  
  
  
  2.   return name;
    3. 
  
  
  
  
  3. }
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. var person = {
    6. 
  
  
  
  
  6.   name: "Taimoor Sattar",
    7. 
  
  
  
  
  7.   age: 21,
    8. 
  
  
  
  
  8.   metadata: {
    9. 
  
  
  
  
  9.     hobby: "football, blog"
    10. 
  
  
  
  
  10.   }
    11. 
  
  
  
  
  11. }
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. let str = outputName(person); // Taimoor Sattar
    14.

編寫DRY代碼

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

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

我是小智，我們下期見!

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

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


網(wǎng)站標題：如何編寫更好的JS代碼！
路徑分享：http://www.dlmjj.cn/article/dpgphog.html