js前端条件语句优化

背景

在实际开发中，由于应用需求可能存在多种情况场景，那处理时就需要列举所有对应的情况去处理，常见的处理可能会用到if…else去处理。但是如果条件判断太多，就会导致代码过于冗余难以维护，因此我们可以使用其他的方式去优化、较少代码冗余量。
使用

1、借用Array的方法

1.1 多个判断用includes或者indexOf

举个例子🌰：

if(color==='yellow'||color==='red'||color==='purple'){
  ...
}
1
2
3

如果类似这种需要判断满足单一情况时，我们可以使用includes或者indexOf来代替|| 去列举其他的情况。
○ includes：判断数组中是否存在对应的枚举值，返回true或false
○ indexOf：判断数组中是否存在对应的枚举值，若存在返回对应元素的下标志，或者返回-1

const colorList=['yellow','red','purple',...]
//includes
if(colorList.includes(color)){
  ...
}
//indexOf
if(colorList.indexOf(color)!==-1){
  ...
}
1
2
3
4
5
6
7
8
9

1.2 所有或部分用every或some

举个例子：

// 1、是否所有情况都满足
const colors= [
    { name: 'color1', color: 'yellow' },
    { name: 'color2', color: 'red' },
    { name: 'color3', color: 'purple' }
];
  
function test(colors) {
    let isAllRed = true;
    for (let c of colors) {
        if (!isAllRed) break;
        isAllRed = (c.color == 'red');
    }
    return isAllRed;
}
//调用
test(colors);

//2、是否有满足的
const colors= [
    { name: 'color1', color: 'yellow' },
    { name: 'color2', color: 'red' },
    { name: 'color3', color: 'purple' }
];
  
function test(colors) {
    let isHasRed = false;
    for (let c of colors) {
        if (isHasRed) break;
        isHasRed = (c.color == 'red');
    }
    return isHasRed;
}
//调用
test(colors);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

上面的例子中主要判断是否都满足或者满足一个就去处理，可以使用every来代替全满足情况，使用some来代替满足一种的情况，一行代码即可搞定～

// 1、是否所有情况都满足
const colors= [
    { name: 'color1', color: 'yellow' },
    { name: 'color2', color: 'red' },
    { name: 'color3', color: 'purple' }
];
  
function test(colors) {
   return colors.eveny((item)=>item?.color==='red')
}
//调用
test(colors);

//2、是否有满足的
const colors= [
    { name: 'color1', color: 'yellow' },
    { name: 'color2', color: 'red' },
    { name: 'color3', color: 'purple' }
];
  
function test(colors) {
  return colors.some((item)=>item?.color==='red')
}
//调用
test(colors);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2、对象或者map

2.1 简单判断

当业务代码需要实现类似以下这种情况时

