第 8 周总结：流程控制与函数 — 程序有了"逻辑"
蜗牛往上爬 · 前端工业可视化学习笔记 第 8 周总结
本周从"直线执行"升级到"有逻辑的程序"：条件判断让程序会做选择，循环让程序会干重复的活，函数让逻辑可复用，闭包和 this 则是通往 JS 进阶的第一道门。
目录
一、本周学了什么
知识图谱
流程控制与函数
├── 条件判断
│ ├── if / else if / else（从上到下，命中即停）
│ ├── 三元运算符（简单二选一）
│ └── switch（一变量多情况，注意 break 穿透）
│
├── 循环
│ ├── for（已知次数）
│ ├── while（未知次数，防死循环）
│ ├── do while（至少执行一次）
│ ├── break（终止）/ continue（跳过）
│ └── 循环嵌套（九九乘法表）
│
├── 函数
│ ├── 函数声明（整体提升）vs 函数表达式（不提升）
│ ├── 参数（undefined 时用 || 设默认值）
│ ├── return（立即结束；不写返回 undefined）
│ ├── arguments（伪数组，所有实参）
│ ├── 作用域（内访问外，外不能访问内）
│ └── 变量提升（var 声明提升，赋值不提升）
│
├── 闭包
│ ├── 定义：函数 + 外部变量
│ ├── 场景：计数器、状态缓存、日志前缀
│ └── 价值：保护私有数据
│
├── this
│ ├── 规则：谁调用指向谁
│ └── 坑：赋值给变量/回调后丢失
│
└── IIFE
└── (function(){})()：独立作用域，模块化雏形
二、核心知识速记
三条铁律
switch 每个 case 要么 return 要么 break——否则穿透
函数内部能访问外部变量，反之不行——闭包的基础
this 看点号前面是谁——赋值给变量后 this 就丢了
在工业可视化里的应用场景
三、本周踩过的坑
坑点 1：switch 忘写 break
// ❌ case 1 命中后继续执行 case 2 的代码
switch (code) {
case 1:
console.log("待机");
case 2:
console.log("运行中"); // 也会输出！
}
// ✅ 用 return（在函数里）或 break
function getStatus(code) {
switch (code) {
case 1: return "待机";
case 2: return "运行中";
}
}
坑点 2：while 死循环
// ❌ 忘记 i++，条件永远为 true，页面卡死
var i = 0;
while (i < 5) {
console.log(i);
}
// ✅ 循环体内更新条件变量
var i = 0;
while (i < 5) {
console.log(i);
i++;
}
坑点 3：函数表达式先调用后定义
// ❌ 报错：bye is not a function
bye();
var bye = function () { console.log("Hi"); };
// ✅ 函数声明可以先调用后定义（整体提升）
hi(); // "Hi"
function hi() { console.log("Hi"); }
坑点 4：this 在回调中丢失
// ❌ this.name 是 undefined
var device = {
name: "CNC-001",
show: function () { console.log(this.name); }
};
setTimeout(device.show, 1000); // undefined
// ✅ ES5 的解决方法：用闭包保存 this（ES6 箭头函数更优雅，后续学）
setTimeout(function () {
device.show(); // "CNC-001"（device 调用）
}, 1000);
四、自测清单
[ ] if/else if/else 的执行顺序是什么？
[ ] switch 不写 break 会发生什么？
[ ] for 和 while 分别适合什么场景？
[ ] break 和 continue 的区别？
[ ] 函数声明和函数表达式在"提升"上有什么区别？
[ ] 函数不写 return，返回值是什么？
[ ] arguments 是什么？它是真数组吗？
[ ] 全局作用域和局部作用域的访问规则？
[ ] 什么是变量提升？var 的提升规则？
[ ] 什么是闭包？举一个实际使用场景
[ ] this 的判断规则是什么？
[ ] 方法赋值给变量后 this 会怎样？
[ ] IIFE 的写法和作用？
五、下周预告
第 9 周：对象、数组与 JSON
对象和数组是 JS 中最重要的数据结构——工业大屏的所有数据（设备列表、传感器读数、告警记录）都是用它们承载的。学完下周，就能对"一批数据"做批量处理了。
🚀 第 8 周完成！程序已经"有逻辑"了，下周让数据"有结构"。