知识篇 -- JS流程控制

Ray Shine 2024/2/4 JavaScript基础知识

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在JavaScript编程中，流程控制语句是决定代码执行顺序的关键。它们允许我们根据特定条件执行不同的代码块，或者重复执行某段代码，从而实现复杂的程序逻辑。理解并熟练运用流程控制，是编写任何有意义的JavaScript程序的基石。

# 一、条件语句：根据条件选择执行路径选择

条件语句允许程序在满足特定条件时执行一段代码，否则执行另一段代码。

# 1. `if...else` 语句基础判断

最基本的条件判断语句，用于执行单次或多次条件判断。

基本 if：

let age = 20;
if (age >= 18) {
    console.log("你已成年。");
}

if...else：

let score = 75;
if (score >= 60) {
    console.log("及格！");
} else {
    console.log("不及格。");
}

if...else if...else (多重条件)：

let grade = 85;
if (grade >= 90) {
    console.log("优秀");
} else if (grade >= 80) {
    console.log("良好");
} else if (grade >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

注意：当 if 或 else 后面只有一条语句时，可以省略花括号 {}，但不推荐，容易引起歧义和错误。

# 2. `switch` 语句多分支选择

用于基于不同条件执行不同动作，通常用于处理多个固定值的条件判断，比多个 if...else if 更清晰。

语法：

switch (expression) {
    case value1:
        // 当 expression 等于 value1 时执行的代码
        break; // 结束当前case，跳出switch
    case value2:
        // 当 expression 等于 value2 时执行的代码
        break;
    default:
        // 当 expression 不等于任何一个case值时执行的代码
}

示例：

let day = new Date().getDay(); // 获取今天是星期几 (0-6, 0是星期天)
switch (day) {
    case 0:
        console.log("今天是星期天");
        break;
    case 1:
        console.log("今天是星期一");
        break;
    case 6:
        console.log("今天是星期六");
        break;
    default:
        console.log("今天是工作日");
}

注意：
- break 关键字非常重要，如果没有 break，代码会继续执行下一个 case 的内容（称为“穿透”或“fall-through”），直到遇到 break 或 switch 结束。
- default 是可选的，当所有 case 都不匹配时执行。

# 二、循环语句：重复执行代码块重复

循环语句允许我们重复执行一段代码，直到满足特定条件为止。

# 1. `for` 循环计数循环

最常用的循环语句，适用于已知循环次数或需要控制循环变量的场景。

语法：for (初始化; 条件; 更新) { // 循环体 }
- 初始化：在循环开始前执行一次，通常用于声明和初始化循环变量。
- 条件：在每次循环迭代前评估，如果为 true 则继续循环，否则终止。
- 更新：在每次循环迭代结束后执行，通常用于更新循环变量。

示例：

for (let i = 0; i < 5; i++) {
    console.log("当前数字是：" + i);
}
// 输出：0, 1, 2, 3, 4

遍历数组：

const fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
    console.log("我喜欢吃" + fruits[i]);
}

# 2. `while` 循环条件循环

适用于循环次数未知，只知道循环终止条件的场景。

语法：while (条件) { // 循环体 }
注意：必须确保循环条件最终会变为 false，否则会造成无限循环。

示例：

let count = 0;
while (count < 3) {
    console.log("计数：" + count);
    count++;
}
// 输出：0, 1, 2

# 3. `do...while` 循环至少执行一次

与 while 循环类似，但它会先执行一次循环体，然后再检查条件。

语法：do { // 循环体 } while (条件);
特点：至少会执行一次循环体。

示例：

let i = 0;
do {
    console.log("执行一次，i = " + i);
    i++;
} while (i < 0); // 条件为false，但循环体已执行一次
// 输出：执行一次，i = 0

# 4. `for...in` 循环遍历对象键

用于遍历对象的可枚举属性（包括原型链上的属性，但通常需要配合 hasOwnProperty 过滤）。

示例：

const person = { name: "Alice", age: 30 };
for (let key in person) {
    console.log(key + ": " + person[key]);
}
// 输出：name: Alice, age: 30

注意：不推荐用于遍历数组，因为会遍历到非数字属性，且顺序不保证。

# 5. `for...of` 循环 (ES6新增) 遍历可迭代对象

用于遍历可迭代对象（如数组、字符串、Map、Set等）的值。

示例：

const colors = ["红", "绿", "蓝"];
for (let color of colors) {
    console.log(color);
}
// 输出：红, 绿, 蓝

const str = "Hello";
for (let char of str) {
    console.log(char);
}
// 输出：H, e, l, l, o

优点：比 for 循环更简洁，比 for...in 更安全，是遍历数组和可迭代对象的推荐方式。

# 三、循环控制语句控制

用于在循环内部改变循环的正常执行流程。

# 1. `break` 终止循环

立即终止当前循环，并跳出循环体，继续执行循环后面的代码。

示例：

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // 当i等于5时，终止循环
    }
    console.log(i);
}
// 输出：0, 1, 2, 3, 4

# 2. `continue` 跳过本次

跳过当前循环的剩余部分，直接进入下一次循环迭代。

示例：

for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // 当i等于2时，跳过本次循环的console.log，直接进入下一次循环
    }
    console.log(i);
}
// 输出：0, 1, 3, 4

掌握JavaScript的流程控制语句，能够让你编写出具有判断、选择和重复执行能力的动态程序。

← 节流和防抖事件循环 →

一ξひβθ光 i