有没有更好的方法来减少多个 if 语句?

Is there a better way to reduce multiple if statements?

我有一个函数可以验证几个不同的条件。这是我的函数示例:

function checkData() {
  var errorMsg = "",
    fld1 = 0, //Number(document.getElementById('fld1').value),
    fld2 = 5, //Number(document.getElementById('fld2').value),
    fld3 = 1, //Number(document.getElementById('fld3').value),
    fld4 = 0; //Number(document.getElementById('fld4').value);

  if (!fld1) {
    errorMsg += "Error 1\n\n";
  }

  if (fld1 === fld4) {
    errorMsg += "Error 2\n\n";
  }

  if (fld2 > fld4) {
    errorMsg += "Error 3\n\n";
  }

  if (fld3 > 3) {
    errorMsg += "Error 4\n\n";
  }

  if (errorMsg !== "") {
    var check = confirm(errorMsg + "\n Do you want to submit the form?");

    if (check) {
      return true;
    } else {
      return false;
    }
  }

  return true;
}
<button onclick="checkData();">Click Here</button>

在上面的示例中,为了测试目的,我硬编码了一些值。但是,我想知道我是否可以重构这段代码并找到实现相同结果的更好方法?三元运算符会更好吗?或者还有另一种方法可以让它工作?谢谢。

在这个用例中,我认为 'multiple-ifs' 解决方案非常明确,因此可以使用它。

如果要优化一点,我只能建议

        if(check){
            return true;
        }else{
            return false;
        }

成为

return !!check;

(这两个感叹词只是将任何对象转换为布尔值 :-))

您可以使用三元运算符重构您的 if 语句。但很有可能这会使您的代码更难阅读。你可以替换

if(check){
    return true;
}else{
    return false;
}

只要 return check; 因为这是一个布尔语句。

此外,就可读性而言,最好将字段变量标记为更有意义的内容,因为知道 fld2 应始终大于 fld4 从名字.

如果您不关心突出显示特定的错误代码,那么您当然可以将一些检查合并在一起,只是 return false 而不指定错误代码,但我怀疑您将希望保留该功能。

整个check变量毫无意义。所以 return confirm 就是你所需要的

function checkData() {
 var errorMsg = "",
  fld1 = 0, //Number(document.getElementById('fld1').value),
  fld2 = 5,//Number(document.getElementById('fld2').value),
  fld3 = 1,//Number(document.getElementById('fld3').value),
  fld4 = 0;//Number(document.getElementById('fld4').value);

 if(!fld1){
  errorMsg += "Error 1\n\n";
 }

 if(fld1 === fld4){
  errorMsg += "Error 2\n\n";
 }

 if(fld2 > fld4){
  errorMsg += "Error 3\n\n";
 }

 if(fld3 > 3){
  errorMsg += "Error 4\n\n";
 }

    return errorMsg !== "" ? confirm(errorMsg + "\n Do you want to submit the form?") : true

}
<button onclick="checkData();">Click Here</button>