如何减少if...else... 条件判断的实用小技巧

最新推荐文章于 2025-06-25 11:05:32 发布

铁锤妹妹@

最新推荐文章于 2025-06-25 11:05:32 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45811256/article/details/121447372

JavaScript 专栏收录该内容

54 篇文章

订阅专栏

本文探讨了如何优化代码中的if-else条件判断，提出了利用indexOf和includes方法简化判断逻辑的方法，并介绍了「卫语句」的概念及其应用，帮助提高代码可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中如果if-else 条件判断多了，并不是错，也不会导致bug，但是这样的代码不利于扩展及后续维护，容易出错，降低开发效率等问题；过后再看自己的项目眼花缭乱，更别提同事看你的代码了；所以请保持程序猿的代码洁癖，优化它。

1. 利用indexOf做判断

// bad
if ( name === '111' || name === '222' || name === '333' || name === '444') {
    test();
}
// good
const nameList = ['111','222','333','444'];
if ( nameList.indexOf( name ) > -1 ) {
    test();
}

2. 利用include做判断

// bad
if ( name === '111' || name === '222' || name === '333' || name === '444') {
    test();
}
// good
const nameList = ['111','222','333','444'];
if ( nameList.include( name )) {
    test();
}

3. 「卫语句」解决
什么是「卫语句」呢？借用张图
在这里插入图片描述
嵌套的if-else在代码层次上看，最大问题在于深度过于深，解决这个问题，最直接的方式就是减少深度。

卫语句的实质就是将深层的if-else扁平化，强制使用return结束判断流程。

function getPayAmount() {
  let result;
  if (isDead)
    result = deadAmount();
  else {
    if (isSeparated)
      result = separatedAmount();
    else {
      if (isRetired)
        result = retiredAmount();
      else
        result = normalPayAmount();
    }
  }
  return result;
}

在这里插入图片描述

function getPayAmount() {
  if (isDead) return deadAmount();
  if (isSeparated) return separatedAmount();
  if (isRetired) return retiredAmount();
  return normalPayAmount();
}