function getColorDescribe(color) {
    if (color === "red") {
        console.log("红色");
    } else if (color === "yellow") {
        console.log("黄色");
    } else if (color === "green") {
        console.log("绿色");
    } else if (color === "purple") {
        console.log("紫色");
    } else if (color === "blue") {
        console.log("蓝色");
    } else {
        console.log("白色");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这种代码逻辑上是完全符合需求的，但是如果情况有100+时，那么函数里面就会铺满if…else语句，代码的可读性和可维护都会大大降低。类似这种简单的判断，我们可以将以上的判断存储在一个对象或者map变量中
存储在对象的改造如下

const colorObj={
  red:()=>  console.log("红色"),
  yellow:()=>console.log("黄色"),
  green:()=> console.log("绿色"),
  purple:()=> console.log("紫色"),
  blue:()=>console.log("蓝色"),
}
function getColorDescribe(color){
  return colorObj[color]?.()|| console.log("白色");
}
1
2
3
4
5
6
7
8
9
10

这样将判读语句提出在外部，函数内部只注重判断结果的处理，浏览代码上更加具有可读性和简洁性
也可以使用使用map来实现相同的效果~

const colorObj=new Map([
  ['red',()=>  console.log("红色")],
  ['yellow',()=>console.log("黄色")],
  ['green',()=> console.log("绿色")],
  ['purple',()=> console.log("紫色")],
  ['blue',()=>console.log("蓝色")],
])
function getColorDescribe(color){
  return colorObj?.get(color)?.()|| console.log("白色");
}
1
2
3
4
5
6
7
8
9
10

2.2 复杂判断

实际开发时，判断条件不只是简单的相等判断，可能会出现需要满足类似以下复杂情况区域多重等的情况逻辑处理时

function getColorDescribe(color) {
    if (color.length>2) {
        console.log("颜色长度大于2");
    } else if (color === "yellow") {
        console.log("黄色");
    } else if (color?.[0]==='r') {
        console.log("颜色开头时r");
    } else if (color.includes('p')) {
        console.log("颜色包括p");
    } else if (color?.[1]==='y'&&color.length>4) {
        console.log("xxxxxx");
    } else {
        console.log("白色");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

以上的情况时，可以引进二维数组去优化

const colorObj = [
  [
    (color) => color.length > 2,
    () => console.log("颜色的长度大于2"),
  ],
  [
    (color) => color === "yellow",
    () => console.log("黄色"),
  ],
  [
    (color) => color?.[0] === "r",
    console.log("如果颜色以r开头"),
  ],
  [
    (color) => color.includes("p"),
    console.log("颜色包含p"),
  ],
  [
    (color) =>
      color?.[1] === "y" && color.length > 4,
    console.log("如果颜色以yy结尾且长度大于4"),
  ],
];

function getColorDescribe(color) {
  const getDescribe = colorObj.find((item) => item?.[0](color));
  return getDescribe? getDescribe[1]() : console.log("白色");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

将判断都存储在二维数组的每一项中的第一项中，将对应的处理逻辑存储在第二项中。使用find去判断该二维数组中的第一项是否满足条件，并且返回。此时如果查找得到就去调用第二项函数处理，否则走默认兜底处理。
这样我们就可以将复杂的逻辑判断提取出来，函数内部尽最大化简化～

3、尽早return

举个例子：需要去判断颜色是否有传，有传时需要判断内部的权重，给出的处理代码如下

function test(color, quantity) {
  const colorList = ['red', 'yellow', 'blue', 'cyan'];

  if (color) {
    if (colorList.includes(color)) {
      console.log('存在');
      if (quantity > 10) {
        console.log('big quantity');
      }
    }
  } else {
  console.log('No Color!');
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

内部需要对有满足的值才去处理，可以使用不满足时就return的方法去改造

function test(color, quantity) {
  const colorList = ['red', 'yellow', 'blue', 'cyan'];
  if(!color) return console.log('No Color!'); // 如果没有传入颜色参数，则返回提示信息
  if(!colorList.includes(color)) return; // 如果传入的颜色参数不在颜色列表中，则返回
  console.log('存在'); // 输出存在的信息
  if (quantity > 10) { // 如果数量大于10
    console.log('big quantity'); // 输出大数量的信息
  }
}
1
2
3
4
5
6
7
8
9

以上逻辑，在没有颜色时就return，没有包括对应的颜色时也return的处理，这种处理可以大大减少内部嵌套。

4、借用运算符

4.1 三元运算符

举个例子

if(color==='red'){
  console.log('红色')
}else{
  console.log('不是红色')
}
1
2
3
4
5

当我们的if…else语句中各有一个表达式情况时，我们就可以使用三元运算符去替换
color===‘red’? console.log(‘红色’): console.log(‘不是红色’)
使用三元运算符一行代码即可实现，但是，不推荐多层的三元运算符，会加大阅读性负担。

4.2 ??、||、&&

单个判断时并且只有一个表达式时，可以使用？？、｜｜、&&运算符去对应情况处理。例如当color变量没有值时使用??替换if，或者没有值或者是0、false时使用｜｜替换，或者是满足某种情况时使用&&替换。

//1.？？
if([null,undefined].includes(color)){
  console.log('有值')
}
//替换
color??console.log('有值')

//2.｜｜
if(!color){
  console.log('有值')
}
//替换
color||console.log('有值')

//3.&&
if(color.length>2){
  console.log('有值')
}
//替换
color.length>2&&console.log('有值')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21