前端javascript基础学习篇四（流程控制）

目录

1、流程控制

2、顺序流程控制

3、分支流程控制if语句

4、分支流程控制switch语句

5、三元表达式

---

1、流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

流程控制的三种结构：顺序结构，分支结构，循环结构

---

2、顺序流程控制

顺序流程控制是编程中最基本的控制结构，也是程序代码的默认执行方式。在顺序流程控制中，代码按照其在源文件中的顺序从上到下逐行执行。没有任何条件判断、循环或跳转语句会改变这种顺序。每个语句都在前一个语句执行完毕后才会执行。

顺序流程控制的基本概念

1. 按顺序执行：代码从上到下逐行执行，没有任何中断或跳转。
2. 顺序性：每个语句在前一个语句执行完毕后执行。
3. 无条件执行：所有语句都会被执行，没有条件判断来决定是否执行某些语句。

示例

示例1：简单的打印

console.log("Step 1: Start"); // 第一步，打印“Step 1: 

Start” console.log("Step 2: Process"); // 第二步，打印“Step 2: Process” 

console.log("Step 3: End"); // 第三步，打印“Step 3: End”

执行顺序：

1. 打印“Step 1: Start”
2. 打印“Step 2: Process”
3. 打印“Step 3: End”

示例2：变量赋值和计算

let a = 5; // 第一步，赋值 a 为 5 

let b = 10; // 第二步，赋值 b 为 10 

let sum = a + b; // 第三步，计算 a 和 b 的和，并赋值给 

sum console.log(sum); // 第四步，打印 sum 的值（15）

执行顺序：

1. 变量 a 被赋值为 5。
2. 变量 b 被赋值为 10。
3. 计算 a + b 的结果，并将其赋值给 sum。
4. 打印 sum 的值。

在实际应用中，顺序流程控制经常与条件判断和循环结构相结合，但其基础仍然是顺序执行。例如，在表单验证、数据处理和页面加载等任务中，顺序执行是非常常见的。

示例3：表单验证中的顺序流程

function validateForm() { 

       let username = document.getElementById("username").value; 
       
       let password = document.getElementById("password").value; 

       if (username === "") {
 
             console.log("Username is required."); // 检查用户名是否为空 return false; 
       
       } if (password === "") { 

             console.log("Password is required."); // 检查密码是否为空 return false; 
      
       } 

       console.log("Form is valid."); // 如果所有验证通过，打印

       “Form is valid” return true; 

       } 

执行顺序：

1. 获取用户名和密码的值。
2. 检查用户名是否为空，如果为空，打印错误消息并返回 false。
3. 检查密码是否为空，如果为空，打印错误消息并返回 false。
4. 如果所有验证通过，打印“Form is valid”并返回 true。

总结

顺序流程控制是编程中最基础和最重要的控制结构之一。它确保代码按照编写的顺序逐行执行，是理解和编写更复杂控制结构（如条件判断和循环）的基础。在实际应用中，尽管条件判断和循环结构增加了程序的复杂性，但顺序流程控制仍然是代码执行的默认方式。

---

3、分支流程控制if语句

if 分支语句是编程中最常见的控制结构之一，用于根据条件判断来决定代码的执行路径。在前端开发中，if 分支语句在控制应用逻辑方面起着至关重要的作用。

if 语句

if 语句根据一个布尔表达式的结果来执行一个代码块。如果表达式的结果为 true，则执行代码块；否则，跳过该代码块。

