如何优雅的改造if-else

218 阅读1分钟

if-else嵌套过多,代码会越来越臃肿,越来越看不懂,如何更优雅的写逻辑判断,请看下文总结。 例子

      if (path == '产品管理') {
        navigate('/website_productManage')
      } else if (path == '办公效率') {
        navigate('/website_officeEfficiency')
      } else if (path == '工程管理') {
        navigate('/website_projectManage')
      } else if (path == '信息服务') {
        navigate('/website_projectManage')
      } else if (path == 'BIM应用') {
        navigate('/website_productBim')
      }

1.倔强青铜-----使用swith-case

 switch (path) {
     case '产品管理':
       navigate('/website_productManage')
       break
     case '办公效率':
       navigate('/website_officeEfficiency')
       break
     case '工程管理':
       navigate('/website_projectManage')
       break
     case 'BIM应用':
       navigate('/website_productBim')
       break
     default:
       navigate('/home')
       break
   }

2.秩序白银-----将判断条件作为对象的属性名,将处理逻辑作为对象的属性值

const routerObj = {
       '产品管理': '/website_productManage',
       '办公效率': '/website_officeEfficiency',
       '工程管理': '/website_projectManage',
       'BIM应用': '/website_productBim',
       'default': '/home',
     }
     const click = (path) => {
       let routerPath = routerObj[path] || actions['default'],
         navigate(routerPath)
     }

3.荣耀黄金-----使用Map Map对象和Object对象区别在于:Map可以用任何类型的数据作为key

const routerObj = new Map([
        ['产品管理', '/website_productManage'],
        ['办公效率', '/website_officeEfficiency'],
        ['工程管理', '/website_projectManage'],
        ['BIM应用', '/website_productBim'],
        ['default', '/home'],
      ])

      const click = (path) => {
        let routerPath = routerObj.get(path) || routerObj.get('default')
        navigate(routerPath)
      }

未完待续。。。。。。