运行函数的两种方式之间的差异

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

我想知道两种方法之间是否存在性能差异...

是的，只是一点点；通常，使用异常机制要比简单分支花费更多，尽管当您抛出的不是Error时（因为从不创建时起），它在JavaScript（相对于其他语言）中不是[[big差异）一个Error，则不必捕获堆栈信息。

...以及应使用哪种方法执行此类操作。

通常，异常处理是针对特殊条件，而不是预期条件。对于您所描述的，标准方法将是第一个简单分支。您可以将字符串存储在一个简单的变量中，然后在innerHTML /if/ else if之后分配给else：

function validateAge() {
  var agge = document.getElementById("age").value;
  var message;
  if (agge == "") {
    message = "Please enter your age";
  } else if (agge < 18) {
    message = "You are too young to vote";
  } else {
    message = "You are eligible to vote";
  }
  document.getElementById("result").innerHTML = message;
}

 
function validateAge() {
  var agge = document.getElementById("age").value;
  var message;
  if (agge == "") {
    message = "Please enter your age";
  } else if (agge < 18) {
    message = "You are too young to vote";
  } else {
    message = "You are eligible to vote";
  }
  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" < 18的评估结果为NaN < 18，而其评估为false。

Answer 2

您的第二个代码必须处理一个throw / catch

以下方法可能会更快，但不会那么明显

function validateAge() {
  var age = document.getElementById("age").value;
  var paragraph = document.getElementById("result");
  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;
} 

Answer 3

这会更快。

function validateAge() {
  var age = document.getElementById("age").value
  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>