How to write an elegant multi-layered determine if

Introduction
In everyday project, we often use to determine if carried out, but multi-layered, you will find that the code is very cumbersome
requirements
now have four products, namely, mobile phones, computers, televisions, game consoles, and of course each the price of a product displayed is not the same
if the judge
to see such a demand, if the first time to write a judgment, simple and fast, we have to look at the code

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
}

Write, but also can be achieved, but once more judge, the code is too long, maintenance and reading are very unfriendly
Switch
this time we consider the use of 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

But such a look, it seems can not fundamentally solve the problem, but the code is simple and a little
Map
What is the Map?
Create a Map Object

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

Creating acquisition price function

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

So much simpler than if and switch codes and greatly improves readability
to do this, and suddenly the product manager said, and now the New Year, commodities have a discount, you need to set different prices in different time periods, and there will be different logic, can not call the same function, this time to determine if a good number and the birth of what dual 11 pairs 12 New Year's Day ...
If you press if to write, that is, if re-nest if, these codes can be imagined ...
Key to use the Map objects
this time Map and help us solve this problem

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')

Write the code readability even better, clean and beautiful
if certain period of time, have the same logic how to do it?
We can consider the same logic to cache

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')

You can then simplify it?
Is optimized by positive

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)
发布了19 篇原创文章 · 获赞 7 · 访问量 6453

Guess you like

Origin blog.csdn.net/ZYQZXF/article/details/104461923