JavaScript流程控制：从混乱条件到优雅遍历，一次讲清如何让代码听话

你有没有写过那种"按下按钮后，一堆if else套着for循环，最后自己都绕晕了"的代码？🎯

一个真实的数据：在review新手开发者的代码时，超过70%的逻辑错误和性能问题，都源于不清晰或错误的流程控制。比如，本想给页面所有按钮换个颜色，却因为循环没写好，要么漏了几个，要么浏览器卡死了。

今天，咱们不聊深奥的理论，就像老朋友聊天一样，我把这些年摸爬滚打总结的JS流程控制心法和DOM遍历的实战套路交给你。学完你就能写出更清晰、更健壮的代码。

📖 核心摘要：这篇文章能帮你

👉 1. 彻底搞懂条件分支与循环的适用场景，告别选择困难。

👉 2. 掌握遍历DOM集合修改属性的标准姿势与性能窍门。

👉 3. 识别流程控制中的常见"坑"，并学会如何优雅地绕过去。

🚀 主要内容脉络

🎯 一、痛点：为什么你的代码总是"失控"？

🎯 二、核心：让逻辑变清晰的"导航仪"------流程控制全解

🎯 三、实战：用循环征服DOM，批量修改元素属性

🎯 四、避坑与升华：写出更专业的代码

一、痛点：为什么你的代码总是"失控"？

想象一个场景：产品经理要求，"用户滚动到页面底部时，如果已经登录，就加载A模块数据；如果未登录，弹出登录框；但如果是VIP用户，不论是否登录都直接加载A和B模块......"

如果你下意识地开始写一连串的if...else if...else，那么恭喜，你正在制造一颗名为"面条代码"的定时炸弹。这种代码不仅难读、难改，几个月后你自己都看不懂。

问题的核心 在于，我们没有把流程控制语句当作"导航仪 "来规划逻辑路径，而是当成了"补丁"哪里需要贴哪里。

二、核心：让逻辑变清晰的"导航仪"------流程控制全解

流程控制无非两件事：根据不同情况走不同的路（分支） ，和重复做一些事情直到满足条件（循环）。

🔀 条件分支：你的代码决策层

if： "如果...就..."（单车道）

if (isRaining) {
takeUmbrella();
}
if...else："如果...就...否则..."（岔路口二选一）

if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}
else if："如果...就...或者如果...就...否则..."（多岔路口）

if (hour < 12) {
console.log("上午好");
} else if (hour < 18) {
console.log("下午好");
} else {
console.log("晚上好");
}

关键警告 ：当分支超过3层，就该考虑用switch语句或"策略模式"重构了，保持代码扁平。

🔄 循环：不知疲倦的重复劳动者

循环的关键是知道起点、终点和步长。

for循环：当你知道要循环多少次时，比如遍历数组。

for (let i = 0; i < 5; i++) {
console.log('这是第 ${i} 次循环');
}
// 结构：初始化；条件；增量
while循环：当你不确定次数，但知道满足某个条件就要继续时。

let stack = [1, 2, 3];
while (stack.length > 0) { // 只要栈不为空就继续
console.log(stack.pop());
}
for...of (用于数组等可迭代对象) 和 for...in (用于对象属性)：让你摆脱索引，直接拿到值。

// for...of 遍历数组值
let colors = ['red', 'green', 'blue'];
for (let color of colors) {
console.log(color); // 直接输出 'red', 'green', 'blue'
}

// for...in 遍历对象键名
let obj = {a: 1, b: 2};
for (let key in obj) {
console.log(key, obj[key]); // 输出 'a' 1, 'b' 2
}

重要区别 ：遍历数组，99%的情况用for...of或forEach方法更好。for...in是为对象设计的，遍历数组可能会带来意外结果。

⏸️ 循环控制：break、continue 与 return

break：像"紧急停止"按钮，立即跳出整个循环。
continue：像"跳过这一曲"，跳过当前轮次，直接进入下一轮循环。
return：在函数里用，直接结束函数，循环自然也停了。

for (let i = 0; i < 10; i++) {
if (i === 3) continue; // 跳过i=3这次
if (i === 7) break; // i=7时彻底终止循环
console.log(i); // 输出: 0, 1, 2, 4, 5, 6
}

三、实战：用循环征服DOM，批量修改元素属性

理论说一千道一万，不如一行代码。前端最常见的循环场景之一：获取一堆DOM元素，然后对它们做点什么事。

场景：把页面上所有类名为.old-style的段落文字改成灰色，并加上删除线。

复制代码

// 1. 获取元素集合（这是一个HTMLCollection，类似数组）
const oldParagraphs = document.getElementsByClassName('old-style');

// 2. 遍历并修改（经典for循环）
for (let i = 0; i < oldParagraphs.length; i++) {
    oldParagraphs[i].style.color = '#999';
    oldParagraphs[i].style.textDecoration = 'line-through';
}

// 3. 更现代的写法（将集合转为真数组后使用forEach）
// Array.from(oldParagraphs).forEach(p => {
//   p.style.color = '#999';
//   p.style.textDecoration = 'line-through';
// });

// 4. 或者直接用for...of（推荐！）
// for (let p of oldParagraphs) {
//   p.style.color = '#999';
//   p.style.textDecoration = 'line-through';
// }

为什么推荐for...of？ 简洁，不易出错（没有索引i越界问题），且能很好地处理各种集合（HTMLCollection, NodeList等）。

四、避坑与升华：写出更专业的代码

🕳️ 常见坑点：

循环中修改数组长度 ：在for循环里增删数组元素，会导致索引错乱。解决方案：可以从后往前循环，或先收集要操作的元素。
误用for...in遍历数组 ：它可能会遍历到数组的自定义属性或原型链上的方法。牢记：遍历数组，用for...of或forEach。
无限循环 ：while循环条件永远为真，或者for循环忘了写增量，浏览器会卡死。务必检查循环终止条件！

🚀 进阶思考：

条件分支优化 ：多用三元表达式? :处理简单逻辑；用switch或对象映射({key: function})替代复杂的if-else链。
循环的性能 ：在超大规模数据遍历时，经典的for循环（正序或倒序）通常性能最优。但对于日常的DOM操作，性能差异微乎其微，代码可读性优先。
函数式编程思维 ：数组的forEach、map、filter等方法，能让遍历和转换数据的意图更明确，减少副作用。

💎 最后总结

流程控制不是死记硬背的语法，而是一种规划代码执行路径的思维 。面对复杂逻辑时，先理清脉络 ，再选择合适的"导航仪"（分支或循环）。在DOM操作等日常任务中，for...of和forEach是你的好帮手。

记住，最好的代码不是最聪明的，而是最容易被下一个开发者（包括六个月后的你）理解的代码。

---写在最后 ---

希望这份总结能帮你避开一些坑。如果觉得有用，不妨点个赞👍 或收藏⭐ 标记一下，方便随时回顾。也欢迎关注我，后续为你带来更多类似的实战解析。有任何疑问或想法，我们评论区见，一起交流开发中的各种心得与问题。