日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

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

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
使用 JavaScript 編寫(xiě)更好的條件語(yǔ)句

在任何編程語(yǔ)言中，代碼需要根據(jù)不同的條件在給定的輸入中做不同的決定和執(zhí)行相應(yīng)的動(dòng)作。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出鲅魚(yú)圈免費(fèi)做網(wǎng)站回饋大家。

例如，在一個(gè)游戲中，如果玩家生命點(diǎn)為0，游戲結(jié)束。在天氣應(yīng)用中，如果在早上被查看，顯示一個(gè)日出圖片，如果是晚上，則顯示星星和月亮。在這篇文章中，我們將探索JavaScript中所謂的條件語(yǔ)句如何工作。

如果你使用JavaScript工作，你將寫(xiě)很多包含條件調(diào)用的代碼。條件調(diào)用可能初學(xué)很簡(jiǎn)單，但是還有比寫(xiě)一對(duì)對(duì)if/else更多的東西。這里有些編寫(xiě)更好更清晰的條件代碼的有用提示。

1. 數(shù)組方法 Array.includes

使用 Array.includes 進(jìn)行多條件選擇

例如：

 
 
 
 
      
  
  
  
  1. function printAnimals(animal) { 
    2.   
  
  
  
  2.     if (animal === 'dog' || animal === 'cat') { 
    3.   
  
  
  
  3.         console.log(I have a ${animal}); 
    4.   
  
  
  
  4.     } 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. console.log(printAnimals('dog')); // I have a dog 
    8.

上面的代碼看起來(lái)很好因?yàn)槲覀冎粰z查了兩個(gè)動(dòng)物。然而，我們不確定用戶輸入。如果我們要檢查任何其他動(dòng)物呢？如果我們通過(guò)添加更多“或”語(yǔ)句來(lái)擴(kuò)展，代碼將變得難以維護(hù)和不清晰。

解決方案:

我們可以通過(guò)使用 Array.includes 來(lái)重寫(xiě)上面的條件

 
 
 
 
      
  
  
  
  1. function printAnimals(animal) { 
    2.   
  
  
  
  2.    const animals = ['dog', 'cat', 'hamster', 'turtle'];  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.    if (animals.includes(animal)) { 
    5.   
  
  
  
  5.      console.log(I have a ${animal}); 
    6.   
  
  
  
  6.    } 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. console.log(printAnimals('hamster')); // I have a hamster 
    10.

這里，我們創(chuàng)建來(lái)一個(gè)動(dòng)物數(shù)組，所以條件語(yǔ)句可以和代碼的其余部分抽象分離出來(lái)?，F(xiàn)在，如果我們想要檢查任何其他動(dòng)物，我們只需要添加一個(gè)新的數(shù)組項(xiàng)。

我們也能在這個(gè)函數(shù)作用域外部使用這個(gè)動(dòng)物數(shù)組變量來(lái)在代碼中的其他任意地方重用它。這是一個(gè)編寫(xiě)更清晰、易理解和維護(hù)的代碼的方法，不是嗎？

2. 提前退出 / 提前返回

這是一個(gè)精簡(jiǎn)你的代碼的非?？岬募记?。我記得當(dāng)我開(kāi)始專(zhuān)業(yè)工作時(shí)，我在第一天學(xué)習(xí)使用提前退出來(lái)編寫(xiě)條件。

讓我們?cè)谥暗睦由咸砑痈嗟臈l件。用包含確定屬性的對(duì)象替代簡(jiǎn)單字符串的動(dòng)物。

