使用异常进行输入验证是否对性能有害？

Question

我想运行一个函数来检查用户输入的年龄是否足以让他投票。我用两种方式做到了

这两个代码都运行良好，并且都以相同的方式工作。我想知道这两种方法是否存在任何性能差异，以及应使用哪种方法来执行此类操作。

第一种方式 ：

function validateAge() {

  var age = document.getElementById("age").value;

  var paragraph = document.getElementById("result");

  if (age == "") {

    paragraph.innerHTML = "Please enter your age";

  } else if (age < 18) {

    paragraph.innerHTML = "You are too young to vote";

  } else {

    paragraph.innerHTML = "You are eligible to vote";

  }

}

<title>Age validator</title>

<h1>Enter your age to check if you are eligible to vote : </h1>

<label>Enter Your age : </label>

<input type="text" id="age" /><br/>

<input type="button" onclick="validateAge()" value="Validate" /><br/>

<p id="result"></p>

第二种方式 ：

function validateAge() {

  try {

    var agge = document.getElementById("age").value;

    if (agge == "") {

      throw "Please enter your age";

    } else if (agge < 18) {

      throw "You are too young to vote";

    } else {

      throw "You are eligible to vote";

    }

  } catch (obj) {

    document.getElementById("result").innerHTML = obj;

  }

}

<title>Age validator</title>

<h1>Enter your age to check if you are eligible to vote : </h1>

<label>Enter Your age : </label>

<input type="text" id="age" /><br/>

<input type="button" onclick="validateAge()" value="Validate" /><br/>

<p id="result"></p>

Answer 1

我想知道这两种方法中是否有任何性能差异...是的，勉强;通常使用异常机制比简单的分支成本更高，尽管当你抛出的东西不是时，它在JavaScript中（与其他一些语言相比）没有太大的区别（因为当你不创建时，不需要捕获堆栈信息）。ErrorError...以及应使用哪种方法来执行此类操作。通常，异常处理适用于特殊情况，而不是预期的情况。对于您描述的内容，标准方法将是第一个，即简单分支。您可以将字符串存储在一个简单的变量中，然后在 // 之后赋值：innerHTMLifelse ifelsefunction validateAge() {&nbsp; var agge = document.getElementById("age").value;&nbsp; var message;&nbsp; if (agge == "") {&nbsp; &nbsp; message = "Please enter your age";&nbsp; } else if (agge < 18) {&nbsp; &nbsp; message = "You are too young to vote";&nbsp; } else {&nbsp; &nbsp; message = "You are eligible to vote";&nbsp; }&nbsp; document.getElementById("result").innerHTML = message;}function validateAge() {&nbsp; var agge = document.getElementById("age").value;&nbsp; var message;&nbsp; if (agge == "") {&nbsp; &nbsp; message = "Please enter your age";&nbsp; } else if (agge < 18) {&nbsp; &nbsp; message = "You are too young to vote";&nbsp; } else {&nbsp; &nbsp; message = "You are eligible to vote";&nbsp; }&nbsp; document.getElementById("result").innerHTML = message;}<title>Age validator</title><h1>Enter your age to check if you are eligible to vote : </h1><label>Enter Your age : </label><input type="text" id="age" /><br/><input type="button" onclick="validateAge()" value="Validate" /><br/><p id="result"></p>..但这主要是风格问题。不过，可能更重要的是，最好检查用户输入的内容是否实际上是一个数字。使用您当前的代码，如果我在字段中编写，我被告知我有资格投票，因为评估值会评估为 。seven"seven" < 18NaN < 18false

Answer 2

这将更快。function validateAge() {&nbsp; var age = document.getElementById("age").value&nbsp; document.getElementById("result").innerHTML = age?age<18?"You are too young to vote":"You are eligible to vote":"Please enter your age"}<title>Age validator</title><h1>Enter your age to check if you are eligible to vote : </h1><label>Enter Your age : </label><input type="number" id="age" /><br/><input type="button" onclick="validateAge()" value="Validate" /><br/><p id="result"></p>

Answer 3

您的第二个代码必须处理抛出/捕获以下内容可能会更快，但不会明显如此var text;if (age.trim() === "") text = "Please enter your age";else if (isNaN(age)) text = "That is not an age";else text = +age < 18 ? "You are too young to vote" : "You are eligible to vote";paragraph.textContent = text;window.addEventListener("load", function() {&nbsp; document.getElementById("validate").addEventListener("click", function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var age = document.getElementById("age").value;&nbsp; &nbsp; var paragraph = document.getElementById("result");&nbsp; &nbsp; var text;&nbsp; &nbsp; if (age.trim() === "") text = "Please enter your age";&nbsp; &nbsp; else if (isNaN(age)) text = "That is not an age";&nbsp; &nbsp; else text = +age < 18 ? "You are too young to vote" : "You are eligible to vote";&nbsp; &nbsp; paragraph.textContent = text;&nbsp; });});<title>Age validator</title><h1>Enter your age to check if you are eligible to vote : </h1><label>Enter Your age : </label><input type="text" id="age" /><br/><input type="button" id="validate" value="Validate" /><br/><p id="result"></p>