前端基础之JavaScript流程控制

合集 - 前端炒米粉(25)

1.前端基础之前端知识引入2024-03-182.前端基础之HTTP协议介绍2024-03-183.前端基础之HTML基础2024-03-184.前端基础之HTML进阶2024-03-185.前端基础之CSS基础2024-03-196.前端基础之CSS选择器2024-03-197.前端基础之CSS基本属性2024-03-198.前端基础之CSS浮动和定位方式2024-03-199.CSS小练习2024-03-1910.前端基础之JavaScript引入2024-03-1911.前端基础之JavaScript的数据类型2024-03-1912.前端基础之JavaScript数组2024-03-2113.前端基础之JavaScript运算符2024-03-21

14.前端基础之JavaScript流程控制2024-03-21

15.前端基础之JavaScript函数2024-03-2116.前端基础之JavaScript对象2024-03-2117.前端基础之JavaScriptDOM和BOM2024-03-2118.前端基础之原生js事件绑定案例2024-03-2119.前端基础之jQuery引入2024-03-2320.前端基础之jQuery基础2024-03-2321.前端基础之jQuery进阶2024-03-2322.前端基础之jQuery事件2024-03-2323.前端基础之jQuery重要补充2024-03-2324.前端框架之Bootstrap2024-03-2425.前端补充：url编码2024-04-09

收起

一、if判断

在 JavaScript 中，if 语句是一种常见的条件语句，用于根据条件执行不同的代码块。除了基本的 if 语句外，还有 if...else、if...else if...else 等变体，用于处理多个条件的情况。

1. if 语句

if 语句用于在条件为真时执行特定的代码块。

语法：

if (condition) {
    // 当条件为真时执行的代码
}

2. if...else 语句

if...else 语句用于在条件为真时执行一个代码块，否则执行另一个代码块。

语法：

if (condition) {
    // 当条件为真时执行的代码
} else {
    // 当条件为假时执行的代码
}

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

if...else if...else 语句用于处理多个条件的情况，根据不同的条件执行不同的代码块。

语法：

if (condition1) {
    // 当条件1为真时执行的代码
} else if (condition2) {
    // 当条件2为真时执行的代码
} else {
    // 当所有条件都不为真时执行的代码
}

示例：

let num = 10;
 
if (num > 0) {
    console.log("Number is positive");
} else if (num < 0) {
    console.log("Number is negative");
} else {
    console.log("Number is zero");
}

在上面的示例中，根据 num 的值，会执行不同的代码块输出不同的结果。

二、循环语句

在 JavaScript 中，有几种常见的循环语句，包括 for 循环、while 循环、do...while 循环。下面详细解释这些循环语句的用法：

1. for 循环

for 循环用于重复执行特定代码块，通常在已知循环次数或需要迭代数组等情况下使用。

语法：

for (initialization; condition; increment) {
    // 在条件为真时执行的代码
}

• initialization：在循环开始前执行的表达式，一般用于初始化计数器。
• condition：在每次循环迭代前检查的条件，如果为 true，则继续循环；如果为 false，循环结束。
• increment：在每次循环迭代之后执行的表达式，一般用于递增或递减计数器。

2. while 循环

while 循环在每次迭代之前检查条件，只有在条件为真时才执行循环体内的代码。

语法：

while (condition) {
    // 在条件为真时执行的代码
}

• condition：在每次循环迭代前检查的条件，如果为 true，则继续循环；如果为 false，循环结束。

3. do...while 循环

do...while 循环先执行循环体内的代码，然后检查条件，只有在条件为真时才继续执行下一次循环。

语法：

do {
    // 先执行一次，然后在条件为真时重复执行的代码
} while (condition);

• condition：在每次循环迭代前检查的条件，如果为 true，则继续循环；如果为 false，循环结束。

示例：

// for 循环示例
for (let i = 0; i < 5; i++) {
    console.log(i);
}
 
// while 循环示例
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}
 
// do...while 循环示例
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

这些循环语句在 JavaScript 中用于不同的情况，根据具体需求选择合适的循环结构来实现所需的逻辑。

三、switch - case

在 JavaScript 中，switch 语句提供了一种根据不同条件执行不同代码块的方式。switch 语句通常用于替代多个连续的 if...else if...else 语句，使代码更简洁易读。

switch 语句的语法

switch (expression) {
    case value1:
        // 当 expression 等于 value1 时执行的代码
        break;
    case value2:
        // 当 expression 等于 value2 时执行的代码
        break;
    // 可以有更多的 case
    default:
        // 如果 expression 不等于任何 case 中的值时执行的代码
}

• expression 是需要进行比较的表达式或值。
• 每个 case 后面跟着一个值（value1, value2 等），表示 expression 可能的取值。
• break 语句用于退出 switch 语句，防止继续执行后续的 case。
• default 关键字用于指定当 expression 不匹配任何 case 时要执行的代码块。default 是可选的。

示例：

let day = 3;
let dayName;
 
switch (day) {
    case 1:
        dayName = "Monday";
        break;
    case 2:
        dayName = "Tuesday";
        break;
    case 3:
        dayName = "Wednesday";
        break;
    case 4:
        dayName = "Thursday";
        break;
    case 5:
        dayName = "Friday";
        break;
    default:
        dayName = "Weekend";
}
 
console.log(dayName); // 输出: Wednesday

在上面的示例中，根据 day 的值，switch 语句会匹配相应的 case，执行对应的代码块。

switch 语句在需要根据一个表达式的值来执行不同代码块时非常有用，尤其是当有多个条件需要处理时。但需要注意，每个 case 后面都需要加上 break，否则会继续执行下一个 case 直到遇到 break 或者结束。

四、 跳转语句

（1）break 语句

用于跳出循环或 switch 语句。

（2）continue 语句

用于跳过当前循环中的剩余代码，进入下一次循环。

（3）return 语句

用于从函数中返回一个值。

五、 其他控制语句

（1）try...catch 语句

用于捕获和处理异常。

（2）throw 语句

用于抛出一个异常。

（3）finally 语句

无论是否发生异常，都会执行的代码块。