JavaScript流程控制语句详解：条件判断与循环结构实战

条件判断语句

条件语句用于根据特定条件的真假来执行不同的代码块。JavaScript主要提供if语句及其变体来实现逻辑分支。

第1步：基础单分支判断（if语句）

目的：在单一条件成立时执行指定操作。
语法入口：直接使用 if 关键字包裹布尔表达式。

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

参数说明：
- condition：被评估的条件表达式。如果结果为真（truthy），则执行花括号内的代码；否则跳过。

第2步：双分支选择（if...else语句）

目的：当条件成立时执行一组代码，不成立时执行另一组代码。
动作示例：

var skill = "HTML";
if (skill == "HTML") {
  document.write("面试成功！");
} else {
  document.write("很遗憾，不符合要求。");
}

完成状态：程序会确保进入且仅进入其中一个分支，保证逻辑的互斥性。

第3步：多重条件判断（if...else if...else）

目的：处理多个互斥的条件场景，按顺序匹配第一个成立的分支。
重要参数：需注意条件检查的顺序，通常将最严格或优先级最高的条件放在前面。

var age = 99;
if (age <= 44) {
  document.write("青年");
} else if (age <= 59) {
  document.write("中年人");
} else if (age <= 89) {
  document.write("老年人");
} else {
  document.write("长寿老人");
}

排错提示：若最后一个 else if 条件无法覆盖所有剩余情况，最后的 else 将作为默认兜底方案执行。

第4步：多值精确匹配（switch语句）

目的：当一个变量需要与多个固定值进行比对，且每个值对应不同执行逻辑时使用，代码结构更清晰。
入口：使用 switch(expression)。

var day = 3;
switch (day) {
  case 1:
  case 2:
    document.write("学习理论");
    break;
  case 3:
  case 4:
    document.write("企业实践");
    break;
  default:
    document.write("休息日");
}

关键细节：
1. case 后必须接 break 以防止“穿透”（即继续执行下一个 case 的代码）。
2. 多个 case 可以共用一段执行代码（如周一周二合并）。

循环结构语句

循环用于重复执行一段代码块，直到满足停止条件。

第5步：计数器循环（for语句）

目的：已知循环次数或迭代范围时使用，结构紧凑。
语法结构：for(初始化变量; 循环条件; 循环后更新)

// 取出盒子里的6个球
for (var i = 1; i <= 6; i++) {
  document.write("取出第" + i + "个球<br>");
}

完成状态：循环变量在每次迭代结束时自动更新，直至不满足条件退出。

第6步：前置条件循环（while语句）

目的：不确定具体循环次数，仅依赖某个条件是否持续成立。
注意：必须在循环体内手动更新条件变量，否则可能导致死循环。

var count = 0;
while (count < 6) {
  document.write("第" + (count + 1) + "次取出球<br>");
  count++; // 必须更新条件，防止死循环
}

第7步：后置条件循环（do...while语句）

目的：确保循环体至少执行一次，然后再检查条件。
差异点：while 是先判断后执行，do...while 是先执行后判断。

var n = 1;
do {
  document.write("输出数字:" + n + "<br>");
  n++;
} while (n <= 5);

循环控制与实战应用

在处理复杂数据或列表时，常需中断或跳过特定的迭代过程。

第8步：终止循环（break语句）

目的：无条件跳出当前所在的最内层循环，后续循环不再执行。
场景：搜索到目标元素或发现严重错误时立即退出。

var scores = [70, 80, 66, 50];
for (var i = 0; i < scores.length; i++) {
  if (scores[i] < 60) {
    document.write("发现不及格成绩: " + scores[i] + "，终止检查<br>");
    break; // 循环直接结束
  }
}

第9步：跳过本次迭代（continue语句）

目的：跳过本次循环剩余的代码，直接进入下一次循环的判断或迭代。
场景：过滤掉不符合条件的数据，但继续处理其他数据。

var data = ['小A','女', '小B','男'];
// 略过非女性记录，只打印女性姓名
for(var i=0; i

综合实例：多维数组筛选

以下示例展示了如何将条件判断与循环结合，从结构化数组中筛选出特定数据（大一女生）。

var infos = [
  ['小A','女',21,'大一'],
  ['小B','男',23,'大三'],
  ['小C','男',24,'大四']
  // ... 更多数据
];

// 第一层循环筛选年级
var freshmen = [];
for(var i=0; i<infos.length; i++){ 
  if(infos[i][3] == "大一") {
    freshmen.push(infos[i]);
  } 
}

// 第二层循环筛选性别
for(var j=0; j<freshmen.length; j++){ 
  if(freshmen[j][1] == '女'){
    document.write("入选名单: " + freshmen[j][0] + "<br>");
  }
}

以上就是JavaScript流程控制语句与循环结构的详细内容，更多关于JavaScript基础教程的资料请关注本站其它相关文章！