有没有更好的方法来减少多个 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>
我有一个函数可以验证几个不同的条件。这是我的函数示例:
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>