JavaScript编写精简的条件语句

条件判断是项目开发过程中最常编写的代码，if/else 应该是使用得最多的，但是如果业务比较复杂的话，大量嵌套的 if/else 必将使得代码可读性变差，也不易维护。

今天我们就来了解下更加简洁的条件判断语句吧~

一、Array.includes

当我们需要对多个条件进行判断的时候，Array.includes 是不错的选择。

function PrintStudents(student) {
  if (student === "Tom" || student === "Mike" || student === "shanguagua") {
    console.log(`Hi: ${student}`);
  }
}

PrintStudents("shanguagua");

这里我们只判断了三种情况，如需要判断的情况很多，那就比较难以维护了，而且，也不易于排错。

优化

function PrintStudents(student) {
  const students = ["Tom", "Mike", "shanguagua"];
  if (students.includes(student)) {
    console.log(`Hi: ${student}`);
  }
}

PrintStudents("shanguagua");

把条件集中在一个变量里也方便后期扩展。

二、对象字面量或 Map 替代 Switch 语句

Switch 语句一般用于匹配返回结果，当然使用 if/else 也可以进行处理，两者实现的代码量相当。如果需匹配的条件太多，一定要进行代码优化。

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

优化 1

const fruitColor = {
  red: ["apple", "strawberry"],
  yellow: ["banana", "pineapple"]
};

function printFruits(color) {
  return fruitColor[color] || [];
}

优化 2

const fruitColor = new Map()
  .set("red", ["apple", "strawberry"])
  .set("yellow", ["banana", "pineapple"])

function printFruits(color) {
  return fruitColor.get(color) || [];
}

优化 3

const fruits = [
    { name: 'apple', color: 'red' }, 
    { name: 'strawberry', color: 'red' }, 
    { name: 'banana', color: 'yellow' }, 
    { name: 'pineapple', color: 'yellow' }
];

function printFruits(color) {
  return fruits.filter(fruit => fruit.color === color);
}

三、逻辑与（&&）

我们先来回顾一下逻辑与(&&)和 逻辑或(||)

逻辑与(&&)：当第一个操作数为 true 时，将不会判断第二个操作数，因为无论第二个操作数为何，最后的运算结果一定是 true。可用作条件判断。

逻辑或(||): 当第一个操作数为 false 时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最后的运算结果一定是 false。可用来设置默认值。 单行if语句一般都可以用逻辑与（&&）替换。

if (isReady) {
    console.log('www.shanzhonglei.com');
}

优化

isReady && console.log('www.shanzhonglei.com')

如果if语句里业务较多，我们可以封装成一个单独的业务函数。

四、三目运算符(?:)

三目运算符也是比较常用的。

isReady?console.log('www.shanzhonglei.com'):null;

也不失为一种解决方法。

五、使用可选链(?.)

可选链操作符对于空值判断的情况效果极佳。想要获取baz的值，如果用if语句需要多次判空，嵌套严重。

const obj = {
    foo: {
      bar: {
        baz: 18
      }
    }
  };

优化

console.log(obj?.foo?.bar?.baz);  // 18