19. JavaScript 的流程控制 让代码“指哪儿打哪儿”

JavaScript 的流程控制 让“指哪儿打哪儿”

控制流 是编程中的一个 核心概念，指的是 程序执行时 的 流程控制。通过 控制流，我们可以决定 代码执行 的 顺序、条件 和 循环。

1 顺序控制（Sequential Control）

代码按照 书写顺序 逐行执行。

2 条件控制（Conditional Control）

允许我们根据某些 条件 决定执行 哪一部分代码。

if 语句

• if；
• if...else；
• if...else if... else。

三元运算符（简洁的 条件判断）

// 示例代码 1
let canVote = age >= 18 ? "可以投票" : "未达到投票年龄";

switch 语句

适用于 多个条件分支。

3 循环控制（Loop Control）

多次执行 一段代码。

• for 循环；
• while 循环；
• do...while 循环， 即使 条件是 false，也会 至少执行 一次代码。
• for...of 和 for...in
  • for...of：遍历 数组 或 可迭代对象；
  • for...in：遍历 对象的 键名。

4 跳出控制（Jump Control）

• break：跳出 当前循环；
• continue：跳过 当前循环 的 剩余部分，直接进入 下一次循环。
• return：用于 函数中，立即 终止 函数执行，并返回 一个值。

5 异常处理（Error Handling）

通过 try…catch 捕获 运行时错误，并处理它们。

// 示例代码 2
try {
    // 尝试执行的代码块
} catch (error) {
    // 当 try 块中的代码抛出异常时，执行这里的代码
    // error 是捕获的错误对象
} finally {
    // 无论是否发生异常，最终都会执行的代码（可选）
}

捕获具体异常

我们可以捕获并处理 特定类型 的 错误，比如 TypeError、ReferenceError 等。

// 示例代码 3
try {
    let user = null;
    console.log(user.name);  // 这里会抛出 TypeError
} catch (error) {
    if (error instanceof TypeError) {
        console.error("TypeError: 不能读取 null 的属性");
    } else {
        console.error("发生了其他错误:", error);
    }
    console.error("捕获到的错误信息:", error.message); // 输出错误信息
}

使用 finally 进行清理

finally 块中的代码 总是会执行，无论 try 块中 是否 发生异常，适合用于 资源清理 等操作。

// 示例代码 4
function fetchData() {
    let connection;
    try {
        connection = openConnection();  // 假设这是一个函数，用于建立连接
        // 执行一些可能抛出错误的操作
        let data = connection.getData();  // 假设这是从连接中获取数据
        return data;
    } catch (error) {
        console.error("获取数据时出错:", error);
    } finally {
        if (connection) {
            connection.close();  // 无论是否发生错误，最后都会关闭连接
            console.log("连接已关闭");
        }
    }
}

async/await 中的 try...catch

try...catch 也可以用在 异步操作 中，但它不会捕获 Promise 的错误，除非使用 async/await。

// 示例代码 5
async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("异步请求出错:", error);
    }
}

fetchData();