Javascript 拆分用于代码重构的if-else语句

代码：每次仅显示一条错误消息

function isValidFields() {

        if (!$("#x").val()) {
            utilsService.setErrorClass('x');
            $scope.validationMessage.xErrorMessage = true;

        } else if (!$("#a").val()) {
            utilsService.setErrorClass('a');
            $scope.validationMessage.yErrorMessage = true;

        } else if (!$("#b").val()) {
            utilsService.setErrorClass('b');
            $scope.validationMessage.zgErrorMessage = true;

        } else if (!$("#c").val()) {
            utilsService.setErrorClass('c');
            $scope.validationMessage.cgErrorMessage = true;

        } else if (!$("#d").val()) {
            utilsService.setErrorClass('d');
            $scope.validationMessage.dgErrorMessage = true;


        } else if (!$("#e").val()) {
            utilsService.setErrorClass('e');
            $scope.validationMessage.egErrorMessage = true;


        } else if (!$("#f").val()) {
            utilsService.setErrorClass('f');
            $scope.validationMessage.fgErrorMessage = true;

        } else {
            $scope.validationMessage = {};
            return true;
        }
    }

---

使上述代码更具可读性、避免许多if-else语句和避免代码重复的最佳方法是什么。

您可以这样做

//模拟范围
让$scope={
验证消息：{
XerorMessage:空
}
};
//模拟utilServer
让utilsService={
setErrorClass：（id）=>console.log（id）
}
函数isValidFields（）{
让id=['x'，'a'，'b'，'c'，'d'，'e'，'f']；
//查找具有空值的第一个元素的id
让first=ids.reduce（（最后一个，curr）=>{
返回最后一个| |（！$（“#”+curr.val（））？curr:null）
}，空）；
//所有元素都有值
如果（！第一个）{
$scope.validationMessage={}；
返回true；
}
utilsService.setErrorClass（第一）；
$scope.validationMessage.xErrorMessage=true；
}

输入，按钮{
显示：块；
利润率：10px；
填充：10px；
}

试试看

您可以通过以下方式执行此操作：

function isValidFields() {
 var fields = ['x','a','b','c','d','e','f'];
    $scope.validationMessage = {};
    for(var i=0;i<fields.length;i++){
        if(!$("#"+fields[i]).val()) {
            utilsService.setErrorClass(fields[i]);
            $scope.validationMessage[fields[i]+'ErrorMessage'] = true;
            return true;
        }
    }
}

函数isValidFields（）{
变量字段=['x'、'a'、'b'、'c'、'd'、'e'、'f']；
$scope.validationMessage={}；
对于（var i=0；我能看到HTML和看起来像angular控制器的东西吗？所有这些都可以在angular中完成，这将极大地清理它（选择一种技术），reduce方法似乎不符合当前的行为，我每次提交带有数组顺序的表单时都需要检查一个字段（作为表单字段顺序）。如果失败，它应该停止，它也会显示第二个错误。reduce将只返回1个值，即第一个空元素的id。我用mock更新了代码，以便您可以单步执行并验证。setErrorClass:（id）=>console.log（id）您能告诉我它是什么设计模式吗？