探索 JavaScript 中的条件分支

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,你将深入探索 JavaScript 中的条件分支世界,学习如何通过不同的技术做出决策并控制程序流程。实验涵盖了关键概念,如单分支 if 语句、if...else 逻辑、多条件语句以及 switch 语句,并通过实际操作让你体验不同的条件结构。

通过实际的编程练习,你将熟练掌握如何实现条件逻辑,比较不同的分支技术,并理解如何为特定的编程场景选择最合适的方法。通过逐步完成涉及年龄验证、成绩评估和案例处理的示例,你将打下扎实的 JavaScript 条件编程基础。

理解单分支 if 语句

在这一步中,你将学习 JavaScript 中的基本单分支 if 语句,它允许你根据特定条件有条件地执行代码。

首先,让我们创建一个 JavaScript 文件来探索单分支 if 语句。打开 WebIDE 并在 ~/project 目录下创建一个名为 conditional-basics.js 的新文件。

// 创建一个简单的年龄验证示例
let age = 18;

// 单分支 if 语句
if (age >= 18) {
  console.log("You are eligible to vote!");
}

在这个示例中,if 语句检查 age 是否大于或等于 18。如果条件为真,花括号 {} 内的代码块将被执行。

让我们运行脚本来查看输出:

node ~/project/conditional-basics.js

示例输出:

You are eligible to vote!

现在,让我们尝试另一个示例,演示当条件为假时 if 语句的工作原理:

// 修改之前的文件
let temperature = 15;

if (temperature < 10) {
  console.log("It's cold outside. Wear a jacket!");
}

在这种情况下,由于温度为 15(不小于 10),运行脚本时不会打印任何内容。

实现 if...else 条件逻辑

在这一步中,你将学习 JavaScript 中的 if...else 条件逻辑,它允许你根据条件是否为真来执行不同的代码块。

打开 WebIDE 并在 ~/project 目录下创建一个名为 conditional-else.js 的新文件。我们将创建一个简单的示例来演示 if...else 的工作原理:

// 创建一个简单的成绩评估示例
let score = 75;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

在这个示例中,if...else 语句检查 score 是否大于或等于 60。如果条件为真,则打印通过的消息;否则,打印未通过的消息。

让我们运行脚本来查看输出:

node ~/project/conditional-else.js

示例输出:

Congratulations! You passed the exam.

现在,让我们修改脚本,通过更改分数来演示 else 部分:

// 修改之前的文件
let score = 45;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

当你运行这个脚本时,你会看到不同的输出:

示例输出:

Sorry, you did not pass the exam.

让我们创建另一个示例,展示 if...else 如何与不同类型的条件一起使用:

// 向文件中添加另一个示例
let isRaining = true;

if (isRaining) {
  console.log("Take an umbrella with you.");
} else {
  console.log("Enjoy the sunny day!");
}

这个示例展示了 if...else 如何与布尔条件一起工作。

创建多条件 if...else if...else 语句

在这一步中,你将学习如何在 JavaScript 中使用 if...else if...else 语句处理多个条件,以应对更复杂的决策场景。

打开 WebIDE 并在 ~/project 目录下创建一个名为 multi-condition.js 的新文件:

// 创建一个成绩分类示例
let score = 85;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

在这个示例中,if...else if...else 语句依次检查多个条件。第一个评估为真的条件将执行其代码块,而其余条件将被跳过。

让我们运行脚本来查看输出:

node ~/project/multi-condition.js

示例输出:

Great job! You got a B grade.

现在,让我们修改分数以查看不同条件的工作原理:

// 尝试不同的分数场景
let score = 55;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

当你运行这个脚本时,你会看到不同的输出:

示例输出:

Sorry, you failed the exam.

让我们创建另一个示例,用不同的场景演示多条件逻辑:

// 天气条件示例
let temperature = 25;

if (temperature > 30) {
  console.log("It's very hot outside.");
} else if (temperature > 20) {
  console.log("The weather is warm and pleasant.");
} else if (temperature > 10) {
  console.log("It's a bit cool today.");
} else {
  console.log("It's cold outside.");
}

