ES6優化javascript的if判斷

1、使用 Array.includes 來處理多個條件
 請看下面的列子：
 // condition
 function test(fruit) {
   if (fruit == 'apple' || fruit == 'strawberry') {
     console.log('red');
   }
 }
 上面的列子看起來似乎沒有什么問題。但是，如果我們還有更多的紅色水果呢？是否要用
 更多的 || 操作符來擴展該語句，這時可以利用 Array.includes重寫上面的條件語句
 
 function test(fruit) {
   // 條件提取到數組中
   const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
  
   if (redFruits.includes(fruit)) {
     console.log('red');
   }
 }
 將所有的可能性條件提取到一個數組中。這樣，可以讓代碼看起來更整潔
2、減少嵌套，提前使用 return 語句
 擴展前面的示例，在包含另外兩個條件：
 1.如果沒有提供水果，拋出錯誤；
 2.接受水果數量參數，如果超過10，則打印出相關信息；
 function test(fruit, quantity) {
   const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
   // 條件 1：fruit 必須有值
   if (fruit) {
     // 條件 2：必須為紅色
     if (redFruits.includes(fruit)) {
       console.log('red');
  
       // 條件 3：數量必須大於 10
       if (quantity > 10) {
         console.log('big quantity');
       }
     }
   } else {
     throw new Error('No fruit!');
   }
 }
  
 // 測試結果
 test(null); // 拋出錯誤：No fruits
 test('apple'); // 打印：red
 test('apple', 20); // 打印：red，big quantity
 
 上面的代碼，我們有：
 1.1個 if/elss 語句過濾掉無效條件
 2.3層 if 語句嵌套（分別是條件1，2和3）
 其實可以遵循一般規則是  在發現無效條件時提前 return
 
 /* 在發現無效條件時提前 return */
 function test(fruit, quantity) {
   const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
   // 條件 1：提前拋出錯誤
   if (!fruit)  return flase;
   // 條件2：必須為紅色
   if (redFruits.includes(fruit)) {
     console.log('red');
     // 條件 3：數量必須大於 10
     if (quantity > 10) {
       console.log('big quantity');
     }
   }
 }
 這樣做，我們可以減少一個嵌套層級，這種編碼風格很好，特別是當你的if 語句很長時，
 如果通過反條件並提前return ，我們可以進一步減少嵌套，
 
     /* 在發現無效條件時提前 return */
 function test(fruit, quantity) {
   const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
   if (!fruit) throw new Error('No fruit!'); // 條件 1：提前拋出錯誤
   if (!redFruits.includes(fruit)) return;  // 條件 2：當 fruit 不是紅色的時候，提前 return
   console.log('red');
   // 條件 3：必須是大量存在
   if (quantity > 10) {
     console.log('big quantity');
   }
 }
3、使用函數的默認參數 和解構
 下面的代碼可能看起來很熟悉，我們在使用javascript時總是需要檢查null/undefined值並分配默認值
 function test(fruit, quantity) {
   if (!fruit) return;
   const q = quantity || 1; // 如果沒有提供 quantity 參數，則默認為 1
   console.log(`We have ${q} ${fruit}!`);
 }
  
 // 測試結果
 test('banana'); // We have 1 banana!
 test('apple', 2); // We have 2 apple!
 
 實際上，我們可以通過分配默認函數參數來消除變量q
 function test(fruit, quantity = 1) { // i如果沒有提供 quantity 參數，則默認為 1
   if (!fruit) return;
   console.log(`We have ${quantity} ${fruit}!`);
 }
  
 // 測試結果
 test('banana'); // We have 1 banana!
 test('apple', 2); // We have 2 apple!
 
 如果參數fruit是一個 Object 對象怎么辦，我們可以指定默認參數嗎
 function test(fruit) { 
   // 如果有值，則打印 fruit.name
   if (fruit && fruit.name)  {
     console.log (fruit.name);
   } else {
     console.log('unknown');
   }
 }
  
 //測試結果
 test(undefined); // unknown
 test({ }); // unknown
 test({ name: 'apple', color: 'red' }); // apple
 看看上面的例子，我們想要的是如果 fruit.name 可用則打印水果名稱，
 否則將打印 unknown 。我們可以使用默認函數參數和解構(destructing) 
 來避免 fruit && fruit.name 這樣的檢查。
 
 // 解構 —— 只獲得 name 屬性
 // 參數默認分配空對象 {}
 function test({name} = {}) {
   console.log (name || 'unknown');
 }
 //測試結果
 test(undefined); // unknown
 test({ }); // unknown
 test({ name: 'apple', color: 'red' }); // apple
