JavaScript中如何将多个if-else条件改写为单行表达式？

单行三元运算符改写方案 #

你提供的代码可直接改写为如下单行写法：

// prdKey赋值逻辑改写
this.prodData.prdKey = this.$route.params.prdKey ? this.$route.params.prdKey : '';
// 也可以用逻辑或进一步简化：this.prodData.prdKey = this.$route.params.prdKey || '';

// version赋值逻辑改写
this.prodData.version = this.$route.params.version ? this.$route.params.version : 1;
// 也可以用逻辑或进一步简化：this.prodData.version = this.$route.params.version || 1;

this.pageMode = this.$route.params.pageMode;
this.getProductDetailsList();

// 函数分支逻辑改写
this.isPrdAvailable ? this.loadMoreproducts() : this.getproductList();

批量同类判断统一替换方案 #

针对项目中大量存在的同类if-else判断，可以按场景用统一方案处理：

• 赋值类默认值填充场景
  这类「有值用原值，无值用默认值」的逻辑，不需要写完整的if-else或三元，直接用运算符简化即可：
  • 如果业务逻辑中空字符串、0、false这类假值都需要走默认值，用逻辑或运算符||，写法为目标变量 = 待判断值 || 默认值
  • 如果只有值为null/undefined的时候才走默认值，需要保留0、false这类有效值，用ES2020的空值合并运算符??，写法为目标变量 = 待判断值 ?? 默认值
    如果有批量字段需要做这类赋值，还可以封装通用工具函数减少重复代码：

  /**
   * 批量给目标对象赋值带默认值的字段
   * @param {Object} source 取值源对象，例如this.$route.params
   * @param {Object} target 赋值目标对象，例如this.prodData
   * @param {Array} configs 字段配置，格式为[[字段名, 默认值], ...]
   */
  function batchAssignDefault(source, target, configs) {
    configs.forEach(([field, defaultValue]) => {
      target[field] = source[field] ?? defaultValue
    })
  }
  
  // 调用示例，后续新增字段只需在配置数组里加项即可
  batchAssignDefault(this.$route.params, this.prodData, [
    ['prdKey', ''],
    ['version', 1],
    // 其他需要赋值的字段直接加在这里
  ])
  

• 二元分支函数调用场景
  这类「满足条件执行A函数，否则执行B函数」的逻辑，直接用三元运算符写单行即可，写法为判断条件 ? 条件成立执行的逻辑 : 条件不成立执行的逻辑。注意如果分支逻辑超过一行，不建议强行压缩为单行，避免影响代码可读性。

内容的提问来源于stack exchange，提问作者learningMonk