2020-07-23

更好的Javascript条件语句实现（一）

1. 相比switch，Map / Object 也许会是更好的选择
   例如，我们想要根据数字打印出对应的文字：

function test(num) {
    switch(num) {
         case 0:
              return 'yellow';
         case 1:
              return 'orange';
         case 2:
              return 'red';
         case 3:
              return 'blue'
         default:
              return 'black'
    }
}

以上代码没有什么错，用在日常开发也不会有问题，但是，它或许有点冗长。
我们可以用Map实现同样的效果，并且代码看上去更简洁：

// Map 是es6引入的新的对象类型，允许存放键值对；

const color = newMap()
.set(0,'yellow')
.set(1,'orange')
.set(2,'red')
.set(3,'blue')

function test(num) {
  return color.get(num) || 'black';
}

或着，我们也可以用对象字面量(Object)来实现:

const color = {
    0: 'yellow',
    1: 'orange',
    2: 'red',
    3: 'blue'
};
function test(num) {
  return color[num] || 'black';
}

2. 使用 Array.includes 来处理多重条件
   例如：

function test(fruit) {
   if(fruit == 'lemon' || fruit == 'banana' || fruit == 'pear') {
      console.log('黄颜色的水果')
   }
}

黄颜色的水果有很多：orange(橘子) / lemon(柠檬) / banana(香蕉) / mango(芒果)
/ grapefruit(柚子) / pear(梨) / pineapple(菠萝)等；
那我们如果想要匹配更多的黄颜色的水果，如果用 || 的话就还挺麻烦的，我们可以把想要匹配的水果提取到一个数组里，用Array.includes来处理，这样也会使得代码看起来更整洁;

function test(fruit) {
   const yellowFruits = ['orange', 'lemon', 'banana', 'mango', 'grapefruit', 'pear', 'pineapple'];
   if (yellowFruits.includes(fruit)) {
      console.log('黄颜色的水果:',fruit);
   }
}

3. 使用函数默认参数
   在 JavaScript 中我们经常需要检查 null / undefined 并赋予默认值：

function test(food, num) {
  if (!food) return;
  const n = num || 1; // 如果没有num，默认为 1
  console.log(`我有 ${n} ${food}!`);
}
//测试结果
test('apple'，2); // I have 2 apple!
test('apple'); // I have 1 apple!

我们可以通过函数的默认参数来去掉变量 n

function test(food, num = 1) { // 如果没有提供 quantity，默认为 1
    if (!food) return;
    console.log(`I have ${num} ${food}!`);
}
//测试结果
test('apple'，2); // I have 1 apple!
test('apple'); // I have 2 apple!