JavaScript 中的流程控制语句详解

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 508 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

流程控制语句是编程语言中用于控制程序执行流程的结构。JavaScript 提供了多种流程控制语句，可以分为以下几类：

1. 条件语句

1.1 if 语句

最基本的条件判断结构：

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

1.2 if...else 语句

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

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

多条件判断：

if (condition1) {
    // 当condition1为真时执行
} else if (condition2) {
    // 当condition2为真时执行
} else {
    // 当所有条件都为假时执行
}

1.4 三元运算符 (?:)

简洁的条件表达式：

let result = condition ? value1 : value2;

1.5 switch 语句

多分支选择结构：

switch (expression) {
    case value1:
        // 当expression等于value1时执行
        break;
    case value2:
        // 当expression等于value2时执行
        break;
    default:
        // 当没有匹配的case时执行
}

注意：每个case后面通常需要加break，否则会继续执行下一个case（称为"fall-through"）。

2. 循环语句

2.1 for 循环

for (initialization; condition; finalExpression) {
    // 循环体
}

示例：

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

2.2 while 循环

先判断条件，再执行循环体：

while (condition) {
    // 循环体
}

2.3 do...while 循环

先执行一次循环体，再判断条件：

do {
    // 循环体
} while (condition);

2.4 for...in 循环

遍历对象的可枚举属性：

for (let key in object) {
    // 使用object[key]访问属性值
}

2.5 for...of 循环 (ES6)

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

for (let value of iterable) {
    // 使用value
}

3. 跳转语句

3.1 break 语句

立即退出循环或switch语句：

while (true) {
    if (someCondition) {
        break; // 退出循环
    }
}

3.2 continue 语句

跳过当前循环迭代，进入下一次迭代：

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue; // 跳过偶数
    }
    console.log(i); // 只打印奇数
}

3.3 return 语句

从函数中返回值并退出函数：

function sum(a, b) {
    return a + b;
}

3.4 throw 语句

抛出异常：

if (errorCondition) {
    throw new Error('Something went wrong');
}

3.5 try...catch...finally 语句

异常处理：

try {
    // 可能出错的代码
} catch (error) {
    // 出错时执行的代码
    console.error(error);
} finally {
    // 无论是否出错都会执行的代码
}

4. 标签语句

可以与break和continue配合使用，用于跳出多层循环：

outerLoop: for (let i = 0; i < 3; i++) {
    innerLoop: for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerLoop; // 直接跳出外层循环
        }
        console.log(`i=${i}, j=${j}`);
    }
}

5. 现代JavaScript中的流程控制

5.1 可选链操作符 (?. - ES2020)

安全访问嵌套属性：

const street = user?.address?.street;

5.2 空值合并运算符 (?? - ES2020)

提供默认值：

const value = input ?? 'default';

5.3 逻辑赋值运算符 (ES2021)

// 逻辑或赋值
a ||= b; // 等同于 a = a || b

// 逻辑与赋值
a &&= b; // 等同于 a = a && b

// 空值合并赋值
a ??= b; // 等同于 a = a ?? b

最佳实践

对于简单的条件判断，优先使用三元运算符而不是if...else
遍历数组时优先使用for...of而不是for...in
避免过深的嵌套，可以使用早期返回(early return)来简化代码
在switch语句中不要忘记break
使用可选链和空值合并运算符简化代码

掌握这些流程控制语句是编写高效、可读性强的JavaScript代码的基础。