現(xiàn)在的需求是：

  • 如果沒(méi)有動(dòng)物，拋出一個(gè)異常

  • 打印動(dòng)物類(lèi)型

  • 打印動(dòng)物名字

  • 打印動(dòng)物性別

 
 
 
 
      
  
  
  
  1. const printAnimalDetails = animal => { 
    2.   
  
  
  
  2.   let result; // declare a variable to store the final value 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.   // condition 1: check if animal has a value 
    5.   
  
  
  
  5.   if (animal) { 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.     // condition 2: check if animal has a type property 
    8.   
  
  
  
  8.     if (animal.type) { 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.       // condition 3: check if animal has a name property 
    11.   
  
  
  
  11.       if (animal.name) { 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.         // condition 4: check if animal has a gender property 
    14.   
  
  
  
  14.         if (animal.gender) { 
    15.   
  
  
  
  15.           result = ${animal.name} is a ${animal.gender} ${animal.type};; 
    16.   
  
  
  
  16.         } else { 
    17.   
  
  
  
  17.           result = "No animal gender"; 
    18.   
  
  
  
  18.         } 
    19.   
  
  
  
  19.       } else { 
    20.   
  
  
  
  20.         result = "No animal name"; 
    21.   
  
  
  
  21.       } 
    22.   
  
  
  
  22.     } else { 
    23.   
  
  
  
  23.       result = "No animal type"; 
    24.   
  
  
  
  24.     } 
    25.   
  
  
  
  25.   } else { 
    26.   
  
  
  
  26.     result = "No animal"; 
    27.   
  
  
  
  27.   } 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.   return result; 
    30.   
  
  
  
  30. }; 
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32. console.log(printAnimalDetails()); // 'No animal' 
    33.   
  
  
  
  33.  
    34.   
  
  
  
  34. console.log(printAnimalDetails({ type: "dog", gender: "female" })); // 'No animal name' 
    35.   
  
  
  
  35.  
    36.   
  
  
  
  36. console.log(printAnimalDetails({ type: "dog", name: "Lucy" })); // 'No animal gender' 
    37.   
  
  
  
  37.  
    38.   
  
  
  
  38. console.log( 
    39.   
  
  
  
  39.   printAnimalDetails({ type: "dog", name: "Lucy", gender: "female" }) 
    40.   
  
  
  
  40. ); // 'Lucy is a female dog' 
    41.

你覺(jué)得上面的代碼怎么樣？

它工作得很好，但是代碼很長(zhǎng)并且維護(hù)困難。如果不使用lint工具，找出閉合花括號(hào)在哪都會(huì)浪費(fèi)很多時(shí)間。:smile: 想象如果代碼有更復(fù)雜的邏輯會(huì)怎么樣？大量的if..else語(yǔ)句。

我們能用三元運(yùn)算符、&&條件等語(yǔ)法重構(gòu)上面的功能，但讓我們用多個(gè)返回語(yǔ)句編寫(xiě)更清晰的代碼。

 
 
 
 
      
  
  
  
  1. const printAnimalDetails = ({type, name, gender } = {}) => { 
    2.   
  
  
  
  2.   if(!type) return 'No animal type'; 
    3.   
  
  
  
  3.   if(!name) return 'No animal name'; 
    4.   
  
  
  
  4.   if(!gender) return 'No animal gender'; 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. // Now in this line of code, we're sure that we have an animal with all //the three properties here. 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.   return ${name} is a ${gender} ${type}; 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. console.log(printAnimalDetails()); // 'No animal type' 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. console.log(printAnimalDetails({ type: dog })); // 'No animal name' 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. console.log(printAnimalDetails({ type: dog, gender: female })); // 'No animal name' 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. console.log(printAnimalDetails({ type: dog, name: 'Lucy', gender: 'female' })); // 'Lucy is a female dog' 
    18.

在這個(gè)重構(gòu)過(guò)的版本中，也包含了解構(gòu)和默認(rèn)參數(shù)。默認(rèn)參數(shù)確保如果我們傳遞undefined作為一個(gè)方法的參數(shù)，我們?nèi)匀挥兄悼梢越鈽?gòu)，在這里它是一個(gè)空對(duì)象{}。

通常，在專(zhuān)業(yè)領(lǐng)域，代碼被寫(xiě)在這兩種方法之間。

另一個(gè)例子：

 
 
 
 
      
  
  
  
  1. function printVegetablesWithQuantity(vegetable, quantity) { 
    2.   
  
  
  
  2.   const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus']; 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.   // condition 1: vegetable should be present 
    5.   
  
  
  
  5.    if (vegetable) { 
    6.   
  
  
  
  6.      // condition 2: must be one of the item from the list 
    7.   
  
  
  
  7.      if (vegetables.includes(vegetable)) { 
    8.   
  
  
  
  8.        console.log(I like ${vegetable}); 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.        // condition 3: must be large quantity 
    11.   
  
  
  
  11.        if (quantity >= 10) { 
    12.   
  
  
  
  12.          console.log('I have bought a large quantity'); 
    13.   
  
  
  
  13.        } 
    14.   
  
  
  
  14.      } 
    15.   
  
  
  
  15.    } else { 
    16.   
  
  
  
  16.      throw new Error('No vegetable from the list!'); 
    17.   
  
  
  
  17.    } 
    18.   
  
  
  
  18. } 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20. printVegetablesWithQuantity(null); //  No vegetable from the list! 
    21.   
  
  
  
  21. printVegetablesWithQuantity('cabbage'); // I like cabbage 
    22.   
  
  
  
  22. printVegetablesWithQuantity('cabbage', 20);  
    23.   
  
  
  
  23. // 'I like cabbage 
    24.   
  
  
  
  24. // 'I have bought a large quantity' 
    25.

