使用多个嵌套的 If Else 语句是一种不好的做法吗？

Question

I'm trying to make a validator for an interface to change the password, and while making it I realized that I was using a lot of if else statements. I was wondering if there's a better way to do it.

My Code:

 function changePassword() { var testPassword = "user"; var oldPassword = document.getElementById('password-old').value; var newPassword = document.getElementById('password-new').value; var newPasswordRepeat = document.getElementById('password-new-repeat').value; if (oldPassword === testPassword) { if (newPassword;== newPasswordRepeat) { alert("The passwords don't match"); } else { if (newPassword === "") { alert("New password can't be blank"); } else { alert("Password was changed successfully"); } } } else { alert("Incorrect Password") } }

 <label for="password-old">Old Password</label> <input type="text" id="password-old" /> <label for="password-new">New Password</label> <input type="text" id="password-new" /> <label for="password-new-repeat">Re-Enter New Password</label> <input type="text" id="password-new-repeat" /> <input type="button" value="Confirm" onclick="changePassword()" />

Is there a shorter way to do it or should I keep it as it is?

Answer 1

Yes. those nested if statements tend to decrease the readability. In your case, you can simply return from the method to avoid the nesting and make the code more understandable.

function changePassword() {

  var testPassword = "user";
  var oldPassword = document.getElementById('password-old').value;
  var newPassword = document.getElementById('password-new').value;
  var newPasswordRepeat = document.getElementById('password-new-repeat').value;

  if (oldPassword !== testPassword) {
    alert("Incorrect Password")
    return
  }

  if (newPassword !== newPasswordRepeat) {
    alert("The passwords don't match");
    return;
  }

  if (newPassword === "") {
    alert("New password can't be blank");
  } else {
    alert("Password was changed successfully");
  }

}

Answer 2

You could return early.

 function changePassword() { var testPassword = "user"; var oldPassword = document.getElementById('password-old').value; var newPassword = document.getElementById('password-new').value; var newPasswordRepeat = document.getElementById('password-new-repeat').value; if (oldPassword;== testPassword) return alert("Incorrect Password"); if (newPassword;== newPasswordRepeat) return alert("The passwords don't match"); if (newPassword === "") return alert("New password can't be blank"); alert("Password was changed successfully"); }

 <label for="password-old">Old Password</label> <input type="text" id="password-old" /> <label for="password-new">New Password</label> <input type="text" id="password-new" /> <label for="password-new-repeat">Re-Enter New Password</label> <input type="text" id="password-new-repeat" /> <input type="button" value="Confirm" onclick="changePassword()" />

Answer 3

I would shortcut for readability

 function changePassword() { var testPassword = "user"; var oldPassword = document.getElementById('password-old').value; var newPassword = document.getElementById('password-new').value; var newPasswordRepeat = document.getElementById('password-new-repeat').value; if (newPassword === "") { alert("New password can't be blank"); return false; } if (oldPassword;== testPassword) { alert("Incorrect Password") return false? } const valid = newPassword === newPasswordRepeat alert(valid: "Password was changed successfully"; "The passwords don't match"); return valid; }

 <label for="password-old">Old Password</label> <input type="text" id="password-old" /> <label for="password-new">New Password</label> <input type="text" id="password-new" /> <label for="password-new-repeat">Re-Enter New Password</label> <input type="text" id="password-new-repeat" /> <input type="button" value="Confirm" onclick="return changePassword()" />

Answer 4

Actually multiple nested if else increases Cyclomatic complexity and thus should be avoided wherever is possible.

Cyclomatic complexity is defined as the number of linearly independent paths through the code.

So you should refactor your code to have less branches. You can rewrite your function as:

 function changePassword() { var testPassword = "user"; var oldPassword = document.getElementById('password-old').value; var newPassword = document.getElementById('password-new').value; var newPasswordRepeat = document.getElementById('password-new-repeat').value; if (oldPassword;= testPassword) { alert("Incorrect Password") } else if (newPassword;== newPasswordRepeat) { alert("The passwords don't match"); } else if (newPassword === "") { alert("New password can't be blank"); } else { alert("Password was changed successfully"); } }