在前端开发中如何减少或取代if-else

最近在开发过程中时常因为项目比较忙，都是先考虑实现功能，最近回首看代码发现很多冗长的if-else判断，今日就写一些自己在替代if-else的一些方案。

1. 参数真假判断 之三元运算符

需求：当a 为或假的时候b的取值也随之发生变化；

let a = true,b = null;
console.time('time1');
if (a) {
b = '你好';
} else {
b = '再见';
}
console.timeEnd('time1'); // =>  time1: 0.005126953125ms


console.time('time2');
b = a ? '你好' : '再见';
console.timeEnd('time2'); // time2: 0.004150390625ms

上述代码中可以看出两个执行的时间上通过三元运算符执行时间短且想对比较代码整洁；

优：简化代码,减少代码臃肿

缺：只适用于逻辑判断比较简单的；不使用与逻辑复杂的处理；

2. 使用switch case

let a = 3,b = null;
console.time('time1');
if (a === 1) {
console.log('a')
} else if (a === 2) {
console.log('b')
} else if (a === 3) {
console.log('c')
} else {
console.log('d')
}

console.timeEnd('time1'); // =>  time1: 0.712890625ms


console.time('time2');
switch (a) {
case 1:
console.log('a')
break;
case 2:
console.log('b')
break;
case 3:
console.log('c')
break;
default:
console.log('c')
break;
}
console.timeEnd('time2'); // time2: 0.52392578125ms

总所周知：if-else只是单纯地一个接一个比较；if...else每个条件都计算一遍；

而switch不同 他是通过某个case语句后的值开始，它下方的所有语句都会一直运行，直到遇到一个break为止。

随后，switch语句将结束。

优：美观度高 可识别程度也高。不需要if-else逐个去判断

缺：不适用于多深度的判断。

3.对象的运用

通常后台或给我们返回这样的参数：type：0；// 0：未开始，1：已开始，2：已结束。

这个时候用if-else就有些多余了。我们可以通过创建对象的形式来解决

let option = {
0: '未开始',
1: '已开始',
2: '已结束',
}, type = 2;


option[type];

上述代码可以看出 一行代码即可，

优：使用对象，不需要 if-else 遍历判断， 减少代码的冗长执行机制快；

缺：不利于扩展，因为你option的对象是前端写死的；

4.look-up代替if-else

需求：判断班级里某个学生的分数评级 0-60待努力，61-70加油，71-80良好,81-90优秀,91-99极好,100满分

需求很简单：

let score = 89,rating = null;
console.time('time1');
if (score <= 60) {
rating = '待努力';
} else if (score <= 70) {
rating = '加油';
} else if (score <= 80) {
rating = '良好';
} else if (score <= 90) {
rating = '优秀';
} else if (score <= 99) {
rating = '极好';
} else {
rating = '满分';
}
console.log(rating)

console.timeEnd('time1'); // =>  time1:  0.546875ms

if-else 太多，且当需求修改的时候维护起来比较麻烦

look-up表实现会怎样呢？

let score = 89,rating = null;
let level = [60, 70, 80, 90, 99, 100];
let levelText = ['待努力', '加油', '良好', '优秀', '极好', '满分'];
for (let i = 0; i < level.length; i++) {
if (score <= level[i]) {
console.log(levelText[i]) // => 优秀
return rating = levelText[i];
}
}

数据与逻辑业务的分离如果有需求修改 只需修改 level与levelText即可逻辑不需要修改；

更近一步的话可以将此方法封装

let level = [60, 70, 80, 90, 99, 100];
let levelText = ['待努力', '加油', '良好', '优秀', '极好', '满分'];
this.leetcode(score, level, levelText);

leetcode (score, level, levelText) {
console.time('time1');
for (let i = 0; i < level.length; i++) {
if (score <= level[i]) {
return levelText[i];
}
}
},

总结：

在判断语句的时候尽量做到数据与逻辑业务的分离，有利于后期的维护。要灵活运用各种特性来完成需求，在大多情况下switch 比if-else运行更快。在使用if-else的时候尽量避免else的使用。