第二十天：让程序有逻辑 — 条件判断与循环
蜗牛往上爬 · 前端工业可视化学习笔记 第 20 篇
上周学了变量和类型，但程序还只是"直线执行"。今天学条件判断（if/switch）和循环（for/while）——让程序能"做选择"和"干重复的活"。工业场景里，温度分级告警就是 if/else，遍历设备列表就是 for 循环。
目录
一、if / else if / else
工业场景最典型的应用：温度分级告警。
/**
* 温度分级告警（工业场景常见）
* @param {number} temp 设备温度
*/
function checkTemperature(temp) {
if (temp >= 90) {
console.error("❌ 严重：温度 ≥ 90°C，立即停机检查");
} else if (temp >= 80) {
console.warn("⚠ 警告：温度 ≥ 80°C，接近阈值");
} else if (temp >= 60) {
console.log("ℹ 提示：温度偏高，持续监控");
} else {
console.log("✅ 正常：温度在安全范围");
}
}
checkTemperature(85); // ⚠ 警告
checkTemperature(45); // ✅ 正常
关键点：else if 从上到下依次判断，命中一个分支后，后面的不再执行。
二、三元运算符
// 语法：条件 ? 值1 : 值2
var temp = 85;
var level = temp >= 80 ? "高温" : "正常";
// 常用于简单赋值和模板输出
var isOnline = true;
var statusText = isOnline ? "在线" : "离线";
三元适合"二选一"的简单场景，复杂逻辑用 if/else，不要嵌套三元。
三、switch 与 break 穿透
/**
* 设备状态码转文字
*/
function getDeviceStatus(code) {
switch (code) {
case 0: return "离线";
case 1: return "待机";
case 2: return "运行中";
case 3: return "故障";
default: return "未知状态";
}
}
console.log(getDeviceStatus(2)); // "运行中"
console.log(getDeviceStatus(99)); // "未知状态"
switch 的坑：不写 break 会穿透
var code = 1;
switch (code) {
case 0:
console.log("离线");
case 1: // 命中
console.log("待机");
case 2: // 没有 break，继续执行！
console.log("运行中");
break;
}
// 输出：待机、运行中 ← 穿透了！
规则：每个 case 后要么
return，要么break。
四、for 循环
// 基本语法：for (初始化; 条件; 更新)
for (var i = 1; i <= 5; i++) {
console.log("第 " + i + " 次循环");
}
// ⭐ 遍历数组（最常用）
var devices = ["CNC-001", "AGV-002", "ARM-003"];
for (var i = 0; i < devices.length; i++) {
console.log("设备 " + (i + 1) + "：" + devices[i]);
}
// 累加求和：1 + 2 + ... + 100
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum); // 5050
五、while 与 do while
// while：先判断再执行（可能一次都不执行）
var i = 1;
while (i <= 5) {
console.log(i);
i++; // 千万别忘了更新，否则死循环！
}
// do while：先执行一次再判断（至少执行一次）
var j = 10;
do {
console.log("执行了");
j++;
} while (j <= 5); // 条件为 false，但已执行一次
// 实战：2 的 n 次方，直到超过 1000
var n = 1;
while (Math.pow(2, n) <= 1000) {
n++;
}
console.log(n); // 10（2^10 = 1024 > 1000）
六、break 与 continue
// break：立即终止整个循环
for (var i = 1; i <= 10; i++) {
if (i === 4) break;
console.log(i); // 1 2 3
}
// continue：跳过本次，继续下一次
for (var i = 1; i <= 10; i++) {
if (i % 2 === 0) continue; // 跳过偶数
console.log(i); // 1 3 5 7 9
}
// 实战：找到第一个离线设备就停止
var devices = [
{ name: "A", online: true },
{ name: "B", online: false },
{ name: "C", online: false }
];
for (var i = 0; i < devices.length; i++) {
if (!devices[i].online) {
console.log("第一个离线设备：" + devices[i].name);
break;
}
}
七、实战：九九乘法表
循环嵌套的经典练习——外层控制行，内层控制列：
for (var i = 1; i <= 9; i++) {
var row = "";
for (var j = 1; j <= i; j++) {
row += j + "×" + i + "=" + (i * j) + "\t";
}
console.log(row);
}
// 1×1=1
// 1×2=2 2×2=4
// 1×3=3 2×3=6 3×3=9
// ...
八、总结
🎯 条件和循环是编程的"骨架"。明天学函数——把逻辑封装起来，重复使用。