if (condition) { // 当 condition 为 true 时执行 }

if...else 语句

if...else 语句用于在条件为 false 时执行另一代码块。

if (condition) { 

        // 当 condition 为 true 时执行 

    } else { 

        // 当 condition 为 false 时执行 

    }

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

if...else if...else 语句用于测试多个条件。条件按顺序进行测试，直到找到第一个为 true 的条件。若所有条件都为 false，则执行 else 块。

if (condition1) {

        // 当 condition1 为 true 时执

     } else if (condition2) {

        // 当 condition1 为 false 且 condition2 为 true 时执行

     } else { 

        // 当 condition1 和 condition2 都为 false 时执行 
     }

示例1：简单 if 语句

let score = 85; 

if (score >= 60) { 

    console.log("You passed the exam.");

 }

如果 score 大于或等于 60，打印 “You passed the exam.”。

示例2：if...else 语句

let score = 55; 

if (score >= 60) { 

        console.log("You passed the exam."); 

    } else { 

        console.log("You failed the exam.");
    
    }

如果 score 小于 60，打印 “You failed the exam.”。

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

let score = 75; 

if (score >= 90) { 

        console.log("Grade: A"); 

    } else if (score >= 80) { 

        console.log("Grade: B"); 

    } else if (score >= 70) { 

        console.log("Grade: C"); 

    } else if (score >= 60) { 

        console.log("Grade: D"); 

    } else { 

        console.log("Grade: F"); 

    }

根据 score 的值打印对应的成绩等级。

示例4：嵌套 if 语句

let score = 85; 

let attendance = 90; 

if (score >= 60) { 

    if (attendance >= 75) { 

            console.log("You passed the exam with good attendance."); 

        } else { 

            console.log("You passed the exam but with poor attendance."); 

        } 

    } else { 

        console.log("You failed the exam."); 

        }

嵌套的 if 语句根据 score 和 attendance 的值打印不同的信息。

实际应用

表单验证示例

在前端开发中，if 分支语句常用于表单验证。例如，检查用户输入是否有效：

function validateForm() { 

let username = document.getElementById("username").value; 

let password = document.getElementById("password").value; 

if (username === "") { 

        alert("Username is required."); return false; 

} 
if (password === "") { 

        alert("Password is required."); return false; 

} 
if (password.length < 6) { 
    
        alert("Password must be at least 6 characters long."); 

        return false; 
}

    return true; // 如果所有验证通过，表单提交成功 
}

---

4、分支流程控制switch语句

switch 语句是一种多分支选择结构，用于根据一个表达式的值执行多个代码块中的一个。相比于多重的 if...else if 语句，switch 语句在处理多重条件判断时更加简洁和易读。

基本语法

switch (expression) { 

        case value1: // 当 expression === value1 时执行 

        break; 

        case value2: // 当 expression === value2 时执行 

        break; // 可以有任意多个 case 语句 

        default: // 当 expression 不等于任何已测试的值时执行 
    }

关键点

• expression：一个会被计算并与每个 case 的值进行比较的表达式。
• case：每个 case 语句后的值会与 expression 进行比较，如果匹配，执行对应代码块。
• break：用于跳出 switch 语句。如果没有 break，程序会继续执行后续的 case 语句（称为“贯穿”）。
• default：可选的代码块，在没有匹配的 case 时执行。

示例

示例1：简单的 switch 语句

let fruit = "apple"; 

switch (fruit) { 

        case "banana": console.log("Banana is selected."); 

        break; 

        case "apple": console.log("Apple is selected."); 

        break; 
    
        case "orange": console.log("Orange is selected."); 

        break; 

        default: console.log("Unknown fruit."); 

    }

输出：Apple is selected.

示例2：带有 default 的 switch 语句

let score = 85; 

switch (true) { 

case (score >= 90): console.log("Grade: A"); 

break; 

case (score >= 80): console.log("Grade: B"); 

break; 

case (score >= 70): console.log("Grade: C"); 

break; 

case (score >= 60): console.log("Grade: D"); 

break; 

default: console.log("Grade: F"); }

输出：Grade: B

示例3：无 break 的情况（贯穿现象）

let day = 3; 

switch (day) { 

    case 1: console.log("Monday"); 

    case 2: console.log("Tuesday"); 

    case 3: console.log("Wednesday"); 

    case 4: console.log("Thursday"); 
    
    case 5: console.log("Friday"); 

    default: console.log("Weekend"); 

}

//输出 Wednesday Thursday Friday Weekend

由于缺少 break 语句，从匹配的 case 开始，后续的所有 case 和 default 块都被执行。

示例4：使用字符串作为 case 值

let command = "start"; switch (command) { 

    case "start": console.log("Starting the machine..."); 

    break; 

    case "stop": console.log("Stopping the machine..."); 

    break; 

    case "reset": console.log("Resetting the machine..."); 

    break; 

    default: console.log("Unknown command."); 

}

输出：Starting the machine...

实际应用

菜单选项示例

在前端开发中，switch 语句常用于处理菜单选项或命令输入。例如：

function handleMenu(option) { 

switch (option) { 

    case 1: console.log("Home selected"); 

    break; 

    case 2: console.log("Profile selected"); 

    break; 

    case 3: console.log("Settings selected"); 

    break; 

    case 4: console.log("Logout selected"); 
    
    break; 
        
    default: console.log("Invalid option"); 

    } 

} // 示例调用 handleMenu(3); // 输出：Settings selected

总结

switch 语句是处理多重条件判断的一种高效方式，尤其在处理多个值时比多重的 if...else if 更加清晰。通过合理使用 break 语句，可以避免不必要的代码执行。switch 语句在实际开发中广泛应用于处理菜单选项、命令输入以及其他需要多条件判断的场景。

---

5、三元表达式

一种简洁的条件判断语句，它是一种基于条件的运算符。与 if...else 语句类似，三元表达式根据一个条件表达式的布尔值来决定执行哪个值或表达式。

语法

condition ? expr1 : expr2

• condition：一个计算结果为 true 或 false 的布尔表达式。
• expr1：当条件为 true 时返回或执行的表达式。
• expr2：当条件为 false 时返回或执行的表达式。

示例

示例1：基本用法

let age = 18; 

let canVote = (age >= 18) ? "Yes" : "No"; 

console.log(canVote); // 输出: "Yes"这里，age >= 18 为 true，因此返回 "Yes"。

示例2：嵌套三元表达式

嵌套三元表达式虽然可以使用，但为了可读性，不建议嵌套过多。

let score = 85; 

let grade = (score >= 90) ? 'A' : (score >= 80) ? 'B' : (score >= 70) ? 'C' : (score >= 60) ? 'D' : 'F'; 

console.log(grade); // 输出: "B"

根据 score 的值，返回对应的等级。

实际应用

示例3：简单的条件渲染

在前端开发中，三元表达式常用于 JSX 中的条件渲染：

const isLoggedIn = true; 

const message = isLoggedIn ? "Welcome back!" : "Please log in."; 

console.log(message); // 输出: "Welcome back!"

示例4：简化代码

三元表达式可以用来简化一些简单的 if...else 逻辑，使代码更简洁：

// 使用 if...else let userRole; 

if (isAdmin) { 

    userRole = "Admin"; 

    } else { 

    userRole = "User"; 

    } // 使用三元表达式 let userRole = isAdmin ? "Admin" : "User";

优缺点

优点

• 简洁性：相比 if...else 语句，三元表达式更短更简洁，适合简单的条件判断。
• 可读性：对于简单的条件判断，三元表达式使代码更具可读性和可维护性。

缺点

• 可读性降低：当嵌套或条件复杂时，三元表达式可能会使代码变得难以理解和维护。
• 局限性：适用于简单的条件判断，不适合复杂的逻辑处理。

总结

三元表达式是一种简洁的条件判断语句，适用于简单的条件逻辑。它可以使代码更加简洁和易读，但应避免嵌套或用于复杂的条件判断。在实际开发中，合理使用三元表达式可以提高代码的可读性和简洁性。