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)