介绍
在本实验中,你将深入探索 JavaScript 中的条件分支世界,学习如何通过不同的技术做出决策并控制程序流程。实验涵盖了关键概念,如单分支 if
语句、if...else
逻辑、多条件语句以及 switch
语句,并通过实际操作让你体验不同的条件结构。
通过实际的编程练习,你将熟练掌握如何实现条件逻辑,比较不同的分支技术,并理解如何为特定的编程场景选择最合适的方法。通过逐步完成涉及年龄验证、成绩评估和案例处理的示例,你将打下扎实的 JavaScript 条件编程基础。
在本实验中,你将深入探索 JavaScript 中的条件分支世界,学习如何通过不同的技术做出决策并控制程序流程。实验涵盖了关键概念,如单分支 if
语句、if...else
逻辑、多条件语句以及 switch
语句,并通过实际操作让你体验不同的条件结构。
通过实际的编程练习,你将熟练掌握如何实现条件逻辑,比较不同的分支技术,并理解如何为特定的编程场景选择最合适的方法。通过逐步完成涉及年龄验证、成绩评估和案例处理的示例,你将打下扎实的 JavaScript 条件编程基础。
在这一步中,你将学习 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),运行脚本时不会打印任何内容。
在这一步中,你将学习 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
如何与布尔条件一起工作。
在这一步中,你将学习如何在 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
处理具有不同结果的多个条件。
在这一步中,你将学习 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
语句之间的关键区别,并了解何时使用每种方法。
打开 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)
需要记住的关键区别:
if
语句更灵活,可以处理复杂条件switch
语句最适合精确值匹配if
可以比较不同类型并使用复杂的逻辑运算符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 编程中的语法和实际应用。