跳到主要内容

JavaScript if...else 语句

提示
  1. if...else语句的作用：JavaScript中的if...else语句用于在不同条件下执行不同的代码块，如基于学生成绩分配不同等级。
  2. if...else语句的不同形式：包括单独的if语句、if...else语句和if...else if...else语句，用于处理不同的决策情况。
  3. 嵌套if...else语句：if...else语句可以嵌套使用，但这可能使逻辑变得复杂，应尽量避免。

在计算机编程中，可能会出现需要从多个备选方案中运行一段代码的情况。例如，根据学生获得的分数，分配等级 A、B 或 C。

在这种情况下，您可以使用 JavaScript 的 if...else 语句来创建可以做出决策的程序。

在 JavaScript 中，if...else 语句有三种形式。

  1. if 语句
  2. if...else 语句
  3. if...else if...else 语句

JavaScript if 语句​

if 语句的语法是：

if (条件) {
  // if 的代码体
}

if 语句评估圆括号 () 内的条件。

  1. 如果条件评估为 true，则执行 if 的代码体。
  2. 如果条件评估为 false，则跳过 if 的代码体。

注意： { } 内的代码是 if 语句的代码体。

JavaScript 中 if 语句的工作原理

示例 1：if 语句​

// 检查数字是否为正数

const number = prompt("输入一个数字：");

// 检查数字是否大于 0
if (number > 0) {
  // if 语句的代码体
  console.log("该数字是正数");
}

console.log("if 语句很简单");

输出 1

输入一个数字：2
该数字是正数
if 语句很简单

假设用户输入了 2。在这种情况下，条件 number > 0 评估为 true。因此，执行 if 语句的代码体。

输出 2

输入一个数字：-1
if 语句很简单

假设用户输入了 -1。在这种情况下，条件 number > 0 评估为 false。因此，跳过 if 语句的代码体。

由于 console.log("if 语句很简单"); 位于 if 语句的代码体之外，所以它始终被执行。

条件和逻辑运算符用于条件中。要了解更多关于条件和逻辑运算符的信息，您可以访问 JavaScript 比较和逻辑运算符。

JavaScript if...else 语句​

if 语句可以有一个可选的 else 子句。if...else 语句的语法是：

if (条件) {
  // 条件为真时的代码块
} else {
  // 条件为假时的代码块
}

if..else 语句评估括号内的条件。

如果条件评估为 true，

  1. 执行 if 的代码体
  2. 跳过 else 的代码体的执行

如果条件评估为 false，

  1. 执行 else 的代码体
  2. 跳过 if 的代码体的执行

JavaScript 中 if-else 语句的工作原理

示例 2：if…else 语句​

// 检查数字是正数还是负数/零

const number = prompt("输入一个数字：");

// 检查数字是否大于 0
if (number > 0) {
  console.log("该数字是正数");
}
// 如果数字不大于 0
else {
  console.log("该数字是负数或 0");
}

console.log("if...else 语句很简单");

输出 1

输入一个数字：2
该数字是正数
if...else 语句很简单

假设用户输入了 2。在这种情况下，条件 number > 0 评估为 true。因此，执行 if 语句的代码体，而 else 语句的代码体被跳过。

输出 2

输入一个数字：-1
该数字是负数或 0
if...else 语句很简单

假设用户输入了 -1。在这种情况下，条件 number > 0 评估为 false。因此，执行 else 语句的代码体，而 if 语句的代码体被跳过。

JavaScript if...else if 语句​

if...else 语句用于在两个备选方案中执行一段代码。然而，如果您需要在两个以上的备选方案中做出选择，可以使用 if...else if...else。

if...else if...else 语句的语法是：

if (条件1) {
  // 代码块 1
} else if (条件2) {
  // 代码块 2
} else {
  // 代码块 3
}

  • 如果 条件1 评估为 true，则执行 代码块 1。

  • 如果 条件1 评估为 false，则评估 条件2。

  • 如果 条件2 为 true，则执行 代码块 2。

  • 如果 条件2 为 false，则执行 代码块 3。

JavaScript 中 if-else if 语句的工作原理

示例 3：if...else if 语句​

// 检查数字是正数、负数还是零
const number = prompt("输入一个数字：");

// 检查数字是否大于 0
if (number > 0) {
  console.log("该数字是正数");
}
// 检查数字是否为 0
else if (number == 0) {
  console.log("该数字是 0");
}
// 如果数字既不大于 0 也不是 0
else {
  console.log("该数字是负数");
}

console.log("if...else if...else 语句很简单");

输出

输入一个数字：0
该数字是 0
if...else if...else 语句很简单

假设用户输入了 0，那么第一个测试条件 number > 0 评估为 false。然后，第二个测试条件 number == 0 评估为 true，并执行相应的代码块。

嵌套 if...else 语句​

您还可以在 if...else 语句内部使用 if...else 语句。这被称为嵌套 if...else 语句。

示例 4：嵌套 if...else 语句​

// 检查数字是正数、负数还是零
const number = prompt("输入一个数字：");

if (number >= 0) {
  if (number == 0) {
    console.log("您输入的数字是 0");
  } else {
    console.log("您输入的是正数");
  }
} else {
  console.log("您输入的是负数");
}

输出

输入一个数字：5
您输入的是正数

假设用户输入了 5。在这种情况下，条件 number >= 0 评估为 true，程序控制权进入外部 if 语句。

然后，评估内部 if 语句的测试条件 number == 0。由于它为假，因此执行内部 if 语句的 else 子句。

注意： 正如您所见，嵌套 if...else 使我们的逻辑变得复杂，我们应尽可能避免使用嵌套 if...else。

if...else 只有一个语句的情况​

如果if...else的主体只有一个语句，我们可以在程序中省略{ }。例如，您可以将

const number = 2;
if (number > 0) {
  console.log("The number is positive.");
} else {
  console.log("The number is negative or zero.");
}

替换为

const number = 2;
if (number > 0) console.log("The number is positive.");
else console.log("The number is negative or zero.");

输出

The number is positive.

更多关于决策​

在某些情况下，三元运算符可以替换if...else语句。要了解更多，请访问 JavaScript 三元运算符。

如果您需要根据给定的测试条件在多个选项之间做出选择，可以使用switch语句。要了解更多，请访问 JavaScript switch。

最后于 更新