現(xiàn)在，我們有：

  • 1 if/else 語(yǔ)句過(guò)濾非法條件

  • 3 級(jí)嵌套if語(yǔ)句 (條件 1, 2, & 3)

一個(gè)普遍遵循的規(guī)則是：在非法條件匹配時(shí)提前退出。

 
 
 
 
      
  
  
  
  1. function printVegetablesWithQuantity(vegetable, quantity) { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus']; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.    // condition 1: throw error early 
    6.   
  
  
  
  6.    if (!vegetable) throw new Error('No vegetable from the list!'); 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.    // condition 2: must be in the list 
    9.   
  
  
  
  9.    if (vegetables.includes(vegetable)) { 
    10.   
  
  
  
  10.       console.log(I like ${vegetable}); 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.      // condition 3: must be a large quantity 
    13.   
  
  
  
  13.       if (quantity >= 10) { 
    14.   
  
  
  
  14.         console.log('I have bought a large quantity'); 
    15.   
  
  
  
  15.       } 
    16.   
  
  
  
  16.    } 
    17.   
  
  
  
  17. } 
    18.

通過(guò)這么做，我們少了一個(gè)嵌套層級(jí)。當(dāng)你有一個(gè)長(zhǎng)的if語(yǔ)句時(shí)，這種代碼風(fēng)格特別好。

我們能通過(guò)條件倒置和提前返回，進(jìn)一步減少嵌套的if語(yǔ)句。查看下面的條件2，觀察我們是怎么做的

 
 
 
 
      
  
  
  
  1. function printVegetablesWithQuantity(vegetable, quantity) { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.   const vegetables = ['potato', 'cabbage', 'cauliflower', 'asparagus']; 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.    if (!vegetable) throw new Error('No vegetable from the list!');  
    6.   
  
  
  
  6.    // condition 1: throw error early 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.    if (!vegetables.includes(vegetable)) return;  
    9.   
  
  
  
  9.    // condition 2: return from the function is the vegetable is not in  
    10.   
  
  
  
  10.   //  the list  
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.   console.log(I like ${vegetable}); 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15.   // condition 3: must be a large quantity 
    16.   
  
  
  
  16.   if (quantity >= 10) { 
    17.   
  
  
  
  17.       console.log('I have bought a large quantity'); 
    18.   
  
  
  
  18.   } 
    19.   
  
  
  
  19. } 
    20.

通過(guò)倒置條件2，代碼沒(méi)有嵌套語(yǔ)句了。這種技術(shù)在我們有很多條件并且當(dāng)任何特定條件不匹配時(shí)，我們想停止進(jìn)一步處理的時(shí)候特別有用。

所以，總是關(guān)注更少的嵌套和提前返回，但也不要過(guò)度地使用。

3. 用對(duì)象字面量或Map替代Switch語(yǔ)句

讓我們來(lái)看看下面的例子，我們想要基于顏色打印水果：

 
 
 
 
      
  
  
  
  1. function printFruits(color) { 
    2.   
  
  
  
  2.   // use switch case to find fruits by color 
    3.   
  
  
  
  3.   switch (color) { 
    4.   
  
  
  
  4.     case 'red': 
    5.   
  
  
  
  5.       return ['apple', 'strawberry']; 
    6.   
  
  
  
  6.     case 'yellow': 
    7.   
  
  
  
  7.       return ['banana', 'pineapple']; 
    8.   
  
  
  
  8.     case 'purple': 
    9.   
  
  
  
  9.       return ['grape', 'plum']; 
    10.   
  
  
  
  10.     default: 
    11.   
  
  
  
  11.       return []; 
    12.   
  
  
  
  12.   } 
    13.   
  
  
  
  13. } 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. printFruits(null); // [] 
    16.   
  
  
  
  16. printFruits('yellow'); // ['banana', 'pineapple'] 
    17.