这个示例展示了如何使用 if...else if...else 处理具有不同结果的多个条件。

使用 Switch 语句处理多条件分支

在这一步中,你将学习 JavaScript 中的 switch 语句,它提供了一种替代方法来处理单个变量的多个条件。

打开 WebIDE 并在 ~/project 目录下创建一个名为 switch-statement.js 的新文件:

// 使用 switch 语句创建一个星期几的示例
let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

在这个示例中,switch 语句检查 day 的值。每个 case 代表一个特定的值,当值匹配时,执行相应的代码块。break 语句用于防止继续执行下一个 case

让我们运行脚本来查看输出:

node ~/project/switch-statement.js

示例输出:

Wednesday

现在,让我们创建另一个示例来演示 default 分支:

// 使用 switch 语句进行成绩分类
let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent performance!");
    break;
  case "B":
    console.log("Good job!");
    break;
  case "C":
    console.log("Satisfactory performance.");
    break;
  case "D":
    console.log("Needs improvement.");
    break;
  default:
    console.log("Invalid grade.");
}

当你运行这个脚本时,你会看到:

示例输出:

Good job!

让我们演示多个 case 如何共享同一个代码块:

// 使用 switch 语句检测周末
let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("It's the weekend!");
    break;
  default:
    console.log("It's a weekday.");
}

这个示例展示了如何处理多个 case 执行相同操作的情况。

比较并选择 if 和 Switch 语句

在这一步中,你将学习 if 语句和 switch 语句之间的关键区别,并了解何时使用每种方法。

打开 WebIDE 并在 ~/project 目录下创建一个名为 conditional-comparison.js 的新文件:

// 比较 if 和 switch 在不同场景下的使用

// 场景 1: 简单的相等性检查
let fruit = "apple";

// 使用 if 语句
if (fruit === "apple") {
  console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
  console.log("If Statement: It's a banana.");
} else {
  console.log("If Statement: Unknown fruit.");
}

// 使用 switch 语句
switch (fruit) {
  case "apple":
    console.log("Switch Statement: It's an apple.");
    break;
  case "banana":
    console.log("Switch Statement: It's a banana.");
    break;
  default:
    console.log("Switch Statement: Unknown fruit.");
}

// 场景 2: 复杂条件
let score = 85;

// if 语句更适合处理复杂条件
if (score >= 90 && score <= 100) {
  console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
  console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
  console.log("Satisfactory grade (C)");
} else {
  console.log("Needs improvement");
}

// Switch 不太适合基于范围或复杂条件的检查

让我们运行脚本来查看输出:

node ~/project/conditional-comparison.js

示例输出:

If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)

需要记住的关键区别:

  1. if 语句更灵活,可以处理复杂条件
  2. switch 语句最适合精确值匹配
  3. if 可以比较不同类型并使用复杂的逻辑运算符
  4. switch 仅限于严格的相等性检查

让我们创建一个最终示例来说明这些要点:

// 在 if 和 switch 之间选择

function recommendConditional(input) {
  // 使用 switch 进行简单的精确值匹配
  switch (input) {
    case "red":
    case "blue":
    case "green":
      console.log("Use switch for simple value checks");
      break;

    // 使用 if 处理更复杂的条件
    default:
      if (typeof input === "number" && input > 0 && input < 100) {
        console.log("Use if for range and type checking");
      } else {
        console.log("Complex conditions are better with if statements");
      }
  }
}

recommendConditional("blue");
recommendConditional(50);

总结

在本实验中,参与者探索了 JavaScript 中的条件分支技术,重点学习了不同类型的条件语句。实验从理解单分支 if 语句开始,演示了如何根据特定条件(如年龄验证和温度检查)执行代码。学习者练习了创建简单的条件逻辑,使得代码仅在指定条件为真时运行。

实验随后深入探讨了更高级的条件技术,包括用于处理双向分支的 if...else 语句、用于复杂决策的多条件 if...else if...else 语句,以及用于处理多场景的 switch 语句。参与者学习了如何比较不同的条件方法,理解了每种方法在 JavaScript 编程中的语法和实际应用。

您可能感兴趣的其他 CSS 教程