需求: 经常在代码中会有各种条件判断,导致if/else
使用过多,不仅阅读麻烦,对于新加的条件,还不好扩展,文中列举了7中优化方案,可以根据实际代码环境选用。文中并没有列举switch
,是因为switch
结构使用上与is/else
并无区别。
1、提前return
,可以将判断层级拉平
let animal = 'cat'
if (animal !== 'person') {
if (animal === 'cat') {
console.log('猫')
}
if (animal === 'pig') {
console.log('猪')
}
}
let animal = 'cat'
if (animal === 'person') return
if (animal === 'cat') {
console.log('猫')
}
if (animal === 'pig') {
console.log('猪')
}
2、使用逻辑运算符
let animal = 'cat'
if (animal === 'cat') {
console.log('猫')
} else {
console.log('其他动物')
}
let animal = 'dog'
animal === 'cat' && console.log('猫')
animal === 'dog' && console.log('狗')
animal === 'cat' || console.log('其他动物')
animal === 'dog' || console.log('其他动物')
3、使用三元运算符
let animal = 'cat'
if (animal === 'cat') {
console.log('猫')
} else {
console.log('其他动物')
}
let animal = 'cat'
animal === 'cat' ? console.log('猫') : console.log('其他动物')
4、使用includes
let animal = 'cat'
if (animal === 'cat' || animal === 'dog' || animal === 'pig') {
console.log('动物')
}
let animal = 'cat'
let arr = ['cat', 'dog', 'pig']
if (arr.includes(animal)) {
console.log('动物')
}
5、使用Object
对象存储,针对单个判断条件比较方便,也可以字符串拼接多个判断条件,但是不推荐
let animal = 'cat'
if (animal === 'cat') {
console.log('猫')
} else if (animal === 'dog') {
console.log('狗')
} else if (animal === 'pig') {
console.log('猪')
} else {
console.log('其他动物')
}
let animal = 'cat'
let animals = {
cat: '猫',
dog: '狗',
pig: '猪'
}
console.log(animals[animal])
// 字符串拼接多个判断条件
let animal = 'cat'
let color = 'red'
let animals = {
cat_red: '红猫',
cat_white: '白猫',
dog_red: '红狗',
dog_white: '白狗'
}
console.log(animals[animal + '_' + color])
6、使用对象数组,多个判断条件
let animal = 'cat'
let color = 'white'
if (animal === 'cat') {
if (color === 'red') {
console.log('红猫')
}
if (color === 'white') {
console.log('白猫')
}
} else if (animal === 'dog') {
if (color === 'red') {
console.log('红狗')
}
if (color === 'white') {
console.log('白狗')
}
}
let animal = 'cat'
let color = 'white'
let animals = [
{ type: 'cat', color: 'red', name: '红猫' },
{ type: 'cat', color: 'white', name: '白猫' },
{ type: 'dog', color: 'red', name: '红狗' },
{ type: 'dog', color: 'white', name: '白狗' }
]
let _animal = animals.filter((item) => item.type === animal && item.color === color)
console.log(_animal[0].name)
7、使用Map
数据结构
let animal = 'cat'
let color = 'white'
if (animal === 'cat') {
if (color === 'red') {
console.log('红猫')
}
if (color === 'white') {
console.log('白猫')
}
} else if (animal === 'dog') {
if (color === 'red') {
console.log('红狗')
}
if (color === 'white') {
console.log('白狗')
}
}
let animal = 'cat'
let color = 'white'
let animals = new Map([
[{ type: 'cat', color: 'red' }, '红猫'],
[{ type: 'cat', color: 'white' }, '白猫'],
[{ type: 'dog', color: 'red' }, '红狗'],
[{ type: 'dog', color: 'white' }, '白狗']
])
let _animal = [...animals].filter(([key, value]) => key.type === animal && key.color === color)
let [_key, _name] = _animal[0]
console.log(_name)