上面的代碼沒(méi)有錯(cuò)誤，但是它仍然有些冗長(zhǎng)。相同的功能能用對(duì)象字面量以更清晰的語(yǔ)法實(shí)現(xiàn)：

 
 
 
 
      
  
  
  
  1. // use object literal to find fruits by color 
    2.   
  
  
  
  2.   const fruitColor = { 
    3.   
  
  
  
  3.     red: ['apple', 'strawberry'], 
    4.   
  
  
  
  4.     yellow: ['banana', 'pineapple'], 
    5.   
  
  
  
  5.     purple: ['grape', 'plum'] 
    6.   
  
  
  
  6.   }; 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. function printFruits(color) { 
    9.   
  
  
  
  9.   return fruitColor[color] || []; 
    10.   
  
  
  
  10. } 
    11.

另外，你也能用 Map 來(lái)實(shí)現(xiàn)相同的功能：

 
 
 
 
      
  
  
  
  1. // use Map to find fruits by color 
    2.   
  
  
  
  2.   const fruitColor = new Map() 
    3.   
  
  
  
  3.     .set('red', ['apple', 'strawberry']) 
    4.   
  
  
  
  4.     .set('yellow', ['banana', 'pineapple']) 
    5.   
  
  
  
  5.     .set('purple', ['grape', 'plum']); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. function printFruits(color) { 
    8.   
  
  
  
  8.   return fruitColor.get(color) || []; 
    9.   
  
  
  
  9. } 
    10.

Map 允許保存鍵值對(duì)，是自從ES2015以來(lái)可以使用的對(duì)象類(lèi)型。

對(duì)于上面的例子，相同的功能也能用數(shù)組方法 Array.filter 來(lái)實(shí)現(xiàn)。

 
 
 
 
      
  
  
  
  1. const fruits = [ 
    2.   
  
  
  
  2.     { name: 'apple', color: 'red' },  
    3.   
  
  
  
  3.     { name: 'strawberry', color: 'red' },  
    4.   
  
  
  
  4.     { name: 'banana', color: 'yellow' },  
    5.   
  
  
  
  5.     { name: 'pineapple', color: 'yellow' },  
    6.   
  
  
  
  6.     { name: 'grape', color: 'purple' },  
    7.   
  
  
  
  7.     { name: 'plum', color: 'purple' } 
    8.   
  
  
  
  8. ]; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. function printFruits(color) { 
    11.   
  
  
  
  11.   return fruits.filter(fruit => fruit.color === color); 
    12.   
  
  
  
  12. } 
    13.

4. 默認(rèn)參數(shù)和解構(gòu)

當(dāng)使用 JavaScript 工作時(shí)，我們總是需要檢查 null/undefined 值并賦默認(rèn)值，否則可能編譯失敗。

 
 
 
 
      
  
  
  
  1. function printVegetablesWithQuantity(vegetable, quantity = 1) {  
    2.   
  
  
  
  2. // if quantity has no value, assign 1 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4.   if (!vegetable) return; 
    5.   
  
  
  
  5.     console.log(We have ${quantity} ${vegetable}!); 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. //results 
    9.   
  
  
  
  9. printVegetablesWithQuantity('cabbage'); // We have 1 cabbage! 
    10.   
  
  
  
  10. printVegetablesWithQuantity('potato', 2); // We have 2 potato! 
    11.

如果 vegetable 是一個(gè)對(duì)象呢？我們能賦一個(gè)默認(rèn)參數(shù)嗎？

 
 
 
 
      
  
  
  
  1. function printVegetableName(vegetable) {  
    2.   
  
  
  
  2.     if (vegetable && vegetable.name) { 
    3.   
  
  
  
  3.      console.log (vegetable.name); 
    4.   
  
  
  
  4.    } else { 
    5.   
  
  
  
  5.     console.log('unknown'); 
    6.   
  
  
  
  6.    } 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. printVegetableName(undefined); // unknown 
    10.   
  
  
  
  10. printVegetableName({}); // unknown 
    11.   
  
  
  
  11. printVegetableName({ name: 'cabbage', quantity: 2 }); // cabbage 
    12.

在上面的例子中，如果vegetable 存在，我們想要打印 vegetable name, 否則打印"unknown"。

我們能通過(guò)使用默認(rèn)參數(shù)和解構(gòu)來(lái)避免條件語(yǔ)句 if (vegetable && vegetable.name) {} 。

 
 
 
 
      
  
  
  
  1. // destructing - get name property only 
    2.   
  
  
  
  2. // assign default empty object {} 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. function printVegetableName({name} = {}) { 
    5.   
  
  
  
  5.    console.log (name || 'unknown'); 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. printVegetableName(undefined); // unknown 
    10.   
  
  
  
  10. printVegetableName({ }); // unknown 
    11.   
  
  
  
  11. printVegetableName({ name: 'cabbage', quantity: 2 }); // cabbage 
    12.

因?yàn)槲覀冎恍枰?nbsp;name 屬性，所以我們可以使用  { name } 解構(gòu)參數(shù)，然后我們就能在代碼中使用  name 作為變量，而不是  vegetable.name 。

我們還賦了一個(gè)空對(duì)象 {} 作為默認(rèn)值，因?yàn)楫?dāng)執(zhí)行 printVegetableName(undefined) 時(shí)會(huì)得到一個(gè)錯(cuò)誤：不能從  undefined 或  null 解構(gòu)屬性  name ，因?yàn)樵?nbsp; undefined 中沒(méi)有  name 屬性。

