前端人必看！3个技巧让你彻底搞懂JS条件判断与循环

那些年我们踩过的坑

还记得刚学JavaScript的时候吗？遇到复杂的条件判断就头晕，写循环时总是搞不清该用for还是while。最尴尬的是，代码跑起来总是不按预期的来，bug找得头都大了！

说实话，这些困扰我都经历过。但后来我发现，只要掌握了几个核心技巧，这些看似复杂的问题都能轻松解决。

今天我就把压箱底的干货拿出来，用最通俗易懂的方式，带你彻底搞懂JS的条件判断和循环控制。看完这篇文章，你不仅能写出更优雅的代码，还能避开90%新手都会踩的坑！

条件判断：让你的代码更"聪明"

条件判断就像给代码装上了大脑，让它知道什么时候该做什么事。我们先从最基础的if语句开始。

javascript 复制代码

// 最简单的if语句
let score = 85;

if (score >= 60) {
    console.log('恭喜，及格了！'); // 这会输出，因为85确实大于等于60
}

但现实中的场景往往更复杂。比如我们要根据分数给出不同的评价：

javascript 复制代码

let score = 85;

if (score >= 90) {
    console.log('优秀！');
} else if (score >= 80) {
    console.log('良好'); // 这个会执行，因为85在80-89之间
} else if (score >= 70) {
    console.log('中等');
} else if (score >= 60) {
    console.log('及格');
} else {
    console.log('不及格，要加油了！');
}

这里有个小技巧：条件的顺序很重要。如果把 score >= 60 放在最前面，那85分也会被判断为"及格"，这显然不对。所以要从最严格的条件开始判断。

switch语句：当选项很多时

当我们需要根据一个变量的不同值来执行不同操作时，switch语句会让代码更清晰：

javascript 复制代码

let day = 'Monday';
let schedule = '';

switch (day) {
    case 'Monday':
        schedule = '每周例会';
        break; // 记住要break，否则会继续执行后面的case
    case 'Tuesday':
        schedule = '代码Review';
        break;
    case 'Wednesday':
        schedule = '技术分享';
        break;
    case 'Thursday':
        schedule = '项目进度同步';
        break;
    case 'Friday':
        schedule = '周报整理';
        break;
    default: // 其他情况
        schedule = '休息或自由安排';
}

console.log(`今天的安排是：${schedule}`); // 输出：今天的安排是：每周例会

switch语句在处理枚举值时特别有用，比如状态机、菜单选择等场景。

三元运算符：简洁的条件赋值

有时候我们只需要简单的条件判断，这时候三元运算符就派上用场了：

javascript 复制代码

let age = 20;
let canVote = age >= 18 ? '可以投票' : '不能投票';

console.log(canVote); // 输出：可以投票

这比写完整的if-else简洁多了。但要注意，不要嵌套太多层三元运算符，否则代码会很难读。

循环控制：让重复工作自动化

循环就是让计算机帮我们做重复的工作。最常用的就是for循环：

javascript 复制代码

// 打印1到5的数字
for (let i = 1; i <= 5; i++) {
    console.log(i); // 依次输出1, 2, 3, 4, 5
}

这个循环的逻辑是：从i=1开始，每次循环后i增加1，直到i不大于5为止。

while和do-while循环

while循环在不确定循环次数时特别有用：

javascript 复制代码

// 模拟掷骰子，直到掷出6
let dice = 0;
let attempts = 0;

while (dice !== 6) {
    dice = Math.floor(Math.random() * 6) + 1; // 生成1-6的随机数
    attempts++;
    console.log(`第${attempts}次掷出了${dice}`);
}

do-while和while的区别在于，do-while至少会执行一次：

javascript 复制代码

let userInput;
do {
    userInput = prompt('请输入yes继续：'); // 至少会问一次
} while (userInput !== 'yes');

数组遍历的几种方式

处理数组是前端开发中的家常便饭，JS提供了多种遍历方式：

javascript 复制代码

let fruits = ['苹果', '香蕉', '橙子'];

