使用策略模式对If语句的优化——前端

我在看《web前端性能优化》这本书的逻辑语句部分，看完之后感悟到了很多，所以现在把我吸收的精华分享出来。请往下看~~~

if语句

通常的if-else语句，很简单哦，我就写一个伪代码作为举例。

if(value === 0){
	//对于0的处理
}else if(value === 1){
	//对于1的处理
}else if(value === 2){
	//对于2的处理
}else if(value === 3){
	//对于3的处理
}else{
	//对于其他情况的处理
}

switch语句

就是在条件判断中的判断值都为离散值这样的数据，比如一二三四五，其实可以考虑用switch语句来进行相应的处理，我简单的把上面的if-else语句进行一下优化。

switch(value){
	case 0:
		//对于0的处理
		break;
	case 1:
		//对于1的处理
		break;
	case 2:
		//对于2的处理
		break;
	case 3:
		//对于3的处理
		break;
	default:
		//对于其他情况的处理
}

对于if-else语句，使用switch语句会具有更高的的性能表现。switch语句不仅可以清晰看见每层的数据处理，而且可以把不同的条件取值指向同一个操作。

通过数组索引和对象属性

除了if-else和switch语句之外，还可以通过数组的索引查询和对象的属性来进行条件查询

//基于对象的映射
const valueMap = {
	'condition1': () => { //处理1的过程 },
	'condition2': () => { //处理2的过程 },
	'condition3': () => { //处理3的过程 },
}
//提取对应的属性
valueMap[value]

这种基于对象的查找方法，利用了设计模式的策略模式，如果现在没有看懂，可以看下面的策略模式的实践

策略模式优化实践

现在假设一个背景，就是一个大厂的公司，现在要发年终奖了，是按照绩效等级为“S”，发正常工资的三倍，绩效等级为“A”的，发正常工资的两倍，绩效等级为“B”的，只是正常工资。
其实很容易想到肯定使用if-else来进行封装一个函数，但是如果绩效等级过多，比如有十个以上的绩效等级，那么if-else就不是一个很好的选择了，这里就需要通过使用策略模式进行优化。

const bonus= {
	"S" = (salary) => { salary * 3 },
	"A" = (salary) => { salary * 2 },
	"B" = (salary) => { salary  },
}
function calculate(salary, level) {
	return bonus[level](salary);
}
//测试
calculate(3000, "S"); //9000

感谢大家看到这里！！！