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

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript重構技巧-讓函數(shù)簡單明了

本文轉載自微信公眾號「大遷世界」，轉載本文請聯(lián)系大遷世界公眾號。

成都創(chuàng)新互聯(lián)公司長期為超過千家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為江西企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站建設，江西網(wǎng)站改版等技術服務。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

JavaScript 是一種易于學習的編程語言，編寫運行并執(zhí)行某些操作的程序很容易。然而，要編寫一段干凈的JavaScript 代碼是很困難的。

在本文中，我們將研究如何讓我們的函數(shù)更清晰明了。

對對象參數(shù)使用解構

如果我們希望函數(shù)接收很多參數(shù)，那么應該使用對象。在此基礎上，我們就可以使用解構語法提取我們需要的參數(shù)。

例如，對于對象參數(shù)，我們可能會這樣使用：

 
 
 
 
    
  
  
  
  
  1. const greet = (obj) => { 
    2. 
  
  
  
  
  2.   return `${obj.greeting}, ${obj.firstName}${obj.lastName}`; 
    3. 
  
  
  
  
  3. } 
    4.

上面的語法，我們可以使用解構方式會更優(yōu)雅：

 
 
 
 
    
  
  
  
  
  1. const greet = ({ 
    2. 
  
  
  
  
  2.   greeting, 
    3. 
  
  
  
  
  3.   firstName, 
    4. 
  
  
  
  
  4.   lastName 
    5. 
  
  
  
  
  5. }) => { 
    6. 
  
  
  
  
  6.   return `${greeting}, ${firstName}${lastName}`; 
    7. 
  
  
  
  
  7. } 
    8.

這樣我們可以少寫很多重復的東西，命名也會更加清晰。

命名回調(diào)函數(shù)

好的命名會使閱讀代碼更容易，回調(diào)函數(shù)的命名也是一樣的，例如下面不好的命名方式：

 
 
 
 
    
  
  
  
  
  1. const arr = [1, 2, 3].map(a => a * 2); 
    2.

我們可以這樣分開命名：

 
 
 
 
    
  
  
  
  
  1. const double = a => a * 2; 
    2. 
  
  
  
  
       
   
   
   
      
    
    
    
    
    1. if (score === 100 || 
      2. 
    
    
    
    
    2.   remainingPlayers === 1 || 
      3. 
    
    
    
    
    3.   remainingPlayers === 0) { 
      4. 
    
    
    
    
    4.   quitGame(); 
      5. 
    
    
    
    
    5. } 
      6. 
   
   
   
   
    

  2. const arr = [1, 2, 3].map(double); 
    3. 



現(xiàn)在我們知道我們的回調(diào)函數(shù)實際上是用來加倍原始數(shù)組的每個元素的。
讓條件句具有描述性
通過在自己的函數(shù)的條件語句中編寫條件表達式，可以使條件語句更具描述性。
對于復雜的條件判斷， 我們可以單獨使用函數(shù)來表示，會讓條件語句更具描述性，例如下面代碼：


 
 
 
 
    
  
  
  
  
  1. if (score === 100 || 
    2. 
  
  
  
  
  2.   remainingPlayers === 1 || 
    3. 
  
  
  
  
  3.   remainingPlayers === 0) { 
    4. 
  
  
  
  
  4.   quitGame(); 
    5. 
  
  
  
  
  5. } 
    6. 
 
 
 
 
當條件多時，我們可以用函數(shù)來表示：


 
 
 
 
    
  
  
  
  
  1. const winnerExists = () => { 
    2. 
  
  
  
  
  2.   return score === 100 || 
    3. 
  
  
  
  
  3.     remainingPlayers === 1 || 
    4. 
  
  
  
  
  4.     remainingPlayers === 0 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. if (winnerExists()) { 
    7. 
  
  
  
  
  7.   quitGame(); 
    8. 
  
  
  
  
  8. } 
    9. 
 
 
 
 
這樣，我們就知道這些條件是檢查游戲代碼中是否存在贏家的條件。
在第一個例子中，我們有一個很長的表達式在括號里，大多數(shù)人可能不知道它在判斷什么。但在第二個例子中，一旦我們把它放到一個命名函數(shù)中，我們就知道它大概在判斷什么了。
在條件語句中擁有一個命名函數(shù)比在擁有一堆布爾表達式要清晰得多。
用 Map 或 Object替換 switch 語句
由于 switch語句很長，這樣容易出錯。因此，如果可以的話，我們應該用較短的代碼代替它們。許多switch語句可以用map或object替換。例如，如果我們有下面的switch語句:


 
 
 
 
    
  
  
  
  
  1. const getValue = (prop) => { 
    2. 
  
  
  
  
  2.   switch (prop) { 
    3. 
  
  
  
  
  3.     case 'a': { 
    4. 
  
  
  
  
  4.       return 1; 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     case 'b': { 
    7. 
  
  
  
  
  7.       return 2; 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9.     case 'c': { 
    10. 
  
  
  
  
  10.       return 3; 
    11. 
  
  
  
  
  11.     } 
    12. 
  
  
  
  
  12.   } 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14. const val = getValue('a'); 
    15. 
 
 
 
 
我們可以將其替換為object或map，如下所示：


 
 
 
 
    
  
  
  
  
  1. const obj = { 
    2. 
  
  
  
  
  2.   a: 1, 
    3. 
  
  
  
  
  3.   b: 2, 
    4. 
  
  
  
  
  4.   c: 3 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. const val = obj['a']; 
    7. 
 
 
 
 
如我們所見，switch 語法很長。我們需要嵌套多個帶有多個return語句的塊，只是為了獲得給定prop值的返回值。
相反使用對象，我們僅僅需要一個對象就可以了：


 
 
 
 
    
  
  
  
  
  1. const obj = { 
    2. 
  
  
  
  
  2.   a: 1, 
    3. 
  
  
  
  
  3.   b: 2, 
    4. 
  
  
  
  
  4.   c: 3 
    5. 
  
  
  
  
  5. } 
    6. 
 
 
 
 
使用對象還有一個好處，就是對于鍵不必是有效的標識符號，這樣這增加了更多的靈活性。
我們還可以使用map替換對象，如下所示：


 
 
 
 
    
  
  
  
  
  1. const map = new Map([['a', 1], ['b', 2], ['c', 3]]) 
    2. 
  
  
  
  
  2. const val = map.get('a') 
    3. 
 
 
 
 
如我們所見，使用Map時，代碼也短很多。我們通過傳遞一個數(shù)組，數(shù)組中的每項包含鍵和值。然后，我們僅使用Map實例的get方法從鍵中獲取值。
Map優(yōu)于對象的一個好處是，我們可以將數(shù)字，布爾值或對象等其他值用作鍵。而對象只能將字符串或symbol作為鍵。
總結
使用解構語法可以使對象參數(shù)更清楚，更短。這樣，可以選擇性地將屬性作為變量進行訪問。
通過將條件表達式放在它自己的命名函數(shù)中，可以使條件表達式更具描述性。同樣，我們應該為回調(diào)函數(shù)命名，以便更容易地讀取代碼。
最后，應該盡可能用Map和Object替換switch語句。

                                                

                                                文章名稱：JavaScript重構技巧-讓函數(shù)簡單明了                                                

                                                標題來源：http://www.dlmjj.cn/article/cdjohjd.html