前端-不用 if-else 的代码，那叫一个优雅！

前言

  在实际开发过程中，条件判断语句if...else...的使用频率非常高，但是当业务逐渐复杂，嵌套的if...else...越来越多，项目变得越来越难以维护。看着满屏的if-else，别说你的同事求你做个人吧，恐怕你下次自己看到也在想：这TM谁写的屎山？

一、if-else的丑陋

只是单层的if-else，当条件判断变得非常多时，维护和修改勉强能接受，当嵌套的层数越来越多的时，就变得难以阅读。

  function fun(value) {
    if (value == 0) {
      console.log("吃饭");
    } else if (value == 1) {
      console.log("喝水");
    } else if (value == 2) {
      console.log("游戏");
    } else if (value == 3){
      console.log("睡觉");
    }
  }

二、终级解决方案

话不多说，直接上终极解决方案：使用对象的key-value映射代替if-else。

  const map = {
    0: "吃饭",
    1: "喝水",
    2: "游戏",
    3: "睡觉",
  };
  const fun = (value) => {
    return map[value];
  };

复杂场景下，还可以封装函数将业务处理和功能逻辑分开，方便维护。

  // 业务处理
  const fun1 = () => {};
  const fun2 = () => {};
  const fun3 = () => {};
  const fun4 = () => {};
  
  // 映射
  const map = {
    0: fun1,
    1: fun2,
    2: fun3,
    3: fun4,
  };

  // 逻辑代码
  const fun = (value) => {
    map[value]();
  };

除了if-else，项目中涉及字段转换的场景（如后端返回数字，前端转换成相应字段），前端可以将字段封装成枚举类型，抽离成一个单独的文件维护，更加简化了代码且利于维护。

优点：

1. JavaScript中的对象是以 <key, value> 类型的 HashMap 结构存储的，Hash 表综合了数组和链表的特性，做出一种寻址容易，插入删除也容易的数据结构，哈希表的查找时间复杂度为O(1)，性能那是相当哇塞。

2. 将业务逻辑和功能逻辑分开，方便选择结构的增删，代码可维护性和可读性大大提高。

三、其他解决方案弊端

1. switch：只能处理等值的条件判断，且条件是整型变量或字符变量的等值判断

2. 三元运算符：三元运算符嵌套比if-else还恶心，不用多说了吧