es6之更优雅的条件语句

在使用JavaScript时，条件判断是经常会用到的，一些简单的判断条件还可以接受，当遇到比较复杂多重条件时就比较恶心了。这里使用es6的小技巧使判断更优雅。

1、使用 Arrary.includes 处理多重条件(返回布尔值 true 或 false)

比如：

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

当两个条件时，还比较简单，但是当条件增多这种写法就太麻烦了。可以使用如下：

 function test2(fruit) {
   const redFruits = ['apple', 'cherry', 'strawberry'];
   if(redFruits.includes(fruit)) {
     console.log('red')
   } else {
     console.log('blue')
   }
 }

将条件放到一个数组中，简便了好多。

2、少写嵌套，尽早返回

为之前的例子添加两个条件：

如果没有提供水果，抛出错误。

如果水果数量大于10，则打印。

 function test3(fruit, quantity) {
   const redFruits = ['apple', 'cherry', 'strawberry'];
   if(!fruit) console.error('error');
   if(redFruits.includes(fruit)) {
     console.log('red');
     if(quantity > 10) {
       console.log('big quantity')
     }
   }
 }

 // test3(null)
 // test3('apple')
 test3('apple', 20)

test3

上面这个有问题，完全可以 写 并语句 && 。时刻记着 return 它可以阻止后面函数的执行。减少无必要的判断。

3、使用函数默认参数 和 解构

在JavaScript 中 我们经常需要检查 null 或 undefined 并赋予默认值。

 function test4(fruit, quantity) {
   if(!fruit) return;
   const q = quantity || 0;
   console.log(`we have ${q} ${fruit}!`)
 }

 test4('banana');  // we have 0 banana!
 test4('apple', 3);  // we have 3 apple!

事实上，我们可以通过函数的默认参数来去掉变量q

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

注意：所有的函数参数都可以有默认值。

那如果fruit 是一个对象呢？如何使用默认值？

 function test6(fruit) {
   if(fruit && fruit.name) {
     console.log(fruit.name);
   } else {
     console.log('unknown')
   }
 }
 test6(undefined); // unknown
 test6({ });  // unknown
 test6({name: 'apple', color: 'red'}); // apple

上面是 当水果名字属性存在时，将其打印，否则打印 unknown。

我们可以通过默认参数 和 解构赋值的方法来避免 写出 fruit && fruit.name 这种条件。

 // 解构 -- 只得到name属性。默认参数为空对象 {}
 function test7({name} = {}) {
   console.log(name || 'unknown');
 }
 test7(undefined); // unknown
 test7({ });  // unknown
 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 也许是更好地选择。

如下我们想要根据颜色打印水果：

 function test8(color) {
   switch(color) {
     case 'red':
       return ['apple', 'strawberry'];
     case 'yellow':
       return ['banana', 'pineapple'];
     case 'purple':
       return ['grape', 'plum'];
     default:
       return [];
   }
 }
 console.log(test8(null)); // []
 console.log(test8(undefined)); // []
 console.log(test8('red')); // [ 'apple', 'strawberry' ]

同样的结果可以通过对象字面量来实现，语法更简洁，如下:

 const fruitColor = {
   red: ['apple', 'strawberry'],
   yellow: ['banana', 'pineapple'],
   purple: ['grape', 'plum']
 };
 function test9(color) {
   return fruitColor[color] || [];
 }
 console.log(test9(null)); // []
 console.log(test9(undefined)); // []
 console.log(test9('red')); // [ 'apple', 'strawberry' ]

也可以使用Map来实现同样效果：

 // 使用Map找到对应颜色的水果
 const fruitColors = new Map().set('red', ['apple', 'strawberry']).set('yellow', ['banana', 'pineapple']).set('purple', ['grape', 'plum']);
 function test10(color) {
   return fruitColors.get(color) || [];
 }
 console.log(test10(null)); // []
 console.log(test10(undefined)); // []
 console.log(test10('red')); // [ 'apple', 'strawberry' ]

Map 是es6引入的新的对象类型，允许存放键值对。但是和json不一样，不能像 jsonObj.key 那样取值，会得到undefined。只能 mapObj.get(key) 取值。详细看Map。

还用一种 重构语法：

 const fruits = [
   {
     name: 'apple',
     color: 'red'
   },
   {
     name: 'banana',
     color: 'yellow'
   },
   {
     name: 'grape',
     color: 'purple'
   },
   {
     name: 'orange',
     color: 'yellow'
   }
 ];
 function test11(color) {
   // 使用 Array.filter 方法
   return fruits.filter(f => f.color == color)
 }
 console.log(test11('yellow')); // [ { name: 'banana', color: 'yellow' },{ name: 'orange', color: 'yellow' } ]

5、使用 Array.every 和 Array.some 来处理全部 / 部分满足条件:

如下代码是要检查是否所有水果都是红色的：

 function test12() {
   let isAllRed = true;
   for(let f of fruits) {
     if(!isAllRed) break;
     isAllRed = (f.color == 'red');
   }
   console.log(isAllRed);
 }
 test12() // false

我们可以通过 Array.every 来减少代码量：

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

类似的检查是否至少有一个是红色的，可以使用Array.some

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

后续 es6 一些 更加简单方便的方法再添加。

function test14() {

const isAngRed = fruits.some(f => f.color == 'red');

console.log(isAngRed)

}

test14() // true