那些年我们踩过的坑
还记得刚学JavaScript的时候吗？遇到复杂的条件判断就头晕，写循环时总是搞不清该用for还是while。最尴尬的是，代码跑起来总是不按预期的来，bug找得头都大了！
说实话，这些困扰我都经历过。但后来我发现，只要掌握了几个核心技巧，这些看似复杂的问题都能轻松解决。
今天我就把压箱底的干货拿出来，用最通俗易懂的方式，带你彻底搞懂JS的条件判断和循环控制。看完这篇文章，你不仅能写出更优雅的代码，还能避开90%新手都会踩的坑！
条件判断：让你的代码更“聪明”
条件判断就像给代码装上了大脑，让它知道什么时候该做什么事。我们先从最基础的if语句开始。
1// 最简单的if语句 2let score = 85; 3 4if (score >= 60) { 5 console.log('恭喜，及格了！'); // 这会输出，因为85确实大于等于60 6} 7
但现实中的场景往往更复杂。比如我们要根据分数给出不同的评价：
1let score = 85; 2 3if (score >= 90) { 4 console.log('优秀！'); 5} else if (score >= 80) { 6 console.log('良好'); // 这个会执行，因为85在80-89之间 7} else if (score >= 70) { 8 console.log('中等'); 9} else if (score >= 60) { 10 console.log('及格'); 11} else { 12 console.log('不及格，要加油了！'); 13} 14
这里有个小技巧：条件的顺序很重要。如果把 score >= 60 放在最前面，那85分也会被判断为“及格”，这显然不对。所以要从最严格的条件开始判断。
switch语句：当选项很多时
当我们需要根据一个变量的不同值来执行不同操作时，switch语句会让代码更清晰：
1let day = 'Monday'; 2let schedule = ''; 3 4switch (day) { 5 case 'Monday': 6 schedule = '每周例会'; 7 break; // 记住要break，否则会继续执行后面的case 8 case 'Tuesday': 9 schedule = '代码Review'; 10 break; 11 case 'Wednesday': 12 schedule = '技术分享'; 13 break; 14 case 'Thursday': 15 schedule = '项目进度同步'; 16 break; 17 case 'Friday': 18 schedule = '周报整理'; 19 break; 20 default: // 其他情况 21 schedule = '休息或自由安排'; 22} 23 24console.log(`今天的安排是：${schedule}`); // 输出：今天的安排是：每周例会 25
switch语句在处理枚举值时特别有用，比如状态机、菜单选择等场景。
三元运算符：简洁的条件赋值
有时候我们只需要简单的条件判断，这时候三元运算符就派上用场了：
1let age = 20; 2let canVote = age >= 18 ? '可以投票' : '不能投票'; 3 4console.log(canVote); // 输出：可以投票 5
这比写完整的if-else简洁多了。但要注意，不要嵌套太多层三元运算符，否则代码会很难读。
循环控制：让重复工作自动化
循环就是让计算机帮我们做重复的工作。最常用的就是for循环：
1// 打印1到5的数字 2for (let i = 1; i <= 5; i++) { 3 console.log(i); // 依次输出1, 2, 3, 4, 5 4} 5
这个循环的逻辑是：从i=1开始，每次循环后i增加1，直到i不大于5为止。
while和do-while循环
while循环在不确定循环次数时特别有用：
1// 模拟掷骰子，直到掷出6 2let dice = 0; 3let attempts = 0; 4 5while (dice !== 6) { 6 dice = Math.floor(Math.random() * 6) + 1; // 生成1-6的随机数 7 attempts++; 8 console.log(`第${attempts}次掷出了${dice}`); 9} 10
do-while和while的区别在于，do-while至少会执行一次：
1let userInput; 2do { 3 userInput = prompt('请输入yes继续：'); // 至少会问一次 4} while (userInput !== 'yes'); 5
数组遍历的几种方式
处理数组是前端开发中的家常便饭，JS提供了多种遍历方式：
1let fruits = ['苹果', '香蕉', '橙子']; 2 3// 传统的for循环 4for (let i = 0; i < fruits.length; i++) { 5 console.log(fruits[i]); 6} 7 8// for...of循环（ES6） 9for (let fruit of fruits) { 10 console.log(fruit); // 直接拿到元素，不用关心索引 11} 12 13// forEach方法 14fruits.forEach(function(fruit, index) { 15 console.log(`第${index}个水果是：${fruit}`); 16}); 17
循环控制关键词：break和continue
有时候我们需要在循环中做一些特殊的控制：
1// break：完全跳出循环 2for (let i = 1; i <= 10; i++) { 3 if (i === 5) { 4 break; // 当i等于5时，直接结束整个循环 5 } 6 console.log(i); // 只输出1,2,3,4 7} 8 9// continue：跳过当前这次循环，继续下一次 10for (let i = 1; i <= 5; i++) { 11 if (i === 3) { 12 continue; // 跳过3，不执行后面的代码 13 } 14 console.log(i); // 输出1,2,4,5 15} 16
实战技巧：避免常见的坑
在实际开发中，有些坑特别容易踩。我来分享几个实用技巧：
技巧1：使用严格相等
1// 推荐使用 === 而不是 == 2if (0 === false) { // false，因为类型不同 3 console.log('这会执行吗？'); 4} 5 6if (0 == false) { // true，因为会进行类型转换 7 console.log('这个会执行！'); 8} 9
技巧2：避免在循环中创建函数
1// 不推荐的写法 2for (var i = 0; i < 5; i++) { 3 setTimeout(function() { 4 console.log(i); // 全部输出5，不是预期的0,1,2,3,4 5 }, 100); 6} 7 8// 推荐的写法 9for (let i = 0; i < 5; i++) { 10 setTimeout(function() { 11 console.log(i); // 正确输出0,1,2,3,4 12 }, 100); 13} 14
技巧3：使用数组方法代替传统循环
1let numbers = [1, 2, 3, 4, 5]; 2 3// 传统方式 4let doubled = []; 5for (let i = 0; i < numbers.length; i++) { 6 doubled.push(numbers[i] * 2); 7} 8 9// 现代方式 10let doubledModern = numbers.map(num => num * 2); 11
真实场景应用
让我们看一个结合了条件判断和循环的实际例子：
1// 处理用户列表，筛选出活跃用户并发送通知 2let users = [ 3 { name: '小明', isActive: true, lastLogin: '2024-01-15' }, 4 { name: '小红', isActive: false, lastLogin: '2023-12-01' }, 5 { name: '小刚', isActive: true, lastLogin: '2024-01-20' } 6]; 7 8for (let user of users) { 9 // 条件判断：只处理活跃用户 10 if (user.isActive) { 11 // 进一步判断：最近30天内登录的才发送通知 12 let lastLoginDate = new Date(user.lastLogin); 13 let thirtyDaysAgo = new Date(); 14 thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); 15 16 if (lastLoginDate > thirtyDaysAgo) { 17 console.log(`发送系统通知给 ${user.name}`); 18 // 这里可以调用实际的发送通知函数 19 } else { 20 console.log(`${user.name} 超过30天未登录，不发送通知`); 21 } 22 } 23} 24
进阶技巧：短路求值
这是JS中一个很实用的特性，可以让代码更简洁：
1// 使用 && 的短路特性 2let user = { name: '小明' }; 3let displayName = user && user.name; // 如果user存在，取user.name 4 5// 使用 || 设置默认值 6let config = { theme: null }; 7let theme = config.theme || 'default'; // 如果theme为假值，使用'default' 8 9console.log(theme); // 输出：default 10
性能优化小贴士
在处理大数据量时，循环的性能很重要：
1// 缓存数组长度，避免每次循环都计算 2let bigArray = [/* 很多元素 */]; 3for (let i = 0, len = bigArray.length; i < len; i++) { 4 // 处理逻辑 5} 6 7// 倒序循环有时更快 8for (let i = bigArray.length - 1; i >= 0; i--) { 9 // 处理逻辑 10} 11
总结与思考
今天我们详细探讨了JavaScript中的条件判断和循环控制。从基础的if-else到复杂的循环优化，这些都是前端开发中每天都会用到的核心技能。
记住，写出好代码的关键不是记住所有语法，而是理解每种结构的适用场景。条件判断让代码有了决策能力，循环让代码能够高效处理重复任务。
在实际项目中，你会发现这些基础知识比任何花哨的框架都重要。它们是你编程能力的基石，决定了你代码的质量和可维护性。
现在我想问问大家：你在使用条件判断和循环时，还遇到过哪些有趣的问题或者有自己独到的使用技巧？欢迎在评论区分享你的经验，我们一起交流进步！
《前端人必看！3个技巧让你彻底搞懂JS条件判断与循环》 是转载文章，点击查看原文。
