JavaScript流程控制语句详解

一、流程控制语句概述

流程控制语句是用来控制程序中语句执行顺序的语句，它们可以影响程序的流程，从而实现不同的逻辑。主要分为三类：

1. 顺序结构：代码按照书写的顺序从上到下依次执行
2. 选择结构：根据特定条件控制代码的执行路径
3. 循环结构：重复执行某段代码直到满足退出条件

此外还有跳转语句如break、continue和return等，它们可以改变正常的控制流程。

二、条件判断语句

1. if语句

语法：

if(条件表达式){
    // 语句...
}

执行流程：

• 先对条件表达式进行求值判断
• 如果值为true，则执行if后的语句
• 如果值为false，则不执行if后的语句

示例：

if(true) console.log('好好学习,天天向上');

var a = 20;
if(a > 10 && a <= 20){
    alert('a在10-20之间');
    alert("4567");
}

2. if...else语句

语法：

if(条件表达式){
    // 语句...
}else{
    // 语句...
}

执行流程：

• 先对if后的条件进行判断
• 如果值为true，则执行if后的语句
• 如果值为false，则执行else后的语句

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

语法：

if(条件表达式){
    // 语句...
}else if(条件表达式){
    // 语句...
}else{
    // 语句...
}

执行流程：

• 从上到下依次对条件表达式进行求值
• 如果值为true，则执行当前语句块
• 如果所有条件都不满足，则执行else语句块
• 只会有一个代码块被执行

示例：

var age = 16;
if(age >= 100){
    alert("您老高寿呀~~~");
}else if(age >= 80){
    alert("你也不小了");
}else if(age >= 60){
    alert("你刚退休呀~~~");
}else if(age >= 30){
    alert("你已经中年了");
}else if(age >= 17){
    alert("你刚成年呀~~~");
}else{
    alert("你还是个小孩子~");
}

三、条件分支语句（switch语句）

语法：

switch(条件表达式){
    case 表达式:
        // 语句...
        break;
    case 表达式:
        // 语句...
        break;
    default:
        // 语句...
        break;
}

执行流程：

1. 依次将case后的表达式的值和switch后的条件表达式的值进行全等比较
2. 如果比较结果为true，则从当前case处开始执行代码
3. break关键字确保只会执行当前case后的语句
4. 如果所有比较结果都为false，则执行default后的语句

示例：

var num = 2;
switch(num){
    case 1:
        console.log("壹");
        break;
    case 2:
        console.log("贰");
        break;
    case 3:
        console.log("叁叁");
        break;
    default:
        console.log("非法数字~~~");
        break;
}

注意：switch语句和if语句的功能可以互相实现，可根据习惯选择使用。

四、循环语句

1. while循环

语法：

while(条件表达式){
    // 语句...
}

执行流程：

1. 先对条件表达式进行求值判断
2. 如果值为true，则执行循环体
3. 循环体执行完毕后，继续对表达式进行判断
4. 如果值为false，则终止循环

2. do...while循环

语法：

do{
    // 语句...
}while(条件表达式);

执行流程：

1. 先执行循环体
2. 循环体执行完毕后，再对条件表达式进行判断
3. 如果结果为true，则继续执行
4. 如果结果为false，则停止执行

区别：

• while是先判断后执行
• do...while是先执行后判断
• do...while保证循环体至少执行一次

3. for循环

语法：

for(初始化表达式; 条件表达式; 更新表达式){
    // 语句...
}

执行流程：

1. 执行初始化表达式（只执行一次）
2. 判断条件表达式
   • 如果为true，则执行循环体
   • 如果为false，终止循环
3. 执行更新表达式
4. 重复步骤2-3

示例：

// 标准写法
for(var i = 0; i < 10; i++){
    alert(i);
}

// 省略写法
var i = 0;
for(; i < 10;){
    alert(i++);
}

// 死循环（慎用）
for(;;){
    alert("hello");
}

五、跳转语句

1. break语句

• 用于退出switch或循环语句
• 不能在if语句中使用
• 会立即终止离它最近的那个循环语句

2. continue语句

• 用于跳过当次循环
• 默认只会对离它最近的循环起作用

3. 终止指定循环

可以为循环语句创建label来标识当前循环，然后通过break label结束指定循环。

语法：

label: for(...){
    // 循环体
    break label;
}

示例：

// 普通break
for(var i = 0; i < 5; i++){
    console.log(i);
    if(i == 2){
        break; // 结束整个for循环
    }
}

// 嵌套循环中的break
for(var i = 0; i < 5; i++){
    console.log("@外层循环" + i);
    for(var j = 0; j < 5; j++){
        break; // 只会结束内层循环
        console.log("内层循环" + j);
    }
}

// 使用label终止指定循环
outer: for(var i = 0; i < 5; i++){
    console.log("@外层循环" + i);
    for(var j = 0; j < 5; j++){
        break outer; // 结束外层循环
        console.log("内层循环" + j);
    }
}

// continue示例
for(var i = 0; i < 5; i++){
    if(i == 2){
        continue; // 跳过i=2的这次循环
    }
    console.log(i);
}

总结

JavaScript的流程控制语句包括：

1. 条件判断语句：

   • if语句
   • if...else语句
   • if...else if...else语句

2. 条件分支语句：

   • switch...case语句

3. 循环语句：

   • while循环
   • do...while循环
   • for循环

4. 跳转语句：

   • break
   • continue
   • label标签

掌握这些流程控制语句是编写JavaScript程序的基础，它们可以组合使用来实现各种复杂的逻辑控制。