JavaScript - if...else 语句

JavaScript 的if...else语句在指定条件为真时执行一段代码。当条件为假时，将执行else代码块。if-else语句可用于根据不同条件控制程序的执行流程。

编写程序时，您可能需要在一组给定的路径中选择一条。在这种情况下，您需要使用条件语句，使您的程序能够做出正确的决策并执行正确的操作。

JavaScript 支持条件语句，用于根据不同的条件执行不同的操作。这里我们将解释if...else语句。

if-else流程图

下图显示了if-else语句的工作方式。

JavaScript 支持以下几种形式的if...else语句：

if 语句
if...else 语句
if...else if...语句。

JavaScript if 语句

if语句是基本的控制语句，允许JavaScript根据条件执行语句。

语法

基本if语句的语法如下：

if (expression) {
   Statement(s) to be executed if expression is true
}

这里评估一个JavaScript表达式。如果结果值为真，则执行给定的语句。如果表达式为假，则不执行任何语句。大多数情况下，您会在决策时使用比较运算符。

示例

尝试以下示例以了解if语句的工作方式。

<html>
<body>     
   <div id ='output'> </div>
   <script type = "text/javascript">
      let result;
      let age = 20;
      if( age > 18 ) {
         result = "Qualifies for driving";
      }
	  document.getElementById("output").innerHTML = result;
   </script>      
<p> Set the variable to a different value and then try... </p>
</body>
</html>

输出

Qualifies for driving
Set the variable to different value and then try...

JavaScript if...else 语句

'if...else'语句是另一种控制语句，允许JavaScript以更受控的方式执行语句。

语法

if (expression) {
   Statement(s) to be executed if expression is true
} else {
   Statement(s) to be executed if expression is false
}

这里评估JavaScript表达式。如果结果值为真，则执行‘if’块中的给定语句。如果表达式为假，则执行else块中的给定语句。

示例

尝试以下代码来学习如何在JavaScript中实现if-else语句。

<html>
<body>
   <div id ='output'> </div>
   <script type = "text/javascript">
	  let result;
      let age = 15;
      if( age > 18 ) {
         result = "Qualifies for driving";
      } else {
         result = "Does not qualify for driving";
      }
      document.getElementById("output").innerHTML = result;
   </script>     
   <p> Set the variable to a different value and then try... </p>
</body>
</html>

输出

Does not qualify for driving
Set the variable to different value and then try...

JavaScript if...else if...语句

if...else if...语句（也称为if...else阶梯）是if…else的更高级形式，允许JavaScript从多个条件中做出正确的决策。

语法

if-else-if语句的语法如下：

if (expression 1) {
   Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
   Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
   Statement(s) to be executed if expression 3 is true
} else {
   Statement(s) to be executed if no expression is true
}

这段代码没有什么特别的。它只是一系列的if语句，每个if语句都是前面语句else子句的一部分。根据真值条件执行语句，如果所有条件都不成立，则执行else块。

示例

尝试以下代码，学习如何在JavaScript中实现if-else-if语句。

<html>
<body>
   <div id ="demo"></div>
   <script type="text/javascript">
	  const output = document.getElementById("demo")
      let book = "maths";
      if (book == "history") {
         output.innerHTML="<b>History Book</b>";
      } else if (book == "maths") {
         output.innerHTML="<b>Maths Book</b>";
      } else if (book == "economics") {
         output.innerHTML="<b>Economics Book</b>";
      } else {
         output.innerHTML="<b>Unknown Book</b>";
      }
    </script>
    <p> Set the variable to a different value and then try... </p>
</body>
<html>

输出

Maths Book
Set the variable to different value and then try...

打印页面