如何优雅的写多层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)
复制代码