5. 用 Array.every & Array.some 匹配全部/部分內(nèi)容

我們能使用數(shù)組方法減少代碼行。查看下面的代碼，我們想要檢查是否所有的水果都是紅色的：

 
 
 
 
      
  
  
  
  1. const fruits = [ 
    2.   
  
  
  
  2.     { name: 'apple', color: 'red' }, 
    3.   
  
  
  
  3.     { name: 'banana', color: 'yellow' }, 
    4.   
  
  
  
  4.     { name: 'grape', color: 'purple' } 
    5.   
  
  
  
  5.   ]; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. function test() { 
    8.   
  
  
  
  8.   let isAllRed = true; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.   // condition: all fruits must be red 
    11.   
  
  
  
  11.   for (let f of fruits) { 
    12.   
  
  
  
  12.     if (!isAllRed) break; 
    13.   
  
  
  
  13.     isAllRed = (f.color == 'red'); 
    14.   
  
  
  
  14.   } 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.   console.log(isAllRed); // false 
    17.   
  
  
  
  17. } 
    18.

這代碼太長(zhǎng)了！我們能用 Array.every 來(lái)減少代碼行數(shù)：

 
 
 
 
      
  
  
  
  1. const fruits = [ 
    2.   
  
  
  
  2.     { name: 'apple', color: 'red' }, 
    3.   
  
  
  
  3.     { name: 'banana', color: 'yellow' }, 
    4.   
  
  
  
  4.     { name: 'grape', color: 'purple' } 
    5.   
  
  
  
  5.   ]; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. function test() { 
    8.   
  
  
  
  8.   // condition: short way, all fruits must be red 
    9.   
  
  
  
  9.   const isAllRed = fruits.every(f => f.color == 'red'); 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   console.log(isAllRed); // false 
    12.   
  
  
  
  12. } 
    13.

相似地，如果我們想測(cè)試是否有任何紅色的水果，我們能用一行 Array.some 來(lái)實(shí)現(xiàn)它。

 
 
 
 
      
  
  
  
  1. const fruits = [ 
    2.   
  
  
  
  2.     { name: 'apple', color: 'red' }, 
    3.   
  
  
  
  3.     { name: 'banana', color: 'yellow' }, 
    4.   
  
  
  
  4.     { name: 'grape', color: 'purple' } 
    5.   
  
  
  
  5. ]; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. function test() { 
    8.   
  
  
  
  8.   // condition: if any fruit is red 
    9.   
  
  
  
  9.   const isAnyRed = fruits.some(f => f.color == 'red'); 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.   console.log(isAnyRed); // true 
    12.   
  
  
  
  12. } 
    13.

6. 使用可選鏈和空值合并

這有兩個(gè)為編寫(xiě)更清晰的條件語(yǔ)句而即將成為 JavaScript 增強(qiáng)的功能。當(dāng)寫(xiě)這篇文章時(shí)，它們還沒(méi)有被完全支持，你需要使用 Babel 來(lái)編譯。