// 传统的for循环
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// for...of循环（ES6）
for (let fruit of fruits) {
    console.log(fruit); // 直接拿到元素，不用关心索引
}

// forEach方法
fruits.forEach(function(fruit, index) {
    console.log(`第${index}个水果是：${fruit}`);
});

循环控制关键词：break和continue

有时候我们需要在循环中做一些特殊的控制：

javascript 复制代码

// break：完全跳出循环
for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break; // 当i等于5时，直接结束整个循环
    }
    console.log(i); // 只输出1,2,3,4
}

// continue：跳过当前这次循环，继续下一次
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue; // 跳过3，不执行后面的代码
    }
    console.log(i); // 输出1,2,4,5
}

实战技巧：避免常见的坑

在实际开发中，有些坑特别容易踩。我来分享几个实用技巧：

技巧1：使用严格相等

javascript 复制代码

// 推荐使用 === 而不是 ==
if (0 === false) { // false，因为类型不同
    console.log('这会执行吗？');
}

if (0 == false) { // true，因为会进行类型转换
    console.log('这个会执行！');
}

技巧2：避免在循环中创建函数

javascript 复制代码

// 不推荐的写法
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 全部输出5，不是预期的0,1,2,3,4
    }, 100);
}

// 推荐的写法
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 正确输出0,1,2,3,4
    }, 100);
}

技巧3：使用数组方法代替传统循环

javascript 复制代码

let numbers = [1, 2, 3, 4, 5];

// 传统方式
let doubled = [];
for (let i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2);
}

// 现代方式
let doubledModern = numbers.map(num => num * 2);

真实场景应用

让我们看一个结合了条件判断和循环的实际例子：

javascript 复制代码

// 处理用户列表，筛选出活跃用户并发送通知
let users = [
    { name: '小明', isActive: true, lastLogin: '2024-01-15' },
    { name: '小红', isActive: false, lastLogin: '2023-12-01' },
    { name: '小刚', isActive: true, lastLogin: '2024-01-20' }
];

for (let user of users) {
    // 条件判断：只处理活跃用户
    if (user.isActive) {
        // 进一步判断：最近30天内登录的才发送通知
        let lastLoginDate = new Date(user.lastLogin);
        let thirtyDaysAgo = new Date();
        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
        
        if (lastLoginDate > thirtyDaysAgo) {
            console.log(`发送系统通知给 ${user.name}`);
            // 这里可以调用实际的发送通知函数
        } else {
            console.log(`${user.name} 超过30天未登录，不发送通知`);
        }
    }
}

进阶技巧：短路求值

这是JS中一个很实用的特性，可以让代码更简洁：

javascript 复制代码

// 使用 && 的短路特性
let user = { name: '小明' };
let displayName = user && user.name; // 如果user存在，取user.name

// 使用 || 设置默认值
let config = { theme: null };
let theme = config.theme || 'default'; // 如果theme为假值，使用'default'

console.log(theme); // 输出：default

性能优化小贴士

在处理大数据量时，循环的性能很重要：

javascript 复制代码

// 缓存数组长度，避免每次循环都计算
let bigArray = [/* 很多元素 */];
for (let i = 0, len = bigArray.length; i < len; i++) {
    // 处理逻辑
}

// 倒序循环有时更快
for (let i = bigArray.length - 1; i >= 0; i--) {
    // 处理逻辑
}

总结与思考

今天我们详细探讨了JavaScript中的条件判断和循环控制。从基础的if-else到复杂的循环优化，这些都是前端开发中每天都会用到的核心技能。

记住，写出好代码的关键不是记住所有语法，而是理解每种结构的适用场景。条件判断让代码有了决策能力，循环让代码能够高效处理重复任务。

在实际项目中，你会发现这些基础知识比任何花哨的框架都重要。它们是你编程能力的基石，决定了你代码的质量和可维护性。

现在我想问问大家：你在使用条件判断和循环时，还遇到过哪些有趣的问题或者有自己独到的使用技巧？欢迎在评论区分享你的经验，我们一起交流进步！