Articles
JavaScript简介
JavaScript 中的条件分支

JavaScript 中的条件分支

本文解释了 JavaScript 中的条件分支。

YouTube Video

JavaScript 中的 if 语句

基本语法 

1if (condition) {
2    // Code that executes if the condition is true
3}

if 语句是 JavaScript 中的一个基本控制结构，用于根据特定条件是否为真来控制代码执行。如果条件为真，则执行代码块；如果为假，则跳过。

示例 

1let x = 10;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5}

在此示例中，由于 x 的值大于 5，因此控制台中显示 x is greater than 5。

else 语句

基本语法 

1if (condition) {
2    // Code that executes if the condition is true
3} else {
4    // Code that executes if the condition is false
5}

通过在 if 语句后使用 else 语句，可以指定条件为假时要执行的代码。

示例 

1let x = 3;
2
3if (x > 5) {
4    console.log("x is greater than 5");
5} else {
6    console.log("x is 5 or less");
7}

在这种情况下，由于 x 小于 5，因此显示 "x is 5 or less"。

else if 语句

基本语法 

1if (condition1) {
2    // Code that executes if condition1 is true
3} else if (condition2) {
4    // Code that executes if condition1 is false and condition2 is true
5} else {
6    // Code that executes if both condition1 and condition2 are false
7}

如果想检查多个条件，请使用 else if。如果最初的 if 为假，则检查下一个条件。

示例 

1let x = 5;
2
3if (x > 10) {
4    console.log("x is greater than 10");
5} else if (x === 5) {
6    console.log("x is 5");
7} else {
8    console.log("x is 5 or less");
9}

在这种情况下，由于 x 为 5，因此显示 "x is 5"。

三元运算符（条件运算符）

语法 

1condition ? valueIfTrue : valueIfFalse

如果想更简洁地编写 if 语句，可以使用三元运算符。

示例 

1const number = 7;
2const result = number % 2 === 0 ? "Even" : "Odd";
3console.log(result); // "Odd"

在这种情况下，由于 number 是 7，因此显示 Odd。

总结

  • if 语句根据条件是真还是假来控制哪些代码被执行。
  • 通过使用 else，可以指定条件为假时的行为。
  • 可以使用 else if 检查多个条件。
  • 也可以使用三元运算符简洁地编写条件分支。

JavaScript 中的 switch 语句

基本语法 

 1switch (expression) {
 2    case value1:
 3        // Code that executes if the expression matches value1
 4        break;
 5    case value2:
 6        // Code that executes if the expression matches value2
 7        break;
 8    default:
 9        // Code that executes if no cases match
10}

JavaScript 中的 switch 语句用于将一个表达式（通常是变量）与多个值（情况）进行比较并执行相应的代码。与 if 语句类似，它执行条件分支，但在有多个条件时通常更具可读性。

示例 

 1let fruit = "apple";
 2
 3switch (fruit) {
 4    case "apple":
 5        console.log("This is an apple");
 6        break;
 7    case "banana":
 8        console.log("This is a banana");
 9        break;
10    default:
11        console.log("Unknown fruit");
12}

在此示例中，由于 fruit 是 "apple"，因此在控制台中显示 "This is an apple"。

break の役割

通过在每个 case 的末尾插入 break，在完成该 case 后可以退出 switch 语句。如果没有编写 break，则下一个 case 也将被执行（这称为 fall-through（贯穿））。

Fall-Through 示例 

 1let color = "red";
 2
 3switch (color) {
 4    case "red":
 5        console.log("This is red");
 6    case "blue":
 7        console.log("This is blue");
 8    default:
 9        console.log("Unknown color");
10}

在此示例中，由于 color 是 "red"，并且 "This is red" 后没有 break，所以 "This is blue" 和 "Unknown color" 也会被显示。

使用 default

default 是当没有任何 case 匹配时执行的部分。这相当于 if 语句中的 else。

 1let animal = "dog";
 2
 3switch (animal) {
 4    case "cat":
 5        console.log("This is a cat");
 6        break;
 7    case "bird":
 8        console.log("This is a bird");
 9        break;
10    default:
11        console.log("Unknown animal");
12}

在此示例中，由于 animal 是 "dog"，它匹配到 default，因此显示 "Unknown animal"。

使用相同 case 处理多个值

如果需要为多个 case 执行相同的操作，可以将它们连续编写。

示例 

 1let day = 1;
 2switch (day) {
 3    case 1:
 4    case 2:
 5    case 3:
 6    case 4:
 7    case 5:
 8        console.log("Weekday");
 9        break;
10    case 6:
11    case 7:
12        console.log("Weekend");
13        break;
14    default:
15        console.log("Unknown day");
16}

在此示例中，如果 day 是 1，则显示 "Weekday"。

switch vs. if

  • if 语句适用于检查复杂条件或范围。例如，像变量 x 大于等于 10 且小于等于 20 这样的复杂条件无法在 switch 中编写。
  • 当需要检查值是否匹配特定值时，switch 语句有时可以使代码更具可读性。

总结

  • switch 语句用于简明地编写针对多个值的条件分支。
  • 如果您在每个case的末尾不使用break，下一个case可能也会被执行（贯穿）。
  • 当没有任何 case 匹配时，会执行 default。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

JavaScript中的可变和不可变JavaScript条件语句的最佳实践