可選鏈允許我們沒(méi)有明確檢查中間節(jié)點(diǎn)是否存在地處理 tree-like 結(jié)構(gòu)，空值合并和可選鏈組合起來(lái)工作得很好，以確保為不存在的值賦一個(gè)默認(rèn)值。

這有一個(gè)例子：

 
 
 
 
      
  
  
  
  1. const car = { 
    2.   
  
  
  
  2.     model: 'Fiesta', 
    3.   
  
  
  
  3.     manufacturer: { 
    4.   
  
  
  
  4.     name: 'Ford', 
    5.   
  
  
  
  5.     address: { 
    6.   
  
  
  
  6.         street: 'Some Street Name', 
    7.   
  
  
  
  7.         number: '5555', 
    8.   
  
  
  
  8.         state: 'USA' 
    9.   
  
  
  
  9.       } 
    10.   
  
  
  
  10.     } 
    11.   
  
  
  
  11. }  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. // to get the car model 
    14.   
  
  
  
  14. const model = car && car.model || 'default model'; 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. // to get the manufacturer street 
    17.   
  
  
  
  17. const street = car && car.manufacturer && car.manufacturer.address &&  
    18.   
  
  
  
  18. car.manufacturer.address.street || 'default street'; 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20. // request an un-existing property 
    21.   
  
  
  
  21. const phoneNumber = car && car.manufacturer && car.manufacturer.address  
    22.   
  
  
  
  22. && car.manufacturer.phoneNumber; 
    23.   
  
  
  
  23.  
    24.   
  
  
  
  24. console.log(model) // 'Fiesta' 
    25.   
  
  
  
  25. console.log(street) // 'Some Street Name' 
    26.   
  
  
  
  26. console.log(phoneNumber) // undefined 
    27.

所以，如果我們想要打印是否車(chē)輛生產(chǎn)商來(lái)自美國(guó)，代碼將看起來(lái)像這樣：

 
 
 
 
      
  
  
  
  1. const isManufacturerFromUSA = () => { 
    2.   
  
  
  
  2.    if(car && car.manufacturer && car.manufacturer.address &&  
    3.   
  
  
  
  3.  car.manufacturer.address.state === 'USA') { 
    4.   
  
  
  
  4.      console.log('true'); 
    5.   
  
  
  
  5.    } 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. checkCarManufacturerState() // 'true' 
    10.

你能清晰地看到當(dāng)有一個(gè)更復(fù)雜的對(duì)象結(jié)構(gòu)時(shí)，這能變得多亂。有一些第三方的庫(kù)有它們自己的函數(shù)，像 lodash 或 idx。例如 lodash 有 _.get 方法。然而，JavaScript 語(yǔ)言本身被引入這個(gè)特性是非?？岬?。

這展示了這些新特性如何工作：

 
 
 
 
      
  
  
  
  1. // to get the car model 
    2.   
  
  
  
  2. const model = car?.model ?? 'default model'; 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. // to get the manufacturer street 
    5.   
  
  
  
  5. const street = car?.manufacturer?.address?.street ?? 'default street'; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. // to check if the car manufacturer is from the USA 
    8.   
  
  
  
  8. const isManufacturerFromUSA = () => { 
    9.   
  
  
  
  9.    if(car?.manufacturer?.address?.state === 'USA') { 
    10.   
  
  
  
  10.      console.log('true'); 
    11.   
  
  
  
  11.    } 
    12.   
  
  
  
  12. } 
    13.

這看起來(lái)很美觀并容易維護(hù)。它已經(jīng)到 TC39 stage 3 階段，讓我們等待它獲得批準(zhǔn)，然后我們就能無(wú)處不在地看到這難以置信的語(yǔ)法的使用。

總結(jié)

讓我們?yōu)榱司帉?xiě)更清晰、易維護(hù)的代碼，學(xué)習(xí)并嘗試新的技巧和技術(shù)，因?yàn)樵趲讉€(gè)月后，長(zhǎng)長(zhǎng)的條件看起來(lái)像搬石頭砸自己的腳。


文章題目：使用 JavaScript 編寫(xiě)更好的條件語(yǔ)句
文章源于：http://m.5511xx.com/article/cojcshp.html