优雅的项目中的if-else和switch

背景

在项目中，我们往往会看到很多的if-else或者switch，项目会变得很臃肿，而且不易阅读，那么今天我们就来讲讲优化方案吧

例如，假设我们有一个订单状态的函数，它接受一个数字参数并返回其实际含义。使用 if/else 语句，它看起来像这样：
function getOrderState(type) {
  if (type === 1) {
    return "已下单";
  } else if (type === 2) {
    return "已支付";
  } else if (type === 3) {
    return "已发货";
  } else if (type === 4) {
    return "已签收";
  }

  return "未知状态";
}
这不是很好。它可读性差。

我们可以通过使用 switch 语句优化，如下所示：：
function getOrderState(type) {
  if (type === 1) {
    return "已下单";
  } else if (type === 2) {
    return "已支付";
  } else if (type === 3) {
    return "已发货";
  } else if (type === 4) {
    return "已签收";
  }
  return "未知状态";
}
但这这样仍然没什么可读性，switch 语句也容易出错。
在这种情况下，我们只是返回一个值，但是当你具有更复杂的功能时，很容易错过 break 语句并引入错误。

最优雅的方案

function getOrderState(type) {
  const types = {
        1: '已下单',
        2: '已支付',
        3: '已发货',
        4: '已签收'
  }
  return types[type] ?? '未知状态'
}
我们定义了了一个对象，其中键是条件，值是响应。然后我们可以使用方括号符号从传入的参数中选择对象的正确值。
函数中return types[type] ?? '未知状态'使用无效合并来分配默认响应。这意味着如果 types[type]为 null 或undefined（但不是 false 或 0 ），则返回默认字符串“未知状态”。

- || vs ??

||和??都是指定默认值
读取对象属性的时候，如果某个属性的值是null或undefined，有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值

const inputText = response.settings.inputText || '哈哈哈!';
const times = response.settings.times || 100;
const showScreen = response.settings.showScreen || true;

上面的三行代码都通过||运算符指定默认值，但是这样写是错的。开发者的原意是，只要属性的值为null或undefined，默认值就会生效，但是属性的值如果为空字符串或false或0，默认值也会生效。
为了避免这种情况，ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。而||是运算符左侧的值为null、undefined、0、''或NaN 时，都会返回右侧的值！

更复杂的逻辑

有时你可能需要在你的条件中执行一些更复杂的逻辑。为此，你可以将函数作为值传递给对象键并执行响应：

function calculate(action, num1, num2) {
const actions = {
   add: (a, b) => a + b,
   subtract: (a, b) => a - b,
   multiply: (a, b) => a * b,
   divide: (a, b) => a / b,
};
return actions[action]?.(num1, num2) ?? "Calculation is not recognised";
}

?.有不懂的话，可以先看下面，我们正在选择我们想要做的计算并执行响应，传递两个数字。你可以使用可选链接（最后一行代码中的 ?.）来仅执行已定义的响应。否则，将使用默认的返回字符串。
如果函数里的逻辑足够复杂也可以把函数提取出来

function add(num1, num2) {
       return num1 + num2
}
function subtract(num1, num2) {
       return num1 - num2
}
function multiply(num1, num2) {
        return num1 * num2
}
function divide(num1, num2) {
         return num1 / num2
}
function calculate(action, num1, num2) {
const actions = {
     add,
     subtract,
     multiply,
     divide
}
return actions[action]?.(num1, num2) ?? 'Calculation is not recognised'
}

?.的说明

编程实务中，如果读取对象内部的某个属性，往往需要判断一下，属性的上层对>象是否存在。比如，读取message.body.user.firstName这个属性，安全的写法
是写成下面这样。

// 错误的写法
const  firstName = message.body.user.firstName || 'default';
// 正确的写法
const firstName = (message && message.body && message.body.user && message.body.user.firstName) || 'default';

上面例子中，firstName属性在对象的第四层，所以需要判断四次，每一层是否有值。
这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法。

const firstName = message?.body?.user?.firstName || 'default';

上面代码使用了?.运算符，直接在链式调用的时候判断，左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

下面是判断对象方法是否存在，如果存在就立即执行的例子。

iterator.return?.()

上面代码中，iterator.return如果有定义，就会调用该方法，否则iterator.return直接返回undefined，不再执行?.后面的部分。

下面是?.运算符常见形式，以及不使用该运算符时的等价形式。

a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()

上面代码中，特别注意后两种形式，如果a?.b()和a?.()。如果a?.b()里面的a.b有值，但不是函数，不可调用，那么a?.b()是会报错的。a?.()也是如此，如果a不是null或undefined，但也不是函数，那么a?.()会报错。

参考资料: es6，JoyZ