本文详细介绍了JS流程控制的基本概念和重要性，涵盖了条件语句、循环语句以及跳转语句的使用方法。通过丰富的示例代码，解释了如何在实际项目中应用JS流程控制，使得程序更加灵活和高效。文中还提供了多个练习题帮助读者巩固所学知识。

什么是JS流程控制

JavaScript 流程控制是指在程序执行过程中，通过条件判断、循环操作和跳转指令来控制代码的执行流程。流程控制可以灵活地调整程序的执行顺序、循环次数以及跳转到特定的代码块，使程序逻辑更加复杂和高效。

流程控制的重要性

流程控制是编写复杂逻辑所必须的工具，它能够使代码更简洁、易读和可维护。通过适当的流程控制，可以优化程序性能，避免不必要的计算和重复工作，提高程序的效率。此外，流程控制还能够帮助开发者处理各种复杂的业务场景，使得程序更加灵活，能够适应不同的输入和环境变化。

if语句详解

if 语句是 JavaScript 中最常用的条件语句之一，用于根据条件的真假执行不同的代码块。其基本语法如下：

if (条件表达式) {
    // 如果条件为真，则执行这里的代码
}

if 语句可以根据多个条件进行分层判断，可以使用 else 和 else if 来扩展条件判断的复杂性。

基本用法

let age = 25;

if (age >= 18) {
    console.log("成年人");
} else {
    console.log("未成年人");
}

在这个例子中，程序会根据 age 的值判断是否为成年人。

else if 用法

let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 75) {
    console.log("良好");
} else {
    console.log("不及格");
}

在这个例子中，程序会根据分数判断其等级。

switch语句详解

switch 语句用于根据不同的条件值来执行不同的代码块。其基本语法如下：

switch (表达式) {
    case 值1:
        // 当表达式的值等于值1时执行这里的代码
        break;
    case 值2:
        // 当表达式的值等于值2时执行这里的代码
        break;
    ...
    default:
        // 当表达式的值不等于任何case时执行这里的代码
}

switch 语句的每个 case 会执行其对应的代码块，直到遇到 break 语句跳出循环，或者执行完所有 case 之后执行 default 代码块。

基本用法

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("星期一");
        break;
    case "Tuesday":
        console.log("星期二");
        break;
    default:
        console.log("其他日子");
}

在这个例子中，程序会根据 day 的值输出相应的星期。

示例代码

let fruit = "banana";

switch (fruit) {
    case "apple":
        console.log("苹果");
        break;
    case "banana":
        console.log("香蕉");
        break;
    default:
        console.log("其他水果");
}

在这个例子中，程序会根据 fruit 的值输出相应的水果名称。

for循环详解

for 循环用于重复执行一段代码，直到循环条件不再成立。其基本语法如下：

for (初始化; 循环条件; 更新) {
    // 循环体
}

for 循环通常用于已知循环次数的场景，也可以用于遍历数组或对象。

基本用法

for (let i = 0; i < 5; i++) {
    console.log(i);
}

这段代码会输出数字 0 到 4。

用for循环遍历数组

let fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

这段代码会遍历 fruits 数组，并输出每个元素。

while循环详解

while 循环用于在条件为真的情况下重复执行一段代码。其基本语法如下：

while (条件表达式) {
    // 循环体
}

while 循环通常用于未知循环次数的场景，或者需要动态改变循环条件的场景。

基本用法

let i = 0;

while (i < 5) {
    console.log(i);
    i++;
}

这段代码会输出数字 0 到 4。

do...while循环详解

do...while 循环用于在条件为真的情况下重复执行一段代码，与 while 相比，do...while 循环会在至少执行一次循环体之后再检查循环条件。其基本语法如下：

do {
    // 循环体
} while (条件表达式);

do...while 循环用于确保循环体至少执行一次，即使初始条件不满足也会执行一次。

基本用法

let i = 0;

do {
    console.log(i);
    i++;
} while (i < 5);

这段代码会输出数字 0 到 4。

示例代码

let sum = 0;
let i = 1;

for (; i <= 10; i++) {
    sum += i;
}
console.log("1到10的和为：" + sum);

这段代码会计算从 1 到 10 的整数之和。

break语句

break 语句用于立即退出循环或 switch 语句，提前结束当前循环或 switch 语句的执行。其基本语法如下：

break;

break 语句通常用于在满足特定条件时提前退出循环，以节省不必要的计算。

基本用法

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

这段代码会在输出数字 0 到 4 后，由于 i 等于 5 时触发 break 语句而终止循环，不会输出数字 5 及以后的数字。

continue语句

continue 语句用于跳过当前循环的剩余部分，直接进入下一次循环。其基本语法如下：

continue;

continue 语句通常用于在满足特定条件时跳过某些循环迭代，以简化循环逻辑。

基本用法

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

这段代码会跳过所有偶数，只输出奇数。

示例代码

for (let i = 0; i < 10; i++) {
    if (i < 5) {
        continue;
    }
    console.log(i);
}

这段代码会在 i 小于 5 时直接跳过，所以只会输出数字 5 到 9。

用户权限控制示例

在实际项目中，可以使用条件语句来判断用户的权限等级，以便允许或禁止其执行某些操作。例如，用户角色可以通过条件语句来控制权限：

let userRole = "admin"; // 用户角色

if (userRole === "admin") {
    console.log("管理员权限");
} else if (userRole === "moderator") {
    console.log("审核员权限");
} else {
    console.log("普通用户权限");
}

这段代码会根据用户的角色输出相应的权限信息。

计算购物车总价示例

在电商网站中，可以使用循环语句来处理购物车中的商品列表，计算总价。例如，遍历购物车中的商品列表，计算总价格：

let cart = [
    { name: "T-shirt", price: 10 },
    { name: "Jeans", price: 30 },
    { name: "Shoes", price: 50 }
];

let total = 0;

for (let item of cart) {
    total += item.price;
}

console.log("购物车总价：" + total);

这段代码会遍历购物车中的商品列表，计算总价格。

查找第一个偶数示例

查找列表中第一个偶数并输出其索引：

let numbers = [1, 3, 5, 2, 7, 8];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        console.log("第一个偶数的索引为：" + i);
        break;
    }
}

这段代码会查找列表中第一个偶数，并输出其索引。

本章知识点总结

本章介绍了 JavaScript 中常用的流程控制机制，包括条件语句（if 和 switch）、循环语句（for、while 和 do...while），以及跳转语句（break 和 continue）。通过这些机制，可以实现复杂的逻辑判断和循环操作，使得程序更加灵活和高效。

练习题与解答

练习1

编写一个程序，从用户输入中判断一个数字是否为偶数。

let number = parseInt(prompt("请输入一个数字"));
if (number % 2 === 0) {
    console.log("偶数");
} else {
    console.log("奇数");
}

这段代码会根据用户输入的数字判断其是否为偶数。

练习2

编写一个程序，计算一个列表中所有数字的平均值。

let numbers = [10, 20, 30, 40];

let sum = 0;

for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

let average = sum / numbers.length;

console.log("平均值为：" + average);

这段代码会计算列表中所有数字的平均值。

练习3

编写一个程序，查找列表中第一个偶数，并输出其索引。

let numbers = [1, 3, 5, 2, 7, 8];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        console.log("第一个偶数的索引为：" + i);
        break;
    }
}

这段代码会查找列表中第一个偶数，并输出其索引。