本文共 2015 字，大约阅读时间需要 6 分钟。

1、原代码

if (index === 0) {
         dispatch({
           type: 'emailApi/inquireEmailReceiveListByPageAccount',        payload: {
             loading: true,        },      });      this.generateBadge();    } else if (index === 1) {
         dispatch({
           type: 'emailApi/inquireEmailSendListByPageAccount',        payload: {
             loading: true,        },      });    } else if (index === 2) {
         dispatch({
           type: 'emailApi/inquireEmailDraftListByPageAccount',        payload: {
             loading: true,        },      });    } else {
         dispatch({
           type: 'emailApi/inquireEmailRecoverListByPageAccount',        payload: {
             loading: true,        },      });    }

在一开始书写这段代码的时候，就是单纯的if else 条件判断，后面开发完返过来看的时候，觉得非常的冗余，所以进行了以下更改。

2、简单改写后

借助数组索引取值，避免了冗余的if判断,将函数独立出来

const typeList = [      'inquireEmailReceiveListByPageAccount',      'inquireEmailSendListByPageAccount',      'inquireEmailDraftListByPageAccount',      'inquireEmailRecoverListByPageAccount',    ];    dispatch({
         type: `emailApi/${
     typeList[index]}`,      payload: {
           loading: true,      },    });    if (index === 0) this.generateBadge();

这里要注意的是，我这样写的目的只是为了优化代码的结构，对于性能方面没有深入去研究，但是我相信这样改写之后性能一定有所提升。对于改写之后的代码可读性来说，我觉得不影响阅读。

也看到一些地方会使用三目运算符去改写if else判断，对于这种方式，我引用一段历史书上提到的观点。

少用三目运算符

有一些程序员喜欢大规模地使用三目运算符，来代替传统的 if、else。理由是三目运算符性能高，代码量少。不过，这两个理由其实都很难站得住脚。即使我们假设三目运算符的效率真的比 if、else 高，这点差距也是完全可以忽略不计的。在实际的开发中，即使把一段代码循环一百万次，使用三目运算符和使用 if、else 的时间开销处在同一个级别里。同样，相比损失的代码可读性和可维护性，三目运算符节省的代码量也可以忽略不计。让 JS文件加载更快的办法有很多种，如压缩、缓存、使用 CDN 和分域名等。把注意力只放在使用三目运算符节省的字符数量上，无异于一个 300 斤重的人把超重的原因归罪于头皮屑。 如果条件分支逻辑简单且清晰，这无碍我们使用三目运算符：var global = typeof window !== "undefined" ? window : this; 但如果条件分支逻辑非常复杂，如下段代码所示，那我们最好的选择还是按部就班地编写if、else。if、else 语句的好处很多，一是阅读相对容易，二是修改的时候比修改三目运算符周围的代码更加方便： if ( !aup || !bup ) {
     return a === doc ? -1 :  b === doc ? 1 :  aup ? -1 :  bup ? 1 :  sortInput ?  ( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :  0; }

总之，在优化代码的同时还要注意代码的可读性

转载地址：https://blog.csdn.net/weixin_45416217/article/details/115959486 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！