在实际的开发工作中,我们总会遇到很多种业务场景需要去一一判断不同的情况,然后再去做相应的业务处理,因此,我们通常会写很多if…else判断,或者用switch语句来使代码结构更清晰一点,但就算这样,我们还有没有更好一点的优化手段呢?
if 单一条件时,我们可以使用三元表达式来优化
if (type === 1) {
console.log(1)
}
callMethod()
// 优化
type === 1 ? console.log(1) : callMethod()
1.多条件判断时用 Array.includes()
const fruitsArr = ['apple', 'peach', 'banana', 'cherry']
// Array.some() 用于检测数组中的元素是否有满足指定条件的,若满足返回true,否则返回false
// Array.every() 用于检测数组中所有元素是否都符合指定条件,若符合返回true,否则返回false
// Array.includes()
// (1) 对多个条件使用 Array.includes()
if (item === 'apple' || item === 'peach' || item === 'banana'){
// callMethod
}
// 用includes来重构
if (fruitsArr.includes(item) {
// callMethod
}
if (type === 0) {
// do sth ...
} else if (type === 1) {
// do sth ...
} else if (type === 2) {
// do sth ...
} else if (type === 3) {
// do sth ...
}
switch (type) {
case 0:
// ...
break
case 1:
/ ...
break
case 2:
// ...
break
case 3:
// ...
break
default:
// ...
}
2.利用Map结构
Map结构的目的和基本用法
JavaScript的对象(Object),本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
Map 类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。
Map构造函数接受数组作为参数,该数组的成员是一个个表示键值对的数组
因此我们可以用map来改造if else 结构代码:
定义一个map,里面存储对应的状态码和相应的操作
let typeMap = new Map([
[0, doCaseZero],
[1, doCaseOne],
[2, doCaseTwo],
[3, doCaseThree]
])
// 定义对应的方法:
doCaseZero(){}
doCaseOne(){}
doCaseTwo(){}
doCaseThree(){}
// 当符合某个状态时,执行相应的操作
typeMap.get(type)()
// typeMap.get(1)() 执行doCaseOne方法
这种优化的缺点也很明显,那就是如果状态很多,就要写很多对应的函数,造成重复切单一的行为操作。
3.策略模式:存到对象里面,然后利用 obj[] 这种对象动态属性名来实现
// 将所有可预知的状态统一封装在一个对象中,利用对象的多态性来实现
let typeUser = {
buyer: () => { buyGoods() },
seller: () => { sellGoods() },
producer: () => { produceGoods() },
agent: () => { recommendGoods() }
}
buyGoods() {
console.log(111)
}
// 写一个应对所有状态的方法:
faceDiffUsers(role) {
typeUser['role']()
}