在使用JavaScript時，條件判斷是經常會用到的，一些簡單的判斷條件還可以接受，當遇到比較複雜多重條件時就比較噁心了。這裡使用es6的小技巧使判斷更優雅。

1、使用 Arrary.includes 處理多重條件(返回布林值 true 或 false)

比如：

function test(fruit) {
  if (fruit == "apple" || fruit == "orange") {
    console.log("red");
  } else {
     console.log('blue')
  }  
}

當兩個條件時，還比較簡單，但是當條件增多這種寫法就太麻煩了。可以使用如下：

1 function test2(fruit) {
2   const redFruits = ['apple', 'cherry', 'strawberry'];
3   if(redFruits.includes(fruit)) {
4     console.log('red')
5   } else {
6     console.log('blue')
7   }
8 }

將條件放到一個數組中，簡便了好多。

2、少寫巢狀，儘早返回

為之前的例子新增兩個條件：

如果沒有提供水果，丟擲錯誤。

如果水果數量大於10，則列印。

 1 function
 
 test3(fruit, quantity) {
 2   const redFruits = ['apple', 'cherry', 'strawberry'];
 3   if(!fruit) console.error('error');
 4   if(redFruits.includes(fruit)) {
 5     console.log('red');
 6     if(quantity > 10) {
 7       console.log('big quantity')
 8     }
 9   }
10 }
11 
12 // test3(null)
13 // test3('apple')
 

14 test3('apple', 20)

上面這個有問題，完全可以 寫 並語句 && 。時刻記著 return 它可以阻止後面函式的執行。減少無必要的判斷。

3、使用函式預設引數 和 解構

在JavaScript 中 我們經常需要檢查 null 或 undefined 並賦予預設值。

1 function test4(fruit, quantity) {
2   if(!fruit) return;
3   const q = quantity || 0;
4   console.log(`we have ${q} ${fruit}!`)
5 }
6 
7 test4('banana');  // we have 0 banana!
8 test4('apple', 3);  // we have 3 apple!

事實上，我們可以通過函式的預設引數來去掉變數q

1 function test5(fruit, quantity = 1) {
2   if(!fruit) return;
3   const q = quantity || 0;
4   console.log(`we have ${quantity} ${fruit}!`)
5 }
6 test5('banana');  // we have 1 banana!
7 test5('apple', 3);  // we have 3 apple!

注意：所有的函式引數都可以有預設值。

那如果fruit 是一個物件呢？如何使用預設值？

 1 function test6(fruit) {
 2   if(fruit && fruit.name) {
 3     console.log(fruit.name);
 4   } else {
 5     console.log('unknown')
 6   }
 7 }
 8 test6(undefined); // unknown
 9 test6({ });  // unknown
10 test6({name: 'apple', color: 'red'}); // apple

上面是 當水果名字屬性存在時，將其列印，否則列印 unknown。

我們可以通過預設引數 和 解構賦值的方法來避免 寫出 fruit && fruit.name 這種條件。

1 // 解構 -- 只得到name屬性。預設引數為空物件 {}
2 function test7({name} = {}) {
3   console.log(name || 'unknown');
4 }
5 test7(undefined); // unknown
6 test7({ });  // unknown
7 test7({name: 'apple', color: 'red'}); // apple

既然我們只需要fruit 的name屬性，我們可以使用{name} 將其解構出來，之後在程式碼中就可以使用name代替fruit.name了。

我們還使用{}作為預設值，如果不使用預設值，當 undefined 時會報錯。cannot destructure property name of 'undefined' or 'null'。

注意：解構 ---- 只適用於物件。

4、相比 switch 、Map / Object 也許是更好地選擇。

如下我們想要根據顏色列印水果：

 1 function test8(color) {
 2   switch(color) {
 3     case 'red':
 4       return ['apple', 'strawberry'];
 5     case 'yellow':
 6       return ['banana', 'pineapple'];
 7     case 'purple':
 8       return ['grape', 'plum'];
 9     default:
10       return [];
11   }
12 }
13 console.log(test8(null)); // []
14 console.log(test8(undefined)); // []
15 console.log(test8('red')); // [ 'apple', 'strawberry' ]

同樣的結果可以通過物件字面量來實現，語法更簡潔，如下:

 1 const fruitColor = {
 2   red: ['apple', 'strawberry'],
 3   yellow: ['banana', 'pineapple'],
 4   purple: ['grape', 'plum']
 5 };
 6 function test9(color) {
 7   return fruitColor[color] || [];
 8 }
 9 console.log(test9(null)); // []
10 console.log(test9(undefined)); // []
11 console.log(test9('red')); // [ 'apple', 'strawberry' ]

也可以使用Map來實現同樣效果：

1 // 使用Map找到對應顏色的水果
2 const fruitColors = new Map().set('red', ['apple', 'strawberry']).set('yellow', ['banana', 'pineapple']).set('purple', ['grape', 'plum']);
3 function test10(color) {
4   return fruitColors.get(color) || [];
5 }
6 console.log(test10(null)); // []
7 console.log(test10(undefined)); // []
8 console.log(test10('red')); // [ 'apple', 'strawberry' ]

Map 是es6引入的新的物件型別，允許存放鍵值對。但是和json不一樣，不能像 jsonObj.key 那樣取值，會得到undefined。只能 mapObj.get(key) 取值。詳細看Map。

還用一種 重構語法：

 1 const fruits = [
 2   {
 3     name: 'apple',
 4     color: 'red'
 5   },
 6   {
 7     name: 'banana',
 8     color: 'yellow'
 9   },
10   {
11     name: 'grape',
12     color: 'purple'
13   },
14   {
15     name: 'orange',
16     color: 'yellow'
17   }
18 ];
19 function test11(color) {
20   // 使用 Array.filter 方法
21   return fruits.filter(f => f.color == color)
22 }
23 console.log(test11('yellow')); // [ { name: 'banana', color: 'yellow' },{ name: 'orange', color: 'yellow' } ]

5、使用 Array.every 和 Array.some 來處理全部 / 部分滿足條件:

如下程式碼是要檢查是否所有水果都是紅色的：

1 function test12() {
2   let isAllRed = true;
3   for(let f of fruits) {
4     if(!isAllRed) break;
5     isAllRed = (f.color == 'red');
6   }
7   console.log(isAllRed);
8 }
9 test12() // false

我們可以通過 Array.every 來減少程式碼量：

1 function test13() {
2   const isAllRed = fruits.every(f => f.color == 'red');
3   console.log(isAllRed);
4 }
5 test13()  // false

類似的檢查是否至少有一個是紅色的，可以使用Array.some

1 function test14() {
2   const isAngRed = fruits.some(f => f.color == 'red');
3   console.log(isAngRed)
4 }
5 test14() // true

後續 es6 一些 更加簡單方便的方法再新增。