如何优雅的写多层if判断

前言
在日常项目中,我们经常会使用到if来进行判断,可是多层的时候,你就会发现代码很累赘
需求
现在有4个产品,分别是手机、电脑、电视机、游戏机,当然每个产品显示的价格不一样
if判断
看到这样的需求,第一时间写个if判断,简单快速,我们来看看代码

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机'
}

if (commodity.phone) {
  // do someThing
} else if (commodity.computer) {
  // do someThing
} else if (commodity.television) {
  // do someThing
} else if (commodity.gameBoy) {
  // do someThing
}

这样写,也是可以实现的,可是一旦多个判断,代码太长了,维护和阅读都很不友好
Switch
这时候我们考虑使用Switch

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机'
}
const price = (name) => {
  switch (name) {
    case commodity.phone: 
      console.log(9999)
      break
    case commodity.computer: 
      console.log(15999)
      break
    case commodity.television: 
      console.log(1999)
      break
    case commodity.gameBoy: 
      console.log(2500)
      break
  }
}
price('手机') // 9999

可是这么一看,好像也不能根本的解决问题,只是代码简洁了一点
Map
什么是Map?
创建Map对象

const commodity = new Map([
  ['phone', 9999],
  ['computer', 15999],
  ['television', 2999],
  ['gameBoy', 2599]
])

创建获取价格函数

const price = (name) => {
  return commodity.get(name)
}
price('phone') // 9999

这样比if和switch代码简洁很多并且阅读性大大提高了
做到这了,突然产品经理说,现在过年了,商品得有优惠,你需要设置不同时间段不同的价格,并且里面逻辑会不同,不能调用同样的函数,这个时候好多个if判断又诞生了,什么双11 双12 年货节…
如果按if来写,就是在if中再嵌套if,这代码可想而知…
Map中的Key使用对象
这个时候Map又帮我们解决了这个问题了

const commodity = new Map([
  [{name: 'phone', date: '11-11'}, () => {
    console.log(9999)
    // do Something
  }],
  [{name: 'phone', date: '12-12'}, () => {
    console.log(9888)
    // do Something
  }],
  [{name: 'phone', date: '06-18'}, () => {
    console.log(9799)
    // do Something
  }],
  [{name: 'phone', date: '09-09'}, () => {
    console.log(9699)
    // do Something
  }],
]);
const showPrice = (name, date) => {
  [...commodity].forEach(([key,value])=> {
    key.name === name && key.date === date ? value.call() : ''
  })
}
showPrice('phone', '12-12')

这样写代码易读性更加好,整洁美观
如果某几个时间段,有相同的逻辑怎么办呢?
我们可以考虑把相同的逻辑进行缓存

const CheckPrice = () => {
  const showMessage = () => {
    console.log('打开活动页面')
  }
  return new Map ([
    [{name: 'phone', date: '11-11'}, () => {
      console.log(9999)
      showMessage()
      // do Something
    }],
    [{name: 'phone', date: '12-12'}, showMessage],
    [{name: 'phone', date: '06-18'}, () => {
      console.log(9799)
      // do Something
    }],
    [{name: 'phone', date: '09-09'}, () => {
      console.log(9699)
      // do Something
    }],
  ])
}
const showPrice = (name, date) => {
  [...CheckPrice()].forEach(([key,value])=> {
    key.name === name && key.date === date ? value.call() : ''
  })
}
showPrice('phone', '11-11')

还能再简化吗?
通过正则进行优化

const CheckPrice = () => {
  const showMessage = () => {
    console.log('打开活动页面')
  }
  return new Map ([
   [/^phone_[0-4]$/, () => {
     console.log('活动时间价格是8888')
   }],
   [/^phone_[5-9]*$/, () => {
     console.log('其他时间10000')
   }],
   [/^phone_.*$/, () => {
    showMessage()
   }],
  ])
}
const showPrice = (name, date) => {
  [...CheckPrice()].forEach(([key,value])=> {
    key.test(`${name}_${date}`) ? value.call() : ''
  })
}
let date = [{date: '11-11', key: 1}, {date: '12-28', key: 9}]
let target = date.find((item, index) => item.date === '12-28')
showPrice('phone', target.key)