4、選擇 Map/Object 字面量，而不是 Switch 語句
 查看下面實例，我們想打印根據顏色打印水果：
 
 function test(color) {
   // 使用 switch case 語句，根據顏色找出對應的水果
   switch (color) {
     case 'red':
       return ['apple', 'strawberry'];
     case 'yellow':
       return ['banana', 'pineapple'];
     case 'purple':
       return ['grape', 'plum'];
     default:
       return [];
   }
 }
  
 //測試結果
 test(null); // []
 test('yellow'); // ['banana', 'pineapple']
 
 上面的代碼似乎沒有錯，但我覺得它很冗長。使用具有更清晰語法的 object 
 字面量可以實現相同的結果：
 
 // 使用對象字面量，根據顏色找出對應的水果
  const fruitColor = {
     red: ['apple', 'strawberry'],
     yellow: ['banana', 'pineapple'],
     purple: ['grape', 'plum']
   };
  
 function test(color) {
   return fruitColor[color] || [];
 }
 
 或者
 // 使用 Map ，根據顏色找出對應的水果
   const fruitColor = new Map()
     .set('red', ['apple', 'strawberry'])
     .set('yellow', ['banana', 'pineapple'])
     .set('purple', ['grape', 'plum']);
  
 function test(color) {
   return fruitColor.get(color) || [];
 }
 
 亦或者
  const fruits = [
     { name: 'apple', color: 'red' }, 
     { name: 'strawberry', color: 'red' }, 
     { name: 'banana', color: 'yellow' }, 
     { name: 'pineapple', color: 'yellow' }, 
     { name: 'grape', color: 'purple' }, 
     { name: 'plum', color: 'purple' }
 ];
 
 function test(color) {
   // 使用 Array filter  ，根據顏色找出對應的水果 
   return fruits.filter(f => f.color == color);
 }
5、使用 Array.every 和 Array.some 來處理全部/部分滿足條件
 最后一個小技巧更多地是利用新的（但不是那么新的）Javascript Array函數來減少代碼行。
 查看下面的代碼，我們想檢查所有水果是否都是紅色的：
 
 const fruits = [
     { name: 'apple', color: 'red' },
     { name: 'banana', color: 'yellow' },
     { name: 'grape', color: 'purple' }
   ];
  
 function test() {
   let isAllRed = true;
   // 條件：所有的水果都必須是紅色
   for (let f of fruits) {
     if (!isAllRed) break;
     isAllRed = (f.color == 'red');
   }
   console.log(isAllRed); // false
 }
 
 代碼太長了！我們可以使用 Array.every 減少行數：
 
 const fruits = [
     { name: 'apple', color: 'red' },
     { name: 'banana', color: 'yellow' },
     { name: 'grape', color: 'purple' }
   ];
 function test() {
   // 條件：簡短方式，所有的水果都必須是紅色
   const isAllRed = fruits.every(f => f.color == 'red');
   console.log(isAllRed); // false
 }
 
 干凈多了對吧？類似的，如果我們想要檢查是否有至少一個水果是紅色的，
 我們可以使用 Array.some 僅用一行代碼就實現出來。
 
 const fruits = [
     { name: 'apple', color: 'red' },
     { name: 'banana', color: 'yellow' },
     { name: 'grape', color: 'purple' }
 ];
  
 function test() {
   // 條件：是否存在紅色的水果
   const isAnyRed = fruits.some(f => f.color == 'red');
  
   console.log(isAnyRed); // true
 }

以上轉自https://blog.csdn.net/cxz792116/article/details/83655638，如若侵權，聯系刪除。