如何優雅的寫多層